Understanding React.JS by building a Create-React-App starter Kit

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. A starter kit is a set of pre-existing codes that you can launch to automate your repetitive tasks. It has a language, a framework, and a pattern for a specific use case.

This article aims to guide a beginner on how React.JS application codes get executed by building the famous Facebook starter kit.

Goals

At the end of this article, the reader should be able to:

  • Setup a react application

  • Understand how Webpack works

  • Understand how Babel works

  • debug a react application errors more efficiently and effectively

  • Build his/her version of Facebook create-react-app-starter-kit

Prerequisites

To get started with Building a React Starter Kit, you will need to have some basic knowledge of HTML, CSS, JavaScript, ES6, React.JS, Node Package Manager (npm), a code editor to write the code, and a web browser to preview the code.

If you have basic knowledge of all that then you will need to have Node.js on your machine. The version of Node.js and Npm (which will be installed once you install Node.js) that I’m currently using is v12.16.3 and v6.14.4 respectively.

To check the version you have on your machine, use For NodeJS use node –v, and For npm use npm –v. But if you don’t readily have the setup, you can download it here: https://nodejs.org/en/download/. Ensure you pick the one suitable for your operating system.

Requirements

  • Node.JS should be installed and working properly.

  • Npm must also be installed and working properly.

  • Code editor for writing code.

  • Web browser for viewing the output of our codes.

Table of contents

  • Let’s Get Started

  • Setting up Webpack

  • Setting up React Application

  • Setting up Babel

  • Configuring Babel With Webpack

  • Creating Simple React App

  • Setting up Webpack To Bundle Index.Html File

  • Setting up a Development Server

  • Starting the Application

  • Conclusion

  • Further Reading and References

After the first official release of React.JS Since 2013, it has over the years gained prominence among developers in many top companies. However, there have been so many complaints by beginner and junior developers about React.JS application errors. When an error occurs in a React application during the development stage, most React developers find it difficult to debug or even understand what React is actually yelling about. In the following sections, the reader will have a basic understanding of React by building a simple app.

Let’s Get Started

  1. Each time you’re starting a new ReactJS project it is imperative to create a new directory or folder where all your application files will be stored. Correspondingly, the name of the folder should be the name of the project you’re about to create, which in this article let’s call it Friend-List.

  2. After creating the folder, open your favourite IDE and navigate into the project folder then execute this command: npm init -y in the command line.

    This command sets up a package.json file in the project folder (Friend-List) and the file contains the minimum information such as Name, Version, and Description about the project. And the -y flag at the front of the npm init command helps you skip the step where you will be asked about the name, version, and description you want to set for the project. Your package.json file will look similar to the one below:

    packagejson pic.PNG

    From now on any dependencies (external packages) that will be installed for this project will be added to the file. At this stage of the project no dependency has been added.

Setting up Webpack

  1. The first dependency we will be setting up is Webpack. We will install it and also do the configuration. But before that, let’s understand what Webpack is and how it functions.

    Webpack is a static module bundler. It generates something called dependency graph, which is more like creating a relationship between the imported and the exported files that make up the entire react application. Based on the dependency graph, webpack generates a file, usually called main.js and places it inside a folder called dist. This generated file can be easily executed by the environment where the program is intended to run – usually the browsers.

    To install webpack and webpack-cli (a package that makes setting up custom webpack project easy) run the command:

    npm install --save-dev webpack webpack-cli

    The package.json now automatically contains the two dependencies installed above. Your package.json content should look like the one I have below:

    After installing webpack, the next step is to use the package to execute some tasks such as starting our application and building our application. To do that, we will need to add it to the scripts object generated inside our package.json file. As shown in the figure below:

    afterWebpackAdded2.PNG

    To test whether our Webpack configuration works, create a new folder named “SRC” and create a file called index.js in the SRC folder then add this code console.log("JS is awesome"); inside the file and save. After saving the code, run npm start in the terminal. Notice that after running the command a folder named “dist” will be generated automatically, this folder contains a file named main.js. If you recall, this folder and file have been mentioned above while defining what a webpack is. To execute the bundled version of our application just enter: node dist/main.js and press enter then “JS is awesome” will be displayed in the console. That is proof that our webpack is working as intended.

    After setting up our webpack, we can now go further to set up our React application and configure it with webpack.

Setting up React Application

  1. To set up our project to run a React.JS application, we will install react and react-dom packages. React is the generic package for React while react-dom provides an entry point to the browser’s DOM and renders React.

    To install the two packages run: npm install react react-dom

    After running the command, the package.json will be updated. It will now include the two packages. It should look like the image below:

reactInstall.PNG

Setting up Babel

  1. Before we set up babel, it is important to understand why we need it. The React library supports EcmaScript 2015 (ES6), which is not as widely supported by browsers as its subset (ES5). In the quest to make react applications more supported by browsers, we will use a library called Babel. Babel helps to transpile our React.JS codes from ES6 into ES5.

    To install Babel (both the generic package and its related packages) use the following command:

    npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

    After the installation, we will configure the packages with webpack.

    Configuring Babel With Webpack

  2. To configure babel with webpack, create a file called webpack.config.js in the root directory/folder. Add the following lines of code to the file:

    webpackconfig.PNG

    Brief explanation of the codes inside webpack.config.js: The file is using babel-loader, which is one of the packages installed above to run every .js extension files but excluded any .js files inside the node_modules folder from babel compiler.

  1. To configure the two babel preset packages installed, we will create another file named “.babelrc” in the root folder.

    After creating the file we will add the following codes:

    babelrlc.PNG

    Now that we have set up our babel and webpack, we can now run React from the command line. So let’s create our React application.

Creating React App

  1. Create a new file inside the SRC folder and name it index.html. Then add the following codes to the file:

    htmlFile.PNG

    Notice that the section with an id of root (id=”root”) will be the point where all the JavaScript components will be mounted.

  2. So let’s go back to our SRC folder and change the code inside our index.js, which is the file created in the webpack section to a valid ReactJS code as the one below:

    Code Explanation: A simple component called App is created and it returns an h1 element holding some contents. Now, pay close attention to the first and second argument in the render method. The first argument is the component to be rendered while the second argument is where the component should be rendered, which in this case is to be rendered in the section part of the index.html file with an id of root.

    Setting up Webpack To Bundle Index.Html File

  3. If you can remember when we were about to run the index.js, we created a minified bundle (main.js) using webpack and then we executed that by using node dist/main.js. So to create a minified bundle of our html file we will install html-webpack-plugin package using: npm install --save-dev html-webpack-plugin

    The next step is to config our new package. To do that add the following

    lines of code to the webpack.config.js file:

  4. So now when we run npm start, webpack will start in development mode and add the index.html to the dist folder. Inside this index.html body tag, a script tag has been inserted that directs us to our application bundle i.e dist/main.js file. After this configuration, we will need to set up a development server.

    Setting up a Development Server

    Why do we need a development server? We are creating the development server to help us auto-reload each time we make changes to our codes in the development mode. Without it, the process would be a bit tedious.

  5. To set it up, we will need to install a package called webpack-dev-server. So use this command to do that: npm install --save-dev webpack-dev-server

    Next step is to add the package to our package.json file so that it uses webpack-dev-server instead of webpack directly when running the start script. We add it as seen below:

Starting the Application

  1. So now the application is ready to be rendered. All we have to do is to run npm start then after few minutes your browser will pop-up and your webpage contents will be display at localhost:8080 as shown below:

CONCLUSION

Now, take a deep breath and stretch your arms. You’ve just built a simple version of FaceBook create-react-app starter kit. I believe you’ve also been able to understand the importance of babel and webpack in a react application. So if an error occurs during the development of your application, you should be able to think of the packages that could cause that.

Thanks for sticking with me to the end. Happy Coding.

Further Reading and References

https://reactjs.org/tutorial/tutorial.html#what-is-react

https://babeljs.io/blog/2021/07/26/7.15.0

https://webpack.js.org/guides/getting-started/

https://themeselection.com/the-best-react-starter-kit/