ReactJS | Creating a React Application

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about the various ways of creating a React Application.

As we have learnt from our previous lesson, the React library can be used in both simple and complex application. Simple application generally includes React library in its script section. In complex application, developers have to split the code into multiple files and organize the code into standard structure.

Here, React toolchain provides pre-defined structure to bootstrap the application. Also, developers are free to use their own project structure to organize the code.

Let us now look at how to create simple and complex React application -

• Simple application using CDN.

• Complex application using React Create App cli.

• Complex application using customized methods.

READ: ReactJS | Architecture

Using Rollup bundler

Rollup is one of the small and fast bundlers of JavaScript. Let us learn how to use rollup bundlers in this section.

Open a terminal and go to your workspace.

cd /go/to/your/workspace

Create a folder, expense-manager-rollup and move to newly created folder. Also, open up the folder in your favorite editor or IDE.

mkdir expense-manager-rollup 
cd expense-manager-rollup

Next, create and initialize the project.

npm init -y

Next, install React libraries (react and react-dom).

npm install react@^17.0.0 react-dom@^17.0.0 --save

Next, install babel and its preset libraries as development dependency.

npm install @babel/preset-env @babel/preset-react 
@babel/core @babel/plugin-proposal-class-properties -D

Next, install rollup and its plugin libraries as development dependency.

npm i -D rollup postcss@8.1 @rollup/plugin-babel 
@rollup/plugin-commonjs @rollup/plugin-node-resolve 
@rollup/plugin-replace rollup-plugin-livereload 
rollup-plugin-postcss rollup-plugin-serve postcss@8.1 
postcss-modules@4 rollup-plugin-postcss

Next, install corejs and regenerator runtime for asynchronous programming.

npm i regenerator-runtime core-js

Next, you have to create a babel config file, .babelrc under the root folder to configure the babel compiler.

{
   "presets": [
      [
         "@babel/preset-env",
         {
            "useBuiltIns": "usage",
            "corejs": 3,
            "targets": "> 0.25%, not dead"
         }
      ],
      "@babel/preset-react"
   ],
   "plugins": [
      "@babel/plugin-proposal-class-properties"
   ]
}

Next, create a rollup.config.js file in the root folder to configure the rollup bundler.

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss'

export default {
   input: 'src/index.js',
   output: {
      file: 'public/index.js',
      format: 'iife',
   },
   plugins: [
      commonjs({
         include: [
            'node_modules/**',
         ],
         exclude: [
            'node_modules/process-es6/**',
         ],
      }),
      resolve(),
      babel({
         exclude: 'node_modules/**'
      }),
      replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      postcss({
         autoModules: true
      }),
      livereload('public'),
      serve({
         contentBase: 'public',
         port: 3000,
         open: true,
      }), // index.html should be in root of project
   ]
}

Update the package.json and add our entry point (public/index.js, public/styles.css) and command to build and run the application.

...
"main": "public/index.js",
"style": "public/styles.css",
"files": [
   "public"
],
"scripts": {
   "start": "rollup -c -w",
   "build": "rollup"
},
...

Next, create a src folder in the root directory of the application, which is going to hold all the source code of the application.

Next, create a folder, components under src to include our React components. The idea is to create two files, component.js to write the component logic and component.css to include the component specific styles.

The final structure of the application will be as follows -

|-- package-lock.json
|-- package.json
|-- rollup.config.js
|-- .babelrc
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

Let us create a new component, HelloWorld to confirm our setup is working fine. Create a file, HelloWorld.js under component folder and write simple component to display the Hello World message.

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

Next, create our main file, index.js under src folder and we have to call our newly created component.

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
   <React.StrictMode>
      <HelloWorld />
   </React.StrictMode>,
   document.getElementById('root')
);

Create a public folder in the root directory.

Next, create a HTML file, index.html (under public folder*), which will be our entry point of the application.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense Manager :: Rollup version</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="./index.js"></script>
   </body>
</html>

Next, build and run the application.

npm start

The npm build command will implement the rollup and then bundle our application into a single file, dist/index.js file and start serving the application. The dev command is going to recompile the code whenever the source code is changed and reloads the changes in the browser.

> expense-manager-rollup@1.0.0 build /path/to/your/workspace/expense-manager-rollup 
> rollup -c 
rollup v2.36.1 
bundles src/index.js → dist\index.js... 
LiveReload enabled 
http://localhost:10001 -> /path/to/your/workspace/expense-manager-rollup/dist 
created dist\index.js in 4.7s 

waiting for changes...

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter. Serve application will serve our webpage as shown below -

READ: ReactJS | Installation

Using Parcel bundler

Parcel bundler is a fast bundler with a zero configuration. It expects just the entry point of the app and will resolve the dependency itself and bundle the application.

Let's learn how to use parcel bundler in this section. First, install the parcel bundler.

npm install -g parcel-bundler

Open a terminal and go to your workspace.

cd /go/to/your/workspace

Next, you have to create a folder, expense-manager-parcel and move to newly created folder. Also, open the folder in your favorite editor or IDE.

mkdir expense-manager-parcel 
cd expense-manager-parcel

Next, create and initialize the project.

npm init -y

Next, install React libraries (react and react-dom).

npm install react@^17.0.0 react-dom@^17.0.0 --save

Next, install babel and its preset libraries as development dependency.

npm install @babel/preset-env @babel/preset-react @babel/core @babel/plugin-proposal-class-properties -D

Next, you have to create a babel config file, .babelrc under the root folder to configure the babel compiler.

{
   "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
   ],
   "plugins": [
      "@babel/plugin-proposal-class-properties"
   ]
}

Next, update the package.json and include our entry point (src/index.js) and command to build and run the application.

... 
"main": "src/index.js", 
"scripts": {
   "start": "parcel public/index.html",
   "build": "parcel build public/index.html --out-dir dist" 
},
...

Next, create a src folder in the root directory of the application, which is going to hold all the source code of the application.

Next, create a folder, components under src to include our React components. The idea is to create two files, component.js to write the component logic and component.css to include the component specific styles.

The final structure of the application will be as follows -

|-- package-lock.json
|-- package.json
|-- .babelrc
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

Let us create a new component, HelloWorld to confirm our setup is working fine. Create a file, HelloWorld.js under component folder and write a simple component to emit Hello World message.

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

Next, create our main file, index.js under the src folder and then call our recently created component.

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
   <React.StrictMode>
      <HelloWorld />
   </React.StrictMode>,
   document.getElementById('root')
);

Next, you now have to create a public folder in the root directory.

Next, create a HTML file, index.html (in the public folder), which will be our entry point of the application.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense Manager :: Parcel version</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="../src/index.js"></script>
   </body>
</html>

Next, build and run the application.

npm start

npm build command will execute the parcel command. It bundles and serves the app. It recompile whenever the application source code is changed and reloads the changes in the browser.

> expense-manager-parcel@1.0.0 dev /go/to/your/workspace/expense-manager-parcel 
> parcel index.html Server running at http://localhost:1234 
√ Built in 10.41s.

Next, open the web browser and then enter http://localhost:1234 in the address bar and press enter.

In order to create the production bundle of the application to deploy in the production server, make use of build command. It will generate an index.js file with all the bundle source code under dist folder.

npm run build
> expense-manager-parcel@1.0.0 build /go/to/your/workspace/expense-manager-parcel
> parcel build index.html --out-dir dist

√  Built in 6.42s.

dist\src.80621d09.js.map    270.23 KB     79ms
dist\src.80621d09.js        131.49 KB    4.67s
dist\index.html

READ: ReactJS | Introduction

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial post, we are going to be discussing about how to create a React application via CDN.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.