Create-React-app: Features, Advantages, Steps to Build

Creating a React app usually involves dealing with many details like dependencies and config files. In this tutorial, I'll show you how to make a React application. “Create React App" is a helpful tool that simplifies this process. It's a command-line tool that makes setting up a React project much easier. So, let's get started with the tutorial! If you are new to React and want to Learn React Online then it's worth checking out this course, where you will learn everything, you need to know about React.

What is Create React App?

Create React app is a command you run in the terminal. Create React app is the best way to quickly build a new React single-page application. What Create React app does is that it sets up your development environment so that you can use the latest JavaScript features, provides a good developer experience, and optimizes your app for production. 

Command

Below is the create React app command, if you run the below code snippet in your terminal directory then your React app is set and ready for work. 

npx create-React-app my-React-app

How Does Create React App Work?

Create React App is an independent NodeJS module. You can use either npm or Yarn to install create React app . 

If you want to create React app npm, you can create and launch a new project with just a few commands: 

cd new-app 
npx create-React-app new-app 
npm start 

With yarn create React app, you’ve gotta run the following: 

cd new app 
yarn create React-app new-app 
yarn start 

Create React App with either npm or yarn will scaffold a project structure similar to the one below:

new-app 
├── .gitignore 
├── node_modules 
├── package.json 
├── public 
│   ├── favicon.ico 
│   ├── index.html 
│   ├── logo192.png 
│   ├── logo512.png 
│   ├── manifest.json 
│   └── robots.txt 
├── README.md 
├── src 
│   ├── App.css 
│   ├── App.js 
│   ├── App.test.js 
│   ├── index.css 
│   ├── index.js 
│   ├── logo.svg 
│   ├── reportWebVitals.js 
│   └── setupTests.js 
└── yarn.lock 

create-react-app Basic Features

The features below are the bedrock of React Development. 

1. Local Development

To serve an App after creating your project, you will need a local development environment. The webpack development server and a watcher that automatically reloads your application whenever something is changed in your codebase.

Create React App provides you with a lot of handy development features such as hot and fast reload that enables you to reload only the updated portion of the application. 

2. ES6 and ES7

The app includes its own Babel preset React app that supports a variety of ES6 and ES7 capabilities. Some of the functionalities that are supported are as follows: 

• Object Rest/Spread Properties 
• Async/await 
• Importing dynamically () 
• Static Properties and Class Fields 

It should be noted that Create React App does not include any polyfills for runtime features, so you must add them yourself if required. 

3. Asset Import

CSS files, images, and fonts from your JavaScript modules that allow you to bundle files used in your application can be imported. Create React App will transfer these files into the build folder once the application has been constructed. Here's an illustration of how to import an image:

import image from './image.jpg'; 
console.log(image); // image will contain the public URL of the image 
This can also used in CSS:
 
.image { 
  background-image: url(./image.png); 
}

4. Styling

In React, whenever an application is built, all the CSS files are concatenated into a single bundle and placed in the build folder.

Create React App also supports CSS modules. CSS modules are defined as files with the extension *.module.css. Because Create React App generates distinct class selectors in the final CSS files, we can avoid CSS selector conflicts. 

You can also import Sass .scss files if you choose to use CSS preprocessors. You will, however, need to install the node-sass package individually.

5. Running Unit Tests

When you run the npm test, it will run Jest tests and set up a watcher to re-run them every time you update something, see the image below for example:

ESLint 

Create React App also provides you with ESLint, a static code analyzer that will assist you in detecting mistakes. 

6. Creating a Production Bundle

Create React App also comes with a build script that enables you to generate a production-ready app from your project. This will provide an optimized build of your application that is ready for deployment in your environment. The created artifacts will be saved in the build folder as follows:

7. Deployment

Because your Create React App application is made up of only static files, there are several ways to deploy it to your remote environment. If you're running in a Node.js environment, you can use a Node.js server to serve the application, or you can use a separate web server, such as NGINX. 

If you are curious about how long it can take to properly learn web development, check out the Web Development Course Duration for information on comprehensive web development courses. 

Development Features of Create React App

Here is the list of React development attribute  

• JSX (JavaScript Syntax Extension) 
• Virtual DOM. 
• One-way data binding. 
• Performance. 
• Extensions. 
• Conditional statements. 
• Components. 
• Simplicity.

1. Environment variables

Node environment variables can be used to inject values into your code at build time. Create React App will seek for any environment variables beginning with REACT_APP_ and add them to the global process.env. For convenience, these variables can be stored in a .env file: 

REACT_APP_BACKEND=http://my-api.com 
REACT_APP_BACKEND_USER=root

You can then use the following code to refer to them:

fetch({process.env.REACT_APP_SECRET_CODE}/endpoint)

2. Proxying to a Back End

If your app will communicate with a remote back end, you may need to be able to proxy requests during local development to avoid CORS. This can be accomplished by including a proxy field in your package.json document:

"proxy": "http://localhost:4000",

3. Code Splitting

The dynamic import() directive in Create React App allows for code separation. Instead of returning the module's exported values, it will provide a Promise that resolves to these values. As a result, modules imported in this manner will not be included in the final bundle, but will instead be created into independent files. This allows you to decrease the final bundle size and load content on demand. 

4. TypeScript Support

You can use create React app templates to tune your project with the right dependencies. When creating a new project, you can enable TypeScript to take advantage of static type analysis. This can be accomplished by utilizing a non-default template to generate the project via your CLI: 

npx create-React-app my-app --template typescript

TypeScript support can also be added to an existing project.

5. Progressive Web Apps

Similarly, you can add support for progressive web apps. Service workers can be used by including a src/service-worker.js file. Beginning with version 4, this will be injected into the application using the Workbox library.

Service workers must be generated from a custom template in order to be used in a new project: 

npx create-React-app my-app --template cra-template-pwa 

# or with TypeScript support 

npx create-React-app my-app --template cra-template-pwa-typescript

6. Web Vitals

Create React App allows you to assess your application's performance and responsiveness. This is accomplished by tracking the web vitals-defined metrics and measuring them with the web-vitals library 

// index.js 
reportWebVitals(console.log);

Visit KnowledgHut to Learn React Online today.

Create React App Project Examples

Here, I will be talking about the list of projects that were made with the Create React App. So you’ll know the examples of the create React app.

1. Facebook

Although partially, Facebook is making use of ReactJS. To create their website, React, a program built within the application code, was employed. React Native, a variant of React that is comparable but used to show iOS and Android native components rather than DOM elements, was also used to build the mobile app.

It's interesting to note that Facebook was where the ReactJS framework was first developed, thus it makes sense for the app to use it. React Fiber is currently in beta and was completely rewritten by Facebook.

2. Instagram

The use of ReactJS within Instagram is huge. Numerous features, like geolocations, Google Maps APIs, accurate search results, and tags that don't use hashtags, are proof of this. It's fantastic that everything is covered by the app's API. Instagram is totally based on the ReactJS framework, allowing users to fully adapt to its exceptional capabilities.

3. Netflix

Additionally, Netflix may utilize the React version on its Gibbon platform, which takes the role of the DOM used by web browsers in low-performance TVs. Even Netflix has published a blog post outlining the several advantages of the ReactJS framework, including faster startup times, increased runtime effectiveness, and modularity.

4. WhatsApp

Even though there were other engines available, WhatsApp uses Underscore.js and Velocity.js as some of its most efficient ones. WhatsApp also uses ReactJS to create user interfaces from Facebook. Before it was introduced, it had beta versions.

Similar to how it is employed by the aforementioned Facebook web experience, React is now utilized by the brand-new WhatsApp Online app.

5. Dropbox

ReactJS was adopted by Dropbox over a year ago. precisely when React usage among app developers increased significantly.

The success of this incredible cloud-based storage service and online backup solution is greatly attributed to Dropbox's effective use of the vast array of resources that make up this architecture.

Prerequisites

You will need the following to get a React Application running on your local machine. 

1. A Node version of at least 16 is required to create a React App. 
2. Npm is a package manager. It is automatically included in your Node installation. You should have at least npm version 8. 
3. To work with our project files, we need a competent code editor. Visual Studio Code is strongly recommended. 

Installation

To use Create React App, we must first open our terminal or command line on our computer. We can use the tool npx to create a new React project if you have a npm version of at least 5.2 in the Node Js application. 

NPX allows us to utilize the create-React-app package without first installing it on our machine, which is easy. 

Using npx also assures that we are creating our project with the most recent version of Create React App: 

npx create-React-app my-React-ax

When we run this command, a folder called my-React-app will be created in the location we selected on our computer, and all the packages it requires will be installed automatically.

Note: It normally takes React app 2-3 mins to be created. 

1. Automatic Installation

To automatically produce a create-React-app project from a template, use the --template flag when running the create-React-app command.

# using npm 
npx create-React-app my-app --template [template-name] 
# using yarn 
yarn create React-app my-app --template [template-name] 
The @chakra-ui template for example, can be installed using the commands below. 
# JavaScript using npm 
npx create-React-app my-app --template @chakra-ui 
# JavaScript using yarn 
yarn create React-app my-app --template @chakra-ui 
# TypeScript using npm 
npx create-React-app my-app --template @chakra-ui/typescript 
# TypeScript using yarn 
yarn create React-app my-app --template @chakra-ui/typescript 

2. Manual Installation

To manually installing Chakra UI within your Create React App project directory, execute the following on your terminal: 

npm i @chakra-ui/React @emotion/React@^11 @emotion/styled@^11 framer-motion@^6
yarn add @chakra-ui/React @emotion/React@^11 @emotion/styled@^11 framer-motion@^6 
After installing Chakra UI, you must configure the ChakraProvider at the application's root. This can be in your index.jsx or index.tsx file. 
Insert the following code: 
import * as React from 'React' 
// 1. import `ChakraProvider` component 
import { ChakraProvider } from '@chakra-ui/React' 
function App() { 
  // 2. Wrap ChakraProvider at the root of your app 
  return ( 
    <ChakraProvider> 
      <App /> 
    </ChakraProvider> 
  ) 
} 

How to Build React Project Using create-React-app [Step-by-Step]

Now, let's dive into the step-by-step process of creating a React app using Create React App. This is the section you've been waiting for. I'll guide you through all the essential steps, helping you Learn React Online and grow your React skills.

1. Reviewing the Project Structure

After we've created our project files and installed our dependencies, our project structure should look like this: 

my_React_app 
├── README.md 
├── node_modules 
├── package.json 
├── .gitignore 
├── public 
└── src
 

What is the purpose of each of these files and folders? 

• README.md is a markdown file that contains many useful suggestions and links to assist you to understand how to use Create React App. 
• node modules is a folder containing all the dependency-related code deployed by Create React App. You will never have to open this folder.  
• package.json, which maintains our app dependencies and what is included in our project's node modules folder, as well as the scripts required to operate our app. 
• gitignore is a file that is used to prevent Git from tracking files and folders. 
• We can utilize public to store our static assets for our React projects, such as photos, svgs, and fonts. 
• src is a folder containing our source code. It is where all our React-related code will reside and where we will mostly work to construct our app.

2. How to Run your React Project

Drag and drop your project into your code editor and open the terminal (in VS Code, go to View > Terminal). 

To begin your React project, simply run and it will open on the browser.

npm start 

The development server will launch at localhost:3000 which you can see from the example below.

You can also use create React app testing for validating your React app. Create-React-app includes all the packages you need to run tests using React testing library(@testing-library/React).

A simple test is included in the src file App.test.js. It verifies that our App component displays a link with the words Learn React effectively. 

With the below command, we can run our tests.

npm run test 

4. How to Change the App's Metadata

Open the public/index.html file, and observe all the HTML with the <meta/> tag. 

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8" /> 
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="theme-color" content="#000000" /> 
    <meta 
      name="description" 
      content="Web site created using create-React-app" 
    /> 
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 
    <title>React App</title> 
  </head> 
  <body> 
    <noscript>To operate this app, JavaScript must be enabled. .</noscript> 
    <div id="root"></div> 
  </body> 
</html> 

The entire React app is linked to this HTML page via the div with the root id shown above.

We don't need to make any changes to the body tags. However, changing the metadata in the head tags is useful for informing users and search engines about our app.

It has meta tags for a title, description, and favicon picture, as we can see (the little icon in the browser tab). 

There are further tags like theme-color, apple-touch-icon, and manifest. These are useful if consumers wish to add your program to the home screen of their device or PC. 

Change the metadata content of the following, such as the description, title, etc. 

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8" /> 
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="theme-color" content="#000000" /> 
    <meta 
      name="description" 
      content="App for business transaction's, invest from all around the world" 
    /> 
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 
    <title>React Business Transaction</title> 
  </head> 
  <body> 
    <noscript>You need to enable JavaScript to run this app.</noscript> 
    <div id="root"></div> 
  </body> 
</html> 

5. How to Work with Images and Other Assets

The example below, is a code example of how to use an image tag in your React project. 

// src/App.js 
import "./App.css"; 
function App() { 
  return ( 
    <div className="App"> 
      <header className="App-header"> 
        <img src="/logo.svg" className="App-logo" alt="logo" /> 
        <h1>React Posts Sharer</h1> 
      </header> 
    </div> 
  ); 
} 
export default App; 

You can also use the method below to consume images in your project. 

// src/App.js 
import { ReactComponent as Logo } from "./logo.svg"; 
import "./App.css"; 
function App() { 
  return ( 
    <div className="App"> 
      <header className="App-header"> 
        <Logo style={{ height: 200 }} /> 
        <h1>React Posts Sharer</h1> 
      </header> 
    </div> 
  ); 
} 
export default App; 

6. How to Install Dependencies

To install dependencies into your project, run npm install package_name on your terminal. For example, let’s run the command below to have Axios installed on your project.

npm install axios 

Observe that Axios is now part of the dependencies array, this validates that we have successfully installed Axios. 

{ 
  "name": "my-React-app", 
  "version": "0.1.0", 
  "private": true, 
  "dependencies": { 
    "@testing-library/jest-dom": "^5.11.4", 
    "@testing-library/React": "^11.1.0", 
    "@testing-library/user-event": "^12.1.10", 
    "axios": "^0.21.1", 
    "React": "^17.0.1", 
    "React-dom": "^17.0.1", 
    "React-scripts": "4.0.2", 
    "web-vitals": "^1.0.1" 
  } 
} 

7. How to Import Components

Rather than writing all your code within the App component, React has made it possible to write your components as a file and import them to whichever page they’re needed. To import a React Component, You will write import {Component Name} from 'React'. 

import { Component } from 'React' 
import React from "React"; 
import axios from "axios"; 

8. How to Style our App with CSS

Create React App has CSS support right out of the box. If you go to App.js, you'll notice that we're importing an App.css file from src at the top.

Within App.css, we can add some styles to improve our app's appearance, see the example below. 

import "./App.css"; 
function App() { 
  return ( 
    <div className="App"> 
      <header className="App-header"> 
        <Logo style={{ height: 200 }} /> 
        <h1>React Posts Sharer</h1> 
      </header> 
    </div> 
  ); 
} 
export default App; 

We can write all our CSS in one file and import it into any component we want just as we did above. 

9. How to Build the App and Publish It

When we are satisfied with our program and are ready to publish it, we can create it using the command: 

npm run build 

The above command builds your project and saves it in a folder called build. Webpack as the bundler of this project is responsible for building your entire project. You can use create React app webpack for facilitating your development process.

Compiled successfully. 
File sizes after gzip: 
  46.62 KB  build/static/js/2.1500c654.chunk.js 
  1.59 KB   build/static/js/3.8022f77f.chunk.js 
  1.17 KB   build/static/js/runtime-main.86c7b7c2.js 
  649 B     build/static/js/main.ef6580eb.chunk.js 
  430 B     build/static/css/main.5ae9c609.chunk.css 

Finally, you can run the development script by running npm run serve on your console to have it launched on the browser. 

Looking to enhance your coding skills? Join our Python online course with certificate! Learn the language that powers tech giants and start your journey towards becoming a coding pro. Enroll now!

Advantages of Create React App

The following are the advantages of using Create React App to bootstrap your React project.

1. Instant reloads

One of the advantages of the create React app is instant reloading. If you use the create React app to set up your React project, you will notice that once you save your work it automatically reloads in the browser. 

The 'Instant reloads' feature allows you to concentrate on development. You can also use deployment of create React app for preparing a production ready code that bundles and optimizes your app automatically.

Auto reloads come in handy when you're developing React applications quickly and don't want to waste time stopping and restarting the application. 

2. Launches in seconds

The create React app, doesn’t take time to launch. The Create React App makes your whole project open in a few seconds. Create React App emphasizes your concentration on code rather than developing tools, regardless of whether you use React or another library.

3. Single Dependency

There is only one build dependency required for your React app. Following testing, it was discovered that all of its key components work together and flawlessly. There are no problems such as sophisticated version mismatches.

When we use the create-React-app tool to create a new app, we don't have to install everything manually because it includes pre-configured parameters that make the development setup much faster. The necessary libraries such as babel and webpack are pre-configured so we simply need to run and it's done.

4. No constrain

Create React App supports your app with Babel, webpack, ESLint, and a few additional projects. If you require a configuration, simply eject it from Create React App and then change their config files directly.

5. Installation of the latest version

When you use Create React App to create a project, the most recent versions of React-DOM, React, and React-scripts are automatically installed. The development dependence handles all other dev dependencies that are used to run, test, and build your app. 

6. Ease of maintenance and update

Typically, changing your build tools appears to be a time-consuming and frightening operation. When the Create React App publishes new versions, you can quickly upgrade using the following command:

npm install React-scripts@latest 

Conclusion

As always, I had fun dishing out this much information to you, hope you’ve gotten tons of values from this tutorial. In this tutorial we were able to see how you can use create React app to create an application.

We’ve also learn’t about the features, and the step-by-step way to use a create React app. Now you know that the Create React App is a package in the node module that makes it easy for you to set up a React project with just one command.

We also looked at the adavantages of the Create React App and discovered a lot from that. If you want to speed up your software development career, check out the best courses at KnowledgeHut to Learn React in Online and become a professional React developer.