How to create a ReactJS app from scratch
How to create a ReactJS app from scratch
This article will talk about creating a ReactJS web app from scratch, without using the npx command, npx create-react-app-sample app. Let’s get into the process step by step with an understanding of each code line.
Requirements
An IDE
You’ll need a text editor ar first since this is where you’ll write the actual coding. You can use the built-in text editor on your desktop, although this is not advised. There are a lot of different code editors available. Visual Studio Code is the preferred choice because it is lightweight, open-source, and has a large community. It also has a decent user interface, includes built-in GitHub, and comes with its terminal.
Node
You’ll need to download or update Node.js on your computer. The Node.js runtime library is based on the V8 JavaScript engine of Chrome. JavaScript can run outside of a traditional web browser if you have Node.js built on your server. Take the following route to download Node.js.
Node.js : https://nodejs.org/en/
When you install Node.js, you’ll also get npm. According to the official website of node, npm is a collection of open-source packages and a command-line tool for communicating with the repository. Installing open-sourced packages, managing project versions, and handling dependencies are all possible with Npm.
Let’s get started with the project as we have a javascript editor, Node.js, and npm built on our desktop.
Step 01: Create project directory
As step 01, create a new directory using a terminal window and navigate it using the following code lines.
mkdir myapp
cd myapp
mkdir, which stands for make directory, is a command that allows you to build a new guide, whereas cd stands for change directory adjust the same working directory. Here I created a new directory named “react-app” and then moved our existing working directory to the react-app guide using the commands above.
Step 02: Create a Package.json
Run the given command in the root of your react-app folder to make a package.json file.
npm init -y
Package.json is a JSON file that contains key-value pair objects. We can add packages or dependencies for our project inside the package.json file. You will observe the following in the package.json file.
It contains the metadata for the current project name, edition, description, keywords, creator, license, and other information.
Step 03: Installing Babel
Babel contains the first set of packages and dependencies that we must install. Babel is a compiler of JavaScript. It parses, transforms, and prints JavaScript code of one set to another. Babel accomplishes this by employing plugins, each of which parses or converts a single instruction. A preset is a collection of plugins that saves you time by not installing each one individually.
At the time of this post, we are using Babel 7, the most recent edition of babel.
What is the purpose of a compiler? A variety of browsers supports JavaScript. Browsers do not necessarily use the same recent JavaScript version, and various browsers may use different JavaScript versions.
As a result, we must compile our code into a JavaScript version that browsers can understand. Working with React also necessitates the use of a unique syntax known as JSX. Since browsers can’t read JSX right away, we need the aid of babel to convert the JSX syntax into JavaScript so that browsers can understand.
For this project, let’s install the following 3 babel dependencies.
@babel/core — Contains babel-core configurations.
@babel/preset-env — Contains plugins ( can use to transform ES2015-ES2020 codes to ES5 compatibles).
@babel/preset-react — Contains plugins to enable parsing and transformation of React syntaxes.
To install all these 3, use :
npm install — save-dev @babel/core
npm install — save-dev @babel/core @babel/preset-env
npm install — save-dev @babel/core @babel/preset-react
The — save-dev flag is used to limit the usage of the babel packages to the programming environment. Following the steps above, a new key named devDepencies will appear in the package.json file, with an entity containing the details of packages and the version numbers configured as dependencies in the development environment.
A file named package-lock.json and a folder named node modules will be installed at the root of the folder after installing a package. When the project directory is repeated using npm install, package-lock.json is used to specify the precise version of dependencies installed. Besides that, the node modules folder contains all of the installed packages, and do not get confused if it’s pretty big.
Step 04: Installing Webpack
Webpack provides the next set of dependencies that we got to install. For JavaScript applications, Webpack is a static plugin bundler. It creates several bundles by mapping any module the project requires in a dependency graph. The purpose of Webpack is when loading various Javascript code into HTML in the past, we had to add <Script> tags for each of the JS code in the proper order.
The required () feature was introduced with Node.js, letting people modularize Javascript code. Using Webpack’s ‘loaders,’ we can combine all of these JavaScript modules and non-JavaScript resources like CSS, videos, and others.
npm install — save-dev webpack webpack-cli webpack-dev-server
Webpack 5 is the most recent edition released at the time of publishing. Webpack, the webpack-CLI, plus the webpack-dev-server are the three modules that must be installed. Webpack is the main functionality package for the webpack framework. The webpack-CLI module must also be configured to use webpack.
Finally, the webpack-dev-server creates a development server with live reloading, and it can be found only in a development environment.
Step 05: Installing React
It is the essential package that you want here. However, unlike the previous two sets of packages, react can be configured with the — save flag or with no flags rather than the — dev-save flag. This allows reacting to be get used either in production or development environments.
Type the below command line from the root of the react-app registry to install react.
npm install react react-dom
React requires the installation of two key packages named react and react-dom. The ability to communicate with react modules is included in the react package. The react-dom package is required to connect with the Dom and render to it.
Configurations
Now, configure your application so that you can code with react now as we installed the required dependencies. We’ll need to make two directories, one for public and one for src. Make a file called app.js in the src folder. Write the below commands into the terminal from the root directory.
mkdir src
touch src/app.js
Without using touch, you can use the ni /new item command on a Windows system. Our prepared files are stored in the public directory. We’ll be primarily do coding in the src directory. The very first file inside the src folder, app.js, is the react application’s entry point.
The next step is to instruct webpack to pack files starting with the entry point, the app.js file. Create a webpack.config.js file as follows.
touch webpack.config.js
The folder structure is now as below.
Type the following code lines inside your webpack.config.js file.
From the node modules folder Fxecute the webpack command to see how anything we’ve set up so far is working. In the terminal, enter the following command at the project’s root.
Node_modules\.bin\webpack
As defined in the webpack.config.js, you will see a newly generated file inside the public directory named bundle.js after the command execution. Since we haven’t added any javascript to app.js yet, bundle.js will still be null.
Since we’ll be using JSX as well as the new JavaScript features, we’ll use babel to translate our code for cross-browser compatibility. We’ll use the babel-loader package to convert our javascript. With babel & webpack, we can transpile our JS file with babel-loader.
With babel & webpack, we can transpile our JavaScript code with babel-loader.
Execute the below command line in the terminal to install the babel-loader.
npm install — save-dev babel-loader
Add the babel-loader to the webpack.config.js as below.
In the webpack.config.js file, add a new key named module to the module.exports property. Webpack uses this plugin to decide which loader we should use. Webpack uses loaders to translate files into valid modules that can be processed by the app & add to the dependency graph. Apart from those in the node modules folder, we advise webpack to use the babel-loader to convert files ending of .js.
After setting up babel-loader in webpack.config.js, we’ll need to build a babel.config.json file at the root of the folder to configure babel. This babel configuration file was previously known as .babelrc in previous versions of babel. Moreover, use the babel.config.json as advised by the newest babel doc.
touch babel.config.json
In your babel.config.json file, add the below code lines.
babel-loader tries to find the babel.config.json, the babel configuration file. The keys and values in the file tell babel-loader to select the presets @babel/preset-env and @babel/preset-react, that we have installed. Use webpack-dev-server to know react-app site in browser’s development mode. Webpack-dev-server configurations can also be in webpack.config.js. Put the below code lines to the module.exports in webpack.config.js.
The devServer key explains the webpack-dev-server configurations that can be created. webpack-dev-server process files from the public directory in this section. Finally, we must have the following scripts in the package.json for initialization.
Add these 3 scripts to run via npm to make the process easy: build, start, and watch. According to the webpack.config.js, the build command instructs webpack to begin building the dependency graph using the source file and create the bundle inside the targeted folder. Use the watch command rather than continuously telling webpack to execute the entire build manually. This command tells webpack to listen for any updates in our project and recompile to a new package right away.
The start command tells webpack to start a basic development server to view the project in action in a browser. Know that the command to start a development server in older iterations versions of webpack was webpack-dev-server — watch. Any changes in the project that are saved would cause the server to restart with those new changes.
npm run build / start / watch
Main Codes inside the index.html
The project requires an HTML file into which our react app could render. Inside the public directory, make a basic HTML file. To make an HTML file, run the below code in the terminal from the root of our project folder.
touch public/index.html
Then, add the below HTML lines inside the public/index.html.
Meta tags, which describe the HTML metadata are placed inside the head. The area between body tag used to view content.
There are 2 HTML tags within the body tag. A HTML div tag with the #id “root” as well as a script tag that refers to our webpack-generated bundle.js file. The react-app renders to the “root” div. Besides this, our react-app from src/app.js is packed into the bundle.js file. This HTML file uses the JavaScript code from package.js to keep bundle react-app code and will be rendered into the “root” div.
Now, go to src/app.js and write what should be displayed.
Use webpack and recompile the app.js to see how it works.
npm run build
Start the development server by executing this command in the project folder’s root directory.
npm run start
A web page will be automatically open with a local host URL displaying the content inside the App.js.
Webpack would immediately recompile any modifications we make to our javascript in src/app.js, and the modifications can be updated when we save the file.
