Hello React

Javascript can be overwhelming for a beginner. There are so many decisions to be made: Angular/React/Vue.js for front end, Express/Hapi/Sails (Node.js frameworks) for backend, NPM/Bower/Yarn for dependency management, Webpack/Browserify to bundle your dependencies and a compiler like babel (yes! you heard it right. Compiler for javascript) if you use ES6 (ECMAScript 6). Do you wish somebody made these choices for you?

This article introduces you to ReactJS and some of the build tools mentioned above which will help you get started right away.

  • ReactJS is a javascript library designed to build creative UI. It is reponsible for View layer in a MVC (model-view-controller) architecture.
  • NPM is a package manager which allows you to find, share and reuse code.
  • Webpack is a module bundler. It takes in a bunch of assets like source code (js), CSS, images etc along with its dependencies and converts them into static assets which can be distributed to the client.
    Ex — Webpack can be used to bundle or combine our source code along with dependencies like React-Bootstrap (fetched via NPM) into a single file called bundle.js (or any other name of your choice). This bundled file can then be given to the client for his use.
  • Babel is a compiler which is used to compile ES6 code into ES5 (ECMAScript 5). In simple words, ECMAScript is an industry standard for scripting language and Javascript is based on it. ES6 has introduced a whole bunch of features which are not supported completely by all the browser vendors. Hence we need compilers like babel to compile Es6 to ES5 (also called as transpilers since it compiles source to source i.e ES6 to ES5).

Setup

Install NPM

Follow the steps mentioned here to install node.js and npm on your machine.

Create a new directory for the project.

mkdir hello-react && cd hello-react

NPM Inititalization

Run npm init inside hello-react to create a node package. When prompted, fill in the description, author and leave the other fields to default. Save the configuration. This will create package.json with contents as shown below.

Configure Webpack

Create a new file webpack.config.js and add the following. The comments in the config file explains how webpack is setup and what it does.

Configure Babel

Create a new file .babelrc to set rules for Babel. We want babel to compile ES6 and JSX code for this project ( jsx is a syntax extension to JavaScript recommended by react to describe the UI). Add the following code to the file.

Install dependencies

Run the following command to install the dependencies and save the list of dependent packages with their version locked in package.json. We need react and react-dom for our hello world application.

npm install react react-dom --save

Run the following command to install development dependencies and save the list of dependent development packages with their version locked in package.json. All the dependencies starting with babel are used to compile the code from ES6 to ES5. Webpack is used to build our application and webpac-dev-server is used to host the server (development only).

npm install babel-core babel-loader babel-preset-es2015 babel-
preset-react webpack webpack-dev-server --save-dev

Package.json file with dependencies

Dependencies installed with NPM and their versions are stored in the package.json file (if save flag is used). When ever you run npm install hereafter, it will install the dependencies with the version saved in the json file.

Source Code

Create index.html as shown.

This is the file served by the web server. The script bundle.js is the file produced by webpack after bundling our source and the dependencies. React will render the contents inside <div id=”root”></div>

Create a source directory for our code.

All the source code will be stored inside this directory. Add index.jsx inside the directory

mkdir -p src/index.jsx

Add the following to index.jsx

Directory Structure

This is how your directory will look like. Note — build directory will be created by webpack while building your app.

Hello-React directory structure

Build the source code

Run the following code from the root directory i.e hello-react to build the source code using webpack.

webpack

Deploy the code

We will use the webpack-dev-server (installed as dev dependency) to host the app on localhost:8080. Note — Use webpack-dev-server for development only.

Run the following command from root directory i.e hello-react

webpack-dev-server

Open the browser and go to localhost:8080 to view the page.

What Next?

You can try out the examples from the official ReactJS documentation by replacing/adding more code in src directory.

Show your support

Clapping shows how much you appreciated Arjun Hariharan’s story.