Create ReactJS App From Scratch

React is a popular Javascript library (and not a Framework) created by Facebook, that can be used to build user interfaces.

React is:

Declarative: Design the views of your application and React will efficiently update and render only the necessary components.
Component-Based: It lets you create components that manage their own state and that can be composed to make more complex UIS.
Learn Once, Write Anywhere: React components are reusable, which means that it lets you develop new features without rewriting existing code.

Learning React is really easy, the hard part comes when trying to set up a React project from scratch because there are lots of npm modules to install, as well as a lot of configuration to be done.

Create a React App

The easiest way to start with React without worrying too much about configuration or anything else is to use create-react-app which is a handy tool that abstract a lot of what makes a React app work, away from you.

After installing Node.js, you can use yarn or npm to install create-react-app globally:

$ npm install -g create-react-app
  # or
$ yarn global add create-react-app

Then to create a new App, just run:

$ create-react-app my-app-name
$ cd my-app-name

This will create a directory called my-app-name which will contain the initial project structure alone with all the necessary dependencies.

And now you are set to go!

Just run inside your project directory:

$ npm run start

And you will see something like this:

As mentioned above, create-react-app hides all the configuration details and lets you instead focus on the code that you write, which is great when starting with React.

The downside is that it insulates the user from understanding its basics, and from how it works internally.

For example, syntax such as import/export or JSX, or building and serving your files during development are all things that create-react-app takes care of, but these are also things that you will need to understand to have some idea of what’s going on under the hood.

Luckily, we can handle these issues with Babel and Webpack.

Webpack + Babel

Without further ado, let’s get started!

For thing first, let’s create a new directory for our React app, and initialize our project with npm init.

$ mkdir awesome-react-project
$ cd awesome-react-project
$ npm init

You will be prompted to input information about your project. Just press enter for every choice (you can change these information later), or if you want to add information about your project, go ahead.

Installing dependencies.

Next, we will need to install the following dependencies:

React & react-dom
```
$ npm install --save react react-dom
```
Webpack & webpack-dev-server
```
$ npm install --save-dev webpack webpack-dev-server webpack-cli
```
webpack is a module bundler, that bundles JavaScript files and generates a single (or multiples) files that can be used in the browser.
webpack-dev-server will let us run a development server with features like Hot Module Replacement and Live Reloading.
Babel
```
$ npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
```
Babel and its supporting libraries are used to convert our ES6 code to browser understandable code.

Configuration.

Now that all the necessary dependencies are installed, let’s move to the configuration.

In the project root, we will create a file called webpack.config.js, and inside:

We will import webpack.
Define an entry point which tells webpack where our application starts and where to start bundling our files.
Define loaders, which are used to process different types of files for bundling. For this tutorial we are only interested by babel-loader which will be responsible of processing JS files.

var webpack = require('webpack');
var path = require('path');
 
module.exports = {
  entry: './src/index.js',
  module: {
  rules: [{
      test: /\.(js|jsx)$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader'
        }
        ]
    }
}

Now we need to tell webpack where to output our dist.js file (inside a folder called public):

output: {
    path:  __dirname + '/public',
    filename: 'dist.js'
}

And we also need to provide webpack with the options for our development server.

devServer: {
    contentBase: __dirname + '/public',
    historyApiFallback: true
}

The whole webpack.config.js will looks like this:

var webpack = require('webpack');
var path = require('path');
 
module.exports = {
  entry: './src/index.js',
  module: {
      rules: [{
              test: /\.(js|jsx)$/,
               exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader',
         }
     ]
  },
  output: {
           path: __dirname + '/public',
           filename: 'dist.js'
  },
  devServer: {
    contentBase: __dirname + '/public',
    historyApiFallback: true
    } 
}

The last thing that we need to do is to create a file called .babelrc which will provide options that are used by webpack loader: babel-loder.

The file should look like this:

{
   "presets": ["env", "react"]
}

And that’s it, the config is done.

Putting everything together

At this point we should have a project structure that looks like this:

Now let’s create our index.js file inside our project root directory which will be the entry point for our webpack configuration and which will contain the React code:

import React from 'react';
import ReactDOM from 'react-dom';
 
const App = () => (
  <h1>This is my Awesome React App</h1>
);
 
ReactDOM.render(<App />, document.getElementById('root'));

Here we are importing React and ReactDOM, then we are rendering our app component into the main html node which is: <div id="root "></div>.

Next thing will be creating a file index.html inside a new folder called public:

$ mkdir public
$ cd public
$ touch index.html

<html>
  <head>
    <title> Awesome React App </title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="./dist.js"></script>
  </body>
</html>

let’s check that our app works as expected.

before that, let’s add an npm script which will launch the development server by typing npm run start in the console.

in package.json inside script object we will add the following script:

"scripts": {
  "start": "./node_modules/.bin/webpack-dev-server
  }

And now we are set to go.

$ npm run start

Visit http://localhost:8080 and you will see that our app is working perfectly.

Conclusion

In this tutorial, we learned two different ways of setting up a React project:

First way which consists of using a tool called create-react-app which sets everything in place and lets you focus on the code.
Second way which uses babel and webpack and requires some configuration to be done.