Quick guide to starting with React js using ES6

So, thinking of playing around with react, well! to start, it is a good decision. It’s a good decision not because it is a popular option, but more because of the approach it takes to manage the View Layer of your application. With it’s virtual DOM and Component based approach, it is one of the best option(If not the best).

Let’s Start

Make sure you have Node.js installed in your system, we will be installing packages using npm, which comes by default with Node.js.

Code on Github to follow along

Once Node is all setup create an empty folder named react and navigate to it in terminal. Type the following command and hit enter.

npm init

Keep hitting enter or type in the information if you want to change things from default. It will show you a preview of the final content of the file, just git enter and you are good to go.

Install packages

Install react packages: This will install all the necessary things we need to start working with react.

npm install react react-dom --save

Install Babel modules: Babel is javascript compiler, it will help up convert ES6(also mentioned as ES2015) to javascript that all browsers can understand.

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save

Now we will install Webpack: Webpack is the module bundler or the build tool we will be using to automate our workflow.

npm install webpack -g

-g installs Webpack globally and makes the command accessible easily. Now we are all done with the installation of the dependencies, let’s jump into coding our react app.

Staring with the app

Create an index.html file

index.html

Create webpack.config.js file, this file will have the configuration for code compilation.

entry: is the path of your main file (it will be our main.jsx file which we will create in a few minutes).

output: The path to the compiled file which we will be linking in our html file.

module: Gives Webpack configuration information, that we will be using .jsx syntax for our files and babel to compile the files.

webpack.config.js

Create main.jsx file.

main.jsx

Now let’s try to run Webpack and create that index.js file which we will be using. Run the following command in terminal (after navigating to the folder where your webpack.config.js file is).

webpack

You will now see the following error:

This is because Webpack doesn’t understand when .jsx syntax is. So how to we let webpack know that we are using .jsx syntax.

To do that, create a file .babelrc in the root of your directory and set configuration that you are using es2015 and react. This is your babel configuration file.

.babelrc

Now run the webpack command again

webpack

This time your code successfully works and you will have a folder build with index.js file in it. Now finally link the file in your index.html file and open it up in a browser, you will see Cool! It’s working in your page instead of Hello :D

index.html

You can also have a look at the final code on Github if you have not done it already

Hope your journey with React is awesome, as it has been for me, good luck 👍