Scaffolding a React Page

Automating New React Page Creation

Initially, I documented the creation process on how to get started on React on the following sections.

Well, skip those and use this instead if you’re creating a new React application:

npm install -g create-react-app

However, I’d still do the manual setup if you want specific parts of your current website to use React.

 

Initial Setup

FYI: The following information is tested on React 15.

The following components are used to scaffold a new React page:

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

Complete the next steps

• From project root: vim webpack.config.js
• Use the following code snippet to scaffold the initial contents of webpack.config.js

var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
};

Build Process

Update your scripts area of package.json to automate some of your build process.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},

 

Source: React Hello World, React Tutorial #2