”;
As we learned earlier, React library can be used in both simple and complex application. Simple application normally includes the React library in its script section. In complex application, developers have to split the code into multiple files and organize the code into a 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 see how to create simple as well as complex React application −
Using Rollup bundler
Rollup is one of the small and fast JavaScript bundlers. Let us learn how to use rollup bundler in this chapter.
Following are the steps to creating an application using Rollup bundler −
Step 1 − Open a terminal and go to your workspace.
cd /go/to/your/workspace
Step 2 − Next, create a folder, expense-manager-rollup and move to newly created folder. Also, open the folder in your favorite editor or IDE.
mkdir expense-manager-rollup cd expense-manager-rollup
Then, create and initialize the project.
npm init -y
Step 3 − To install React libraries (react and react-dom), follow the command below.
npm install react@^17.0.0 react-dom@^17.0.0 --save
Then install babel and its preset libraries as development dependency using the following commands.
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 [email protected] @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-livereload rollup-plugin-postcss rollup-plugin-serve [email protected] postcss-modules@4 rollup-plugin-postcss
Next, install corejs and regenerator runtime for async programming.
npm i regenerator-runtime core-js
Step 4 − Later, create a babel configuration 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"
]
}
rollup.config.js:
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
]
}
package.json
Next, update the package.json and include our entry point (public/index.js and 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"
},
...
Step 5 − Next, create a src folder in the root directory of the application, which will 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
Now, let us create a new component, HelloWorld to confirm our setup is working fine.
HelloWorld.js
Create a file, HelloWorld.js under components 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;
index.js
Next, create our main file, index.js under src folder and 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.
index.html
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>
Lastly, build and run the application.
npm start
The npm build command will execute the rollup and bundle our application into a single file, dist/index.js file and start serving the application. The dev command will recompile the code whenever the source code is changed and also reload the changes in the browser.
> [email protected] build /path/to/your/workspace/expense-manager-rollup > rollup -c rollup v2.36.1 bundles src/index.js → distindex.js... LiveReload enabled http://localhost:10001 -> /path/to/your/workspace/expense-manager-rollup/dist created distindex.js in 4.7s waiting for changes...
Open the browser and enter http://localhost:3000 in the address bar and press enter. serve application will serve our webpage as shown below.
Using Parcel bundler
Parcel is fast bundler with zero configuration. It expects just the entry point of the application and it will resolve the dependency itself and bundle the application. Let us learn how to use parcel bundler in this chapter.
Step 1 − First, install the parcel bundler.
npm install -g parcel-bundler
Then, open a terminal and go to your workspace.
cd /go/to/your/workspace
Step 2 − Next, 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
Create and initialize the project using the following command.
npm init -y
Step 3 − Install React libraries (react and react-dom).
npm install react@^17.0.0 react-dom@^17.0.0 --save
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
Then, you create a babel configuration file, .babelrc under the root folder to configure the babel compiler.
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
Step 4 − Update the package.json and include our entry point (src/index.js) and commands 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"
},
...
Step 5 − Create a src folder in the root directory of the application, which will 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 components folder and write a simple component to emit Hello World message.
HelloWorld.js
import React from "react";
class HelloWorld extends React.Component {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
export default HelloWorld;
index.js
Now, create our main file, index.js under src folder and 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'')
);
Next, create a public folder in the root directory.
index.html
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>
Lastly, build and run the application.
npm start
The npm build command will execute the parcel command. It will bundle and serve the application on the fly. It recompiles whenever the source code is changed and also reload the changes in the browser.
> [email protected] dev /go/to/your/workspace/expense-manager-parcel > parcel index.html Server running at http://localhost:1234 √ Built in 10.41s.
Open the browser and enter http://localhost:1234 in the address bar and press enter.
To create the production bundle of the application to deploy it in production server, use build command. It will generate a index.js file with all the bundled source code under dist folder.
npm run build > [email protected] build /go/to/your/workspace/expense-manager-parcel > parcel build index.html --out-dir dist &sqrt; Built in 6.42s. distsrc.80621d09.js.map 270.23 KB 79ms distsrc.80621d09.js 131.49 KB 4.67s distindex.html 221 B 1.63s
”;