Scribd
Upload
39 views

React Webpack Developement Environment

The document discusses setting up a React development environment including: 1. Installing Node.js, React dependencies like Babel and Webpack 2. Configuring Babel to transform JSX code and Webpack for bundling modules 3. Creating a project structure with src and dist folders and basic HTML file 4. Writing a sample JSX file and setting up scripts to build and test the app

Uploaded by

miromarko
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

React Webpack Developement Environment

The document discusses setting up a React development environment including: 1. Installing Node.js, React dependencies like Babel and Webpack 2. Configuring Babel to transform JSX code and Webpack for bundling modules 3. Creating a project structure with src and dist folders and basic HTML file 4. Writing a sample JSX file and setting up scripts to build and test the app

Uploaded by

miromarko
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/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
Setting UP React Development Environment

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


Setting UP React Development Environment

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


Setting UP React Development Environment

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


Setting UP React Development Environment

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


Setting UP React Development Environment

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

You might also like