ReactJS Project Setup and Creating “Hello World” App

ReactJS is a popular, open-source JavaScript library for building interactive user interfaces for Web applications. It is maintained by Facebook and a community of individual developers and companies. One of the biggest advantages of ReactJS is that it allows us to create reusable UI components. The main purpose of React is to be fast, scalable, and simple.

React JS is also called simply React or React.js.

In this article, I have tried to discuss in detail what ReactJS is and why we should use ReactJS, as well as what we need to know and have. In today’s article, we will learn how to start a ReactJS project.

I assume you have Node.js installed on your computer. Since NPM is installed by default with Node.js, we have nothing to worry about.

However, I use yarn. You can install yarn if you want. To install yarn in global mode, run the command on the npm i -g yarn in terminal.

How to create a ReactJS application?

To start the ReactJS project, we will use ReactJS CLI (Command Line Interface) at the terminal. We can do this in either npm or yarn.

If your NPM version is above 5.2, you can use the following command. In place of my-app, you will name the project of your choice.

npx create-react-app my-app

If your NPM version is 5.1 or lower, you need to install the create-react-app command globally. Use the following command for that.

npm install -g create-react-app

If your NPM version is 7 or above, you can use the following command.

npm init react-app my-app

Now if you are a yarn user, then the following command is for you.

yarn create react-app my-app

If all goes well, you can see some text like the image below.

Now, go to your project folder using the cd my-app command in the terminal and run the npm start or yarn start command. If your project trans-compiles properly and runs successfully, it will open in the browser.

Congratulations on being able to create your first Hello World app using the ReactJS library and run it in your browser. You have completed the first step of learning ReactJS.

The folder structure of the ReactJS project

my-app/
   README.md
   node_modules/
   package.json
   package-lock.json
   public/
      index.html
      favicon.ico
      logo192.png
      logo512.png
      manifest.json
      robots.txt
   src/
      App.css
      App.js
      App.test.js
      index.css
      index.js
      logo.svg
      serviceWorker.js
      setupTests.js

Above we can see the folder structure of our project. Now delete all the files except the App.js and index.js files from the src folder.

Delete the following lines inside the index.js file.

import './index.css';
import * as serviceWorker from './serviceWorker';

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Now save the file by typing the following codes inside App.js.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, ReactJS's world!</h1>
    </div>
  );
}

export default App;

Now you check in the browser. You will see the words in your browser you have just typed in App.js file:

"Hello, ReactJS's world!".

I congratulate you again. You have been able to make changes to the ReactJS file.

Finally, we learned how to start a React project using ReactJS CLI.

Documentation is your new friend

Who knows better than the company that created the ReactJS framework? ReactJS’s website has detailed documentation about it. This tutorial of mine will help its users to start ReactJS quickly. But, it is necessary to study its documentation to gain in-depth knowledge about it.

Just by following the tutorial, you can gain vague knowledge, but you have to read the original documentation and gain detailed knowledge to move from a small project to a big and complete app step by step.