ReactJS : Building a simple reactJS app
Sep 5, 2018 · 3 min read
There are multiple ways to create a simple reactJS app. Two of the most interesting choices among the multiple others are
⚠️ Assumption: You are aware of the steps to install node & npm.
Using a NPM module create-react-app
- a CLI which provides two steps to scaffold a reactJS app
#Install the npm module globally
Step 1: npm install -g create-react-app#Use the CLI tool to create your hello-world project
Step 2: create-react-app hello-world
- The above steps will create the required folder structure and the configuration files to run the reactJS app. To run the app
Step 1: $ cd hello-worldStep 2: npm run start
- Open a browser and type
http://localhost:3000/in the address bar. You will see the new hello-world app loaded in the browser. - Under the hood, the
create-react-appmodule use [babel](https://babeljs.io/) and [webpack](https://webpack.js.org/) to transpile and bundle the files respectively. - Type
$ npm run ejectand view thehello-world/package.jsonfile to view all the modules used in the background by create-react-app module.
Using toolchain Babel and Webpack
- Expected directory structure
project-root-folder
|
- src
| |
| - index.js
| - App.js
- .babelrc
- webpack.config.js
- package.json- Contents of index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />, document.getElementById('root'));
- Contents of App.js
import React, { Component } from 'react';class App extends Component {render() {
return (
<div>
<header>
<h1>Welcome to React</h1>
</header>
<p>
My first react app...
</p>
</div>
);
}}
export default App;
- NPM install
$npm install --save-dev babel-cli@ 6.26.0 babel-core@6.26.3 babel-loader@7.1.4 babel-preset-env@1.7.0 babel-preset-react@6.24.1$npm install --save-dev webpack@4.12.0 webpack-cli@3.0.8 webpack-dev-server@3.1.4
- Contents of package.json
{
"name": "react-sample-using-toolchain",
"version": "1.0.0",
"description": "react sample using toolchains babel and webpack",
"main": "index.js",
"scripts": {
"build":"webpack-dev-server --mode development"
}, "author": "Jay",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"style-loader": "^0.21.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}, "dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1"
}
}
- Babel Configuration
{
"presets": ["env", "react"]
}- Webpack Configuration
const path = require("path");const webpack = require("webpack");module.exports = { entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['env'] }
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
}, resolve: { extensions: ['*', '.js', '.jsx'] }, output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
}, devServer: {
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "http://localhost:3000/dist/",
hotOnly: true
}, plugins: [ new webpack.HotModuleReplacementPlugin() ]};
- Navigate to the project-root-folder and type
npm run build - Open a browser and type
http://localhost:3000/in the address bar. You will see the new react app loaded in the browser. - In the above config file
Loaders are applied on each file based on the file type set in the webpack configuration
Plugins are applied on the bundled file
- Development
The dev-server configurations in the above webpack config file are used when you run the application in your local instance.
*hotOnly* attribute is used to refresh the browser when the monitored files are updated by the user.