A short react.js bootstrapper guide.

atd13-react-dead-simple.md

REACT DEV ENV SETUP

Below, a simple boilerplate to bootstrap a React dev env with the latest npm packages that were available on Dec 2017.

The Setup

1. npm init

   • in project root you will get a package.json file

2. install react

   • $ npm i -S react react-dom

3. install Babel transpiler

   • a transpiler tool that transforms JSX into JavaScript
   • $ npm i -D babel-core babel-loader babel-preset-react
   • create in project root a .babelrc file
     • save the following code inside: { presets: ['react'] }

4. install webpack build tool

   • runs babel for transpilation
   • minifying files, moving files, has a plugin system
   • $ npm i -D webpack webpack-dev-server html-webpack-plugin
   • create in project root a webpack.config.js file

5. setup webpack with a basic config:

   var HTMLWebpackPlugin = require("html-webpack-plugin");
   
   var config = {
       entry: __dirname + "/src/index.js",
   
       module: {
           loaders: [
               {
                   test: /\.js$/,
                   exclude: /node_modules/,
                   loader: "babel-loader"
               }
           ]
       },
   
       output: {
           filename: "app-transformed.js",
           path: __dirname + "/dist"
       },
   
       plugins: [
           new HTMLWebpackPlugin({
               template: __dirname + "/src/index.html",
               filename: "index.html",
               inject: "body"
           })
       ]
   };
   
   module.exports = config;

6. add HTMLWebPackPlugin

   • basically creates a new index.html with working <script></script> link/s in the output \dist directory

7. setup basic npm scripts

   • "scripts": { "build": "webpack", "start": "webpack-dev-server" }

8. create create a index.html file with a <div id="root"> in and an index.js in src dir. Add a ReactDOM.render() in index.js and start the app

   • $ npm start that will start a NodeJS server with your React app and hot module replacement i.e. live editing on

questions? -> @vekzdran