Prerequisites:

Install yarn Install Node v 9.2.0 on ubuntu or mac or windows.

Set Up:

Create project directory:

mkdir projectName && cd projectName

2. Initialize project with yarn:

yarn init

you will be prompt with questions, you can press Enter for default value or input your answer for each questions until the end. After this, it will generate a file package.json on your root directory.

3. To use es6 features. Install babel (as devDependencies):

yarn add babel-cli babel-loader babel-preset-env babel-preset-react -D

4. Create and configure .babelrc file:

touch .babelrc

with the dot (.) before the word babelrc

configure our .babelrc put the following codes inside it.

// inside .babelrc

{

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

}

5. Install React:

yarn add react react-dom

6. Install Webpack:

For development server & bundling for production. We install webpack and its devServer (as devDependencies):

yarn add webpack webpack-dev-server webpack-cli -D

7. Add the following structure to your project directory:

- build/ - index.html - src/ - index.js - webpack.config.js

8. Set up webpack:

// inside webpack.config.js const path = require('path')

const webpack = require('webpack') module.exports = {

entry: './src/index.js',

output: {

path: path.resolve(__dirname, 'build'),

filename: 'index.bundle.js'

},

mode: 'development',

devtool: 'inline-source-map',

devServer: {

contentBase: './build',

port: 3000

},

module: {

rules: [

{test: /\.js$/, exclude: /node_modules/, use: 'babel-loader'}

]

}

}

Entry point: will be index.js in /src/ directory. Output: is a generated file named index.bundle.js and will be generated in /build/ directory.

9. Set up entry point’s index.html:

<!-- inside /build/index.html --> <!DOCTYPE html>

<html lang="en"> <head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">

<title>Your Project Name</title>

</head>



<body>

<div id='root'></div>

</body>

<script src="./index.bundle.js"></script> </html>

10. Set up entry point (index.js):

// inside src/index.js

import React from 'react'

import {render} from 'react-dom'



const App = () => {

return <div>

<h1>React App Running!</h1>

</div>

}



render(

<App/>,

document.getElementById('root')

)

11. Add scripts:

We will add scripts for tasks such as starting the dev server & building files for production.

When we run yarn init earlier, it generated a file called package.json. We will add the scripts inside that package.json:

We can add the scripts position after the license part, or anywhere your heart desires

"license": "MIT",

"scripts": {

"start": "webpack-dev-server --open",

"build": "npm run clean && npm run compile",

"clean": "rm -rf ./build/index.bundle.js",

"compile": "NODE_ENV=production webpack --config ./webpack.config.js --progress"

},

start: will start webpack devserver and automatically open up localhost:3000 on your browser. clean: will delete the generated index.bundle.js in /build/ directory compile: webpack will compile and generate index.bundle.js in /build/ directory build: will run the script clean then compile

Set up Complete & Done! Next is Development & Production.

Development

We use webpack for our development server. To start dev server run:

yarn start

start is one of the scripts that we added in package.json earlier. If you remembered

This will automatically open up your browser and navigate to localhost:3000 . You should see your react page running.

This dev server also supports hot reloading, so when we changed something in the source code, our dev server will automatically reload the page for us.

Production

We use webpack to bundle all our javascript files into one file.

To run webpack bundle:

yarn build

build is one of the scripts that we added in package.json earlier.

This will create a file called index.bundle.js saved at /build/ directory where the index.html is also located.

So if we go inside the /build directory, we should see a structure like this.

- build



- index.html

- index.bundle.js

These 2 files are the production files. index.bundle.js contains everything. We now only need to open index.html in a browser and everything should work.

We can deploy this on a free hosting site such as co.nf. Create a free co.nf subdomain and upload these 2 files. Navigate to its url then you have a react web app deployed!

That’s it! Happy building & hacking. Thanks! \m/

Please click 👏 button below a few times to show your support! ⬇⬇ Thanks!