In this tutorial we are going to setup Reactjs with Parceljs, Eslint, Babel and less. In case you missed Introduction to Reactjs article you can read that here. Let’s get started:-

1. Setup Empty Project
You can setup an empty project using the command
npm init -y

2. Install Parceljs
If you don’t know about the Parceljs here is short description Parceljs is Blazing fast, zero configuration web application bundler. Some of its features are:-

  • Blazing fast bundle times
  • Bundle all your assets
  • Automatic transforms
  • Zero config code splitting
  • Hot module replacement 🔥
  • Friendly error logging

npm install -g parcel-bundler
or
npm install --save-dev parcel-bundler

2. Install Reactjs
In case you missed Introduction to Reactjs article you can read that here.

npm install --save react
npm install --save react-dom

3. Add Html and js file
You can create one html and one js file on same root level.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render( <div>Reactjs with parceljs</div>, document.getElementById('app'),);

index.html

<html>
<body> 
<div id="app"> </div>
</body>
<script src="./index.js"></script>
</html>

4. Update package.json
add this start script
"start": "parcel index.html --open"

5. Start the server
npm start
you can see this output in your browser on url `http://localhost:1234/`

6. Add Eslint
npm install eslint --save-dev
npx eslint –init

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript
? What format do you want your config file to be in? JavaScript
? Would you like to install them now with npm? yes
After that eslint setup will be done.

7. Add Babel
create new file src/index.jsx with content

import React, { Component } from 'react';
export class Home extends Component { 
state = {};
render() {
 return (
 <div className="home">
 <div className="container">
 <div> Reactjs with Parceljs, Eslint, Babel And Less </div> 
</div> 
</div>
 ); }}

You gonna get an error at this line `state = {};` and to remove that we need to install babel and if you don’t know about babel here is a short description babel converts new javascript code/syntax to browser compatible code/syntax.
npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime babel-core babel-eslint babel-plugin-transform-class-properties babel-preset-env babel-preset-react

after that we need to add parser in .eslintrc.js
parser: "babel-eslint"
after that we need to create a file .babelrc at root

{ "plugins": [ "@babel/plugin-proposal-class-properties", ["@babel/plugin-transform-runtime", { "regenerator": true } ] ]}

After that you need to disable two eslint rules

rules: { "import/prefer-default-export":0, "react/state-in-constructor":0 },

9. Import new component
you need to update your index.js file now

/* eslint-disable */
import React from 'react';
import ReactDOM from 'react-dom';
import {Home} from "./src"
ReactDOM.render( <Home/>, document.getElementById('app'),);

now you can see new text on webpage i.e Reactjs with Parceljs, Eslint, Babel And Less

10. Add less
In case you don’t know Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. Its have various features like using variables, functions and expression in css.
create src/index.less file with content

body { margin: 0;}
.home { width: 100%; height: 100vh; background: #DA4453; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #89216B, #DA4453); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #89216B, #DA4453); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ display: flex; align-items: center; justify-content: center;
.container { background: white; height: 50px; display: flex; align-items: center; justify-content: center; padding: 15px; border-radius: 5px; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1); cursor: pointer; }}

import the less file src/index.jsx
import './index.less';
Now you can see this output on your browser.

Now you have successfully create a project with Reactjs, Parceljs, Eslint, Babel and less.
Here is the link to repo github 🙂

Categories: Reactjs

3 Comments

How to use less with React - Blog React · January 27, 2020 at 4:22 am

[…] If you want to learn how to setup whole project with latest technology you can check here. […]

Best way to improve your React code - Blog React · February 22, 2020 at 3:44 am

[…] 1. Using Eslint […]

React setup with webpack and babel 2020 - Blog React · February 28, 2020 at 4:12 am

[…] our this article for setup React with […]

Comments are closed.