React App Basics

react_app_basics.md

React App Basics

create a folder wherever you prefer mdkdir react_app_directory_name

npm init -y

npm i -S (--save) react react-dom

npm i -D (--save-dev) babel-core babel-loader babel-preset-es2015 babel-preset-react DID NOT INCLUDE (react-hot-loader) webpack webpack-dev-server

npm i -g (global) webpack webpack dev-server

touch webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ['babel?presets[]=react,presets[]=es2015'] //DID NOT INCLUDE react-hot
        }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

touch index.html