Create a New React App Step by Step

Author:
In this tutorial, we will quickly learn how to get started with creating step by step React app. I will show you two different ways to create a react app with a detailed explanation.

 Let's begin with what is react?

What is React?

  • React is a JavaScript library - one of the most popular ones, with over 100,000 stars on GitHub.
  • React is not a framework (unlike Angular, which is more opinionated).
  • React is an open-source project created by Facebook.
  • React is used to build user interfaces (UI) on the front end.
  • React is the view layer of an MVC application (Model View Controller)
One of the most important aspects of React is the fact that you can create components, which are like custom, reusable HTML elements, to quickly and efficiently build user interfaces.

Prerequisites

Here are the prerequisites to get started with react:
  1. Basic familiarity with HTML & CSS.
  2. Basic knowledge of JavaScript and programming.
  3. Node.js and npm installed globally.

Two Ways to Set up React Apps

There are a few ways to set up React, and I'll show you two so that you will get a good idea of how it works.
  1. Using static HTML file
  2. Using Create React App CLI Tool - Recommended

1. Using Static HTML File - Set up the React App Manually

This is the first method and it's not a popular way to set up React. In this method, you need to set up the React app manually.
Let's create the React app manually step by step.

Step 1 - index.html

Let's create index.html file and add the following content to it:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>
Note that we have added three CDNs in the head - React, React DOM, and Babel. We have added a div with an id called root, and finally, we created a script tag where your custom code will live.
Note that we have used below libraries:
  • React - the React top-level API
  • React DOM - adds DOM-specific methods
  • Babel - a JavaScript compiler that lets us use ES6+ in old browsers
The entry point for our app will be the <div id="root"></div> element, which is named by convention. You'll also notice the text/babel script type, which is mandatory for using Babel.

Step 2 - Create an App Component

Let's use ES6 classes to create a React component called App.
class App extends React.Component {
  //...
}
Now we'll add the render() method, the only required method in a class component, which is used to render DOM nodes.
class App extends React.Component {
  render() {
      return (
          //...
      );
  }
}
Note that inside the return, we're going to put what looks like a simple HTML element:
class App extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}

Step 3 - React DOM render() method

Finally, we're going to use the React DOM render() method to render the App class we created into the root div in our HTML.
ReactDOM.render(<App />, document.getElementById('root'))

Complete code for index.html

Here is the full code for our index.html:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'))
    </script>
  </body>
</html>

Demo

Now if you view your index.html in the browser, you'll see the h1 tag we created rendered to the DOM.

We've done this for demonstration purposes, but from here out we're going to use another method: Create React App

2. Using Create React App CLI Tool

This is a popular way of creating a single-page React application and we will use this method in all the react tutorials.
Create React App CLI tool is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
Facebook has created Create React App, an environment that comes pre-configured with everything you need to build a React app. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, auto-prefix CSS files, and use ESLint to test and warn about mistakes in the code.

Step 1 - Create React App

To create a new app, you may choose one of the following methods:

npx

npx create-react-app my-app
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-app my-app
npm init is available in npm 6+

Yarn

yarn create react-app my-app
yarn create is available in Yarn 0.25+

Output - Project Structure

Running any of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Step 2 - Move to the Newly Created Directory

Once that finishes installing, move to the newly created directory:
cd my-app

Step 3 - Start React App

Use below command to start the project:
npm start
Use yarn to start the project:
yarn start
Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

Build React App for Production

The below command builds the app for production:
npm run build or yarn build
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed.

Conclusion

That's it. In this tutorial, we have quickly learned how to get started with creating step by step React app. I have demonstrated two different ways to create a react app with a detailed explanation.

In the next tutorial, we will explore the project structure of the newly created React app using the "Create React App" CLI tool at https://www.javaguides.net/2020/07/understanding-react-app-folder-structure.html.

Comments

Post a Comment

Leave Comment