Getting Started with React and Babel

Before We Get Started

First, let’s make sure Node is installed on your computer. For those of you who are new to Node, Node is a runtime environment that allows you to execute javascript code outside of a browser. Node is commonly used to build back-end services such as API’s (Application Programming Interfaces). These services help power client-side applications, like Web, Desktop, and Mobile applications. The Client side of an application is the surface layer of the application. It is what the user sees when interacting with the application. Node is ideal for building highly scalable, data-intensive, real-time back-end services that support applications.

Installing Node.js

  • Navigate to the Node.js website to install the latest version of Node that is recommended to most users. No fancy commands needed, once you download the installer just click next a few times to get started.
  • To verify that the node has successfully been installed open your terminal and run the command node -v.

Installing React

  • On your desktop, create a folder and name it react-and-webpack.
  • Within your react-and-webpack folder create another folder and name it public.
  • Within the public folder create an index.html file. Your index.html file should look identical to this:

  • In your public folder create another folder title scripts. Within the scripts folder create a file called app.js
  • In your terminal, navigate to the react-and-webpack folder
  • When you are in the react-and-webpack folder run the command npm install -g live-server

  • Let’s make sure live-server was properly installed. Run the command live-server -v

  • In your terminal run the command live-server public. The web page in your browser should look like this.

Setting up Babel

Babel is a JavaScript compiler. Babel can compile features from ES6 & ES7 into ES5 code. If an application was built using ES5 and new features are released you won’t have to update the entire application. Instead, you can write code with the new features and babel will convert the code into ES5.

  • Using terminal, in your project folder run the command npm install -g babel-cli

  • Next, run the command npm init. This sets up our project to use npm and allows us to specify local dependencies. You will then be prompt with a few questions. Go ahead and press enter until you are no longer asked questions.

In the root of the project, you should now have a file titled package.json. 

Time to install some Babel presets:

  • In there terminal, run the command npm install babel-preset-react babel-preset-env

Your package.json file should now show:

Using React

  • In your root project folder, create an src folder. 
  • Within your src folder create a file title app.js.
  • Now, make your app.js identical to this

  • Navigate to your index.html file
  • Above the script tags, add a div element with the id of app

  • In the terminal, run the command babel src/app.js –out-file=public/scripts/app.js –presets=env,react. This will enable our application to run JSX code.

  • Now run babel src/app.js –out-file=public/scripts/app.js –presets=env,react –watch. Adding watch at the end of the command will enable to the server to auto-generate the application

Your browser should look like this:

In the next article, I will discuss Webpack and its importance in Front End Development. Be sure to check out the article How to Become a Front End Developer.

If you want to get to know me better you can follow me on Instagram, GitHub, or LinkedIn. If you have any questions, you can reach me on my personal site: www.iAmDarronBrown.com. I cover a wide range of topics from tech, to relationships, to self-improvement. Thanks for reading.

Facebook Comments
About Darron Brown 8 Articles
Darron Brown has Master's in Information Systems from the University of Utah and works as a Software Engineer.