Skip to content

Latest commit

 

History

History
164 lines (125 loc) · 3.19 KB

README.md

File metadata and controls

164 lines (125 loc) · 3.19 KB

Lesson

Where to start?

We'll start with coding right away and come back later to understand setup.

Setup the React Project:

 npm init
 npm install --save react react-dom

Create the following directory structure


| - index.html
| - webpack.config.js
| - /src
| ------ || index.js
| - /dist
| - .babelrc

Why do we need a bundler?

You can use a bundling tool like webpack,browserify,rollup. They help you write modular code, bundle different files to small packages and can help reduce the loading time drastically.

Add the following contents to src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Add the following to index.html

<html>
<head>
	<title></title>
</head>
<body>
	<div id="root">
		<!-- This is where your React App will get rendered. -->
	</div>
	<script src="dist/app.js"></script><!-- Refers to the js file generated by webpack -->
</body>
</html>

Configuring Webpack

Installing webpack and loaders

npm install --save-dev babel-core babel-loader webpack

For ECMAScript 2015 and React Presets:

npm install babel-preset-es2015 babel-preset-react --save-dev

For more options, visit Webpack Configuration Object

Add the following to webpack.config.js :

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

const BUILD_DIR = path.resolve(__dirname, 'dist');
const APP_DIR = path.resolve(__dirname, 'src');

const config = {
    entry: {
        app: `${APP_DIR}/index.js`,//specifies the entry file for webpack
    },
    output: {
        path: BUILD_DIR,
        filename: '[name].js',
        publicPath: '/dist',
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.js?/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
        ],
    },
    resolve: {
        extensions: ['.json', '.js', '.jsx', '.png', '.jpg'],
        modules: [
            'node_modules', 'src',
        ]
    },
};

module.exports = config;

Babelrc Usage

Add the following to .babelrc:

{
    "presets": [
        "es2015",
        "react"
    ]
}

And finally modify the package.json file:

{
  "name": "lesson_1",
  "version": "1.0.0",
  "description": "## Where to start?",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // Add this
  },
  ..........
}

Now run the following command:

npm run build

If you have followed the steps, your output should look similar to the below screenshot:

alt text

Here are a few resources: