1. Introduction

In this tutorial, we’ll create a React application from scratch.

2. Create React App

Create React App is the best way to start building a new single-page application in React. Create React App sets up your development environment and optimizes your application for production. It sets up your development environment so you can focus on development and need not to worry about build tools.

To use Create React App, you’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.

You can find Node.js from the following link:

https://nodejs.org/

Create React App uses Babel and webpack under the hood. Create React App does not handle any of your application logic or databases. It just sets up your development environment, defines basic project structure and creates build pipeline.

2.1 Create your React application

Execute the following in your command prompt to create your application my-app:

npx create-react-app my-app

When you execute this, it will create a project directory my-app in your current directory. So make sure you execute the command where you want to create your project.

2.2 Run your React application

To run your application created by using Create React App, you need to be inside the your project directory and run npm start.

cd my-app
npm start

Note: npx is a package runner tool that comes with npm 5.2+.

2.3 View your application

Executing npm start usually opens your application in your browser.

If it doesn’t work, you can use your browser to view your application. The default URL is usually http://localhost:3000/.

3. Modify the default App component

The default App component has React logo and and styles applied to it. Let us change the default App component to print Hello World message.

Open the App.js file and replace the existing code of the file with the following code:

function App() {
  return <h1>Hello world!</h1>;
}

export default App;

On save, the page will automatically refresh and you can see Hello World message.

4. The index.js file

Let us now discuss the index.js file which is the starting point of application and loads the App component.

Typically, the index.js file has the following code:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

You can ignore the import of css and reportWebVitals method for now as these are not mandatory to run the application.

The code of index.js can be explained with the help of following points:

1. Import of React and ReactDom.
2. Get a reference to the div with “root” as ID.
3. Ask React to take control of that “root” element.
4. Render the component on screen. In this case, the App component.

5. Why do we import React and ReactDOM seperately?

The react-dom package contains methods that are only supported for the web applications which run in the browser DOM environment. This package provides two entry points:

• react-dom/client contains APIs to render React components on the client (in the browser).
• react-dom/server contains APIs to render React components on the server.

React is a JavaScript library, designed for building user interfaces.

React-DOM is a complimentary library to React which glues React to the browser DOM.

If you are using React to create an application which is not a web application, you may not need to use the react-dom. For example, there are packages react-native, react-three, react-canvas and react-art which has nothing to do with the DOM.

6. Conclusion

In this tutorial, we created our first React application. In next tutorial, we’ll discuss project structure.