React Webpack Developement Environment

Setting UP React Development Environment
Setting UP React Development

Environment
Table of Contents
Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Babel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Webpack. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1. Setting up your Initial Project Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1. Installing and Initializing Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2. Installing the React Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2.1. Adding our JSX File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3. Going from JSX to JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4. Setting up Babel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.5. Building and Testing our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Simplest way to start React project is to run npx create-react-app <app_name>.
Script files for React apps, use libraries from node instead!
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-
 dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script> ①
① Babel - helps our browser to translate bizarre things like JSX
Node.js
Node.js allows you to use JavaScript to create applications that run on the server and have access to
APIs and system resources that your browser could’t have. It’s basically a full-fledged application
development runtime for apps build entirely in JavaScript.
Babel
Babel is a JavaScript translater for marking JSX and JS compatibility with older browsers. We’ll use its
in-browser version to transform our JSX into JavaScript all time in dev environment. It can be
integrated as part of our build process to generate an actual browser-readable JS file from our JSX.
Webpack
It is known as a module builder. A lot of the frameworks and libraries in your app includes a lot of
dependencies where different parts of the functionality you rely on might only be a subset of larger
componets. You probably don’t want all of that unnecessary code, so webpack enable you to only
include the relevant code needed to have your app to work into a single JavaScript file. This also
extends to CSS (LESS/SASS) files and other types of assets your app uses.
Node.js | 1
1. Setting up your Initial Project Structure

• Create new folder for the project MyAwesomeApp
• inside this folder create two more foders src and dist, inside our src folder, we’ll place all our our
unoptimized and unconverted code and inside dist folder our tools will build and convert app
files. inside the root folder *MyAwesomeApp place an main html file index.html:
index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9 <body>
10 <div id="app"></div>
11 <script src="dist/bundle.js" async defer></script>
12 </body>
13 </html>
1.1. Installing and Initializing Node.js

• Visit the Node.js site https://nodejs.org/ and install the appropriate version for your OS and test
the installation with node -V command
• Initialize Node.js on our MyAwesomeApp folder with npm init, the end result is a new file called
package.json
1.2. Installing the React Dependencies

npm install react react-dom react-scripts create-react-class --save the React and React-DOM
libraries and dependencies will be downloaded from Node.js package repository, you’ll have a new
folder node_modules
1.2.1. Adding our JSX File

Inside src folder create in index.jsx file:
2 | 1. Setting up your Initial Project Structure

index.jsx
1 import React from "react";

2 import { createRoot } from 'react-dom/client';
3 import createReactClass from "create-react-class";
4
5 const HelloWorld = createReactClass({
6 render: function () {
7 return (
8 <p>Hello, {this.props.greetTarget}!</p>
9 );
10 }
11 });
12
13 const container = document.getElementById('app');
14 const root = createRoot(container); // createRoot(container!) if you use TypeScript
15 root.render( <div>
16 <HelloWorld greetTarget="Batman"/>
17 <HelloWorld greetTarget="Iron Man"/>
18 <HelloWorld greetTarget="Nicolas Cage"/>
19 <HelloWorld greetTarget="Mega Man"/>
20 <HelloWorld greetTarget="Bono"/>
21 <HelloWorld greetTarget="Catwoman"/>
22 </div>);
1.3. Going from JSX to JavaScript

The missing step is turning our JSX to JavaScript that our browser can understand, this involves
webpack and Babel. * Setting up webpack (module builder - tool to compile/ bundle JavaScript
modules):
npm install webpack webpack-cli --save
We need to add a configuration file to specify how webpack will work, add webpack.config.js inside
root folder
We’ll define two variables DEV and OUTPUT that refers same folders in our project. Inside config object,
we have two properties called entry and output that use our DEV and OUTPUT variables to help map our
index.jsx file to became bundle.js
1.3. Going from JSX to JavaScript | 3

webpack.config.js
1 const path = require("path");

2
3 const DEV = path.resolve(__dirname, "src");
4 const OUTPUT = path.resolve(__dirname, "dist");
5
6 const config = {
7 entry: DEV + "/index.jsx",
8 output: {
9 path: OUTPUT,
10 filename: "bundle.js"
11 },
12 mode: "development"
13 };
14
15 module.exports = config;
1.4. Setting up Babel

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save
This command will install babel-loader, babel-preset-es2015, and babel-preset-react packages.
Let’s configure Babel in two step process:
Step 1: Let’s create .babelrc and the babel.config.js files in the root folder
babelrc
1 {
2 "presets": [
3 "@babel/preset-env",
4 "@babel/preset-react"
5 ]
6 }
babel.config.js
1 module.exports = {
2 "presets": ["@babel/preset-env", "@babel/preset-react"]
3
4 };
Step 2: The second step is to tell weback about Babel in webpack.config.js
4 | 1.4. Setting up Babel

webpack.config.js
1 const path = require("path");

2
3 const DEV = path.resolve(__dirname, "src");
4 const OUTPUT = path.resolve(__dirname, "dist");
5
6 const config = {
7 entry: DEV + "/index.jsx",
8 output: {
9 path: OUTPUT,
10 filename: "bundle.js"
11 },
12 mode: "development",
13 module: { ①
14 rules: [
15 {
16 test: /\.jsx?$/,
17 exclude: /node_modules/,
18 use: {
19 loader: 'babel-loader'
20 }
21 }
22 ]
23 },
24 resolve: {
25 extensions: [".js", ".jsx"]
26 }
27 };
28
29 module.exports = config;
① We added the module and loaders objects that tell webpack to pass the index.jsx file defined in
our entry property to turn into JavaScript through Babel.
1.5. Building and Testing our App

In the package.json we add some lines in the script section the final file looks like this:
1.5. Building and Testing our App | 5

package.json
1 {
2 "dependencies": {
3 "@babel/core": "^7.19.1",
4 "@babel/preset-env": "^7.19.1",
5 "@babel/preset-react": "^7.18.6",
6 "babel-loader": "^8.2.5",
7 "react": "^18.2.0",
8 "react-dom": "^18.2.0",
9 "react-scripts": "^5.0.1",
10 "webpack": "^5.74.0",
11 "webpack-cli": "^4.10.0",
12 "webpack-dev-server": "^4.11.1"
13 },
14 "name": "myawesomeapp",
15 "version": "1.0.0",
16 "main": "index.html",
17 "scripts": {
18 "dev": "webpack serve",
19 "build": "webpack",
20 "clean": "rm -rf node_modules",
21 "reinstall": "npm run clean && npm install",
22 "rebuild": "npm run clean && npm install && npm run build",
23 "test": "echo \"Error: no test specified\" && exit 1"
24 },
25 "author": "",
26 "license": "ISC",
27 "description": "",
28 "devDependencies": {
29 "create-react-class": "^15.7.0"
30 }
31 }
Finally we can run: npx webpack --config .\webpack.config.js or npm run build
This command runs webpack and does all the things we’ve specified in our webpack.config.js and
package.json config files.
6 | 1.5. Building and Testing our App

React Webpack Developement Environment

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

React Webpack Developement Environment

Uploaded by

Copyright:

Available Formats

Setting UP React Development Environment

Setting UP React Development

Simplest way to start React project is to run npx create-react-app <app_name>.

① Babel - helps our browser to translate bizarre things like JSX

1. Setting up your Initial Project Structure

1.1. Installing and Initializing Node.js

1.2. Installing the React Dependencies

1.2.1. Adding our JSX File

2 | 1. Setting up your Initial Project Structure

1 import React from "react";

1.3. Going from JSX to JavaScript

1.3. Going from JSX to JavaScript | 3

1 const path = require("path");

1.4. Setting up Babel

Step 2: The second step is to tell weback about Babel in webpack.config.js

4 | 1.4. Setting up Babel

1 const path = require("path");

1.5. Building and Testing our App

1.5. Building and Testing our App | 5

6 | 1.5. Building and Testing our App

You might also like