Building a React.js App from Scratch in 10 steps

As usual, building an app from scratch tends to be scary and frustrating, this is a simple and quick tutorial to get the ball rolling with your React app.

1. Install Global Packages (babel & babel-cli)

Babel is essentially an ECMAScript 6 to ECMAScript 5 compiler. It allows you to use ES6 features in your projects and then compiles ES5 for you to use in production.

npm install -g babel
npm install -g babel-cli

 2. Create Root Folder and initialize it.

mkdir my-react-app
cd my-react-app

Use  npm init to generate the package.json file, It comes bundled with npm.

npm init
// package.json
{
  "name": "my-react-app",
  "version": "1.0.0",
  "description": "basic react setup",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Adrian Prieto",
  "license": "ISC"
}

 3. Add your basic project dependencies

npm install webpack --save
npm install webpack-dev-server --save
npm install react --save
npm install react-dom --save

TIP: npm install <package> will add the modules to your node_modules directory, passing the --save  flag at the end will also add these dependencies to your  package.json file. 

What is webpack?

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporate assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file. – Angular Docs

4. Add Plugins

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

 5. Create App files

touch index.html App.js main.js webpack.config.js

Your project tree should look like this:

├── App.js
├── index.html
├── index.js
├── main.js
├── package.json
└── webpack.config.js

 6. Set up the webpack.config.js file

var config = {
   entry: './main.js', // entry point
   output: {
         filename: 'index.js', // place where bundled app will be served
      },
   devServer: {
         inline: true, // autorefresh
         port: 8080 // development port server
      },
   module: {
         loaders: [
            {
               test: /\.jsx?$/, // search for js files 
               exclude: /node_modules/,
               loader: 'babel-loader',
   query: {
               presets: ['es2015', 'react'] // use es2015 and react
            }
         }
      ]
   }
}

module.exports = config;

 7. Add a start script to your package.json file

{
  "name": "my-react-app",
  "version": "1.0.0",
  "description": "basic react setup",
  "main": "main.js",
  "scripts": {
    // Add this script to allow 'npm start'
    "start": "webpack-dev-server --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Adrian Prieto",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

Now you will be able to type  npm start and your server will start running, the --hot flag will add live reload to changes generated inside the project, this way you won’t have to reload the browser window every time you change your code.

8. Set up your root element in your index.html file

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>React App</title>
   </head>
   <body>
      <!-- Root Element -->
      <div id="app"></div>
      <script src="index.js"></script>
   </body>
</html>

 9. Set up your main.js file

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
 
ReactDOM.render(<App />, document.getElementById('app'));

 10. Set up App.js file

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            Hello World ReactJS!!!
         </div>
      );
   }
}
export default App;

Now just fire up your server by typing  npm start, open your browser and go to the port you selected, you should see “Hello World ReactJS”, If you do, you did it, Congratulations!

Adrian Prieto

“If you are not willing to learn, no one can help you. If you are determined to learn, no one can stop you.” ― Zig Ziglar

Latest posts by Adrian Prieto (see all)

You may also like

1 Comment

  1. if i use generator ‘create-react-app’ i can use npm run build to build the app to production, and how i do this if i start the react from Scratch

Leave a Reply

Your email address will not be published. Required fields are marked *