ReactJS : Building a simple reactJS app

Jay S
Jay S
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-app module use [babel](https://babeljs.io/) and [webpack](https://webpack.js.org/) to transpile and bundle the files respectively.
  • Type $ npm run eject and view the hello-world/package.json file 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.

Jay S

Written by

Jay S

Software Engineer, Architect, Daydreamer…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade