React.JS – Enviroment Set-Up: WebPack & Babel

In this little tutorial we will install the Developer environment for React.js using:

  • Node.js
  • WebPack
  • Babel
  • React Libraries.

we will divide this in three parts

  1. ES6 Server Set-Up (WebPack + Babel)
  2. React Enviroment Set-Up
  3. Code a basic React.js App

If you don’t have Node.js install follow the instructions in this: link

Part 1 – ES6 Server Set-Up (WebPack + Babel)

WebPack Installation

Here is a link that you can use to learn more about WebPack Installation: link

CD to the developing directory, and run the command “npm init -y” to start the project

Now install WebPack. This will update the “package.json”

Create file folders:

Now create a folder named: “build” and inside create the: “index.html” & “bundle.js” files.

 

Then creat another folder named: “app” and inside create another “index.js

 

Create the configuration pack:

Create new configuration file named: “webpack.config.js” in the Root-Working directory, this is the file where we tell where to get the code and where to put it after conversion, basically you will have a code like:

because Im using Linux I need to provide an absolute path:

path: ‘/home/edmundo/Dropbox/02-Helio-Training/01-Code-Projects/01-JavaScript/03-ES6/build‘,

Then we need to modify the “package.json” file, in the area of scripts we delete the test line and instead we add: “build”: “webpack” The code should look like:

 

Finally we need to test if WebPack is running by going to the Terminal and typing:  npm run build  and you should get a screen like:

If things are not working: install webpac golbally: sudo npm install webpack -g

Now if you go to the folder: “build” you will notice the files there

Installing Babel.

In the terminal:

Now we need to update the file: “webpack.config.js” to description : LINK

Next we need to update to “package.json”

After those changes go to the Terminal and type: “npm start“, then go to the browser and go to: http://localhost:3000/  and open the console

then open “index.js” in the “app” folder and add some JavaScript code then [Ctrl] + [S]  and see how automatic the changes are transfer to “bundle.js” you can use this configuration to run ES6 Code.

 

Part 2 – React.js Enviroment Set-Up

Now we need other tools or Node-Packages to get them CD to the working folder in the Terminal and type:

Next we need to do some changes in our set-up files.

Open the file: “package.json” with Atom

Next in the folder “build” open the file “index.html” and make sure you have a <div> with the ID of “root” inside of the <body> tags.

And with this the environment is ready for us to code our React.js App.

Part  – Code Basic React.js App

First open the file: “index.js” here is where we will code the app:

Another option is a little more complex because we are creating a full component utilizing JavaScript Calsses, chose one or the other, it doesn’t really matter.

Now run the server in Terminal ” npm start ” and in the browser go to ” http://localhost:3000/ ” and you should see the new line render.

And just like this the most basic React.js App is done.

If you want to add bootstrap to you react app you should install that dependency:

 

 

 

ES7 – Enviroment Set-Up

Go to the terminal and type:

Now go to the file: ” package.json “:

and you should be OK.

 

.



Copyright 2017. All rights reserved.

Posted June 20, 2017 by Edmundo in category "React