ReactJS installation and setup

For setting up React in our local system, the first step is to Install NodeJs and npm.

Install Nodejs

Node.js provides a runtime environment to execute JavaScript code from outside a browser. NPM, the Node package manager is used for managing and sharing the packages for either React or Angular.

NPM will be installed along with Nodejs. Node.js can be downloaded and installed from the official NodeJs website.

https://nodejs.org

Once the Installation of Node is complete. Open Node.Js Command Prompt and we can check the version as well.

Install Create-React-App Tool

The next step is to install a tool called create-react-app using NPM. This tool is used to create react applications easily from our system. You can install this at the system level or temporarily at a folder level. We will install it globally by using the following command.

Creating react app

Open your terminal in the directory you would like to create your application. Run this command to create a React application named my-react-app:

npx create-react-app my-react-app

OR, you can directly make your application without specifying a name, like this:

npx create-react-app .

In this case, all files will be kept in the current directory.

Note: When choosing folder name, make sure there are no spaces or capital letters because of npm naming restrictions.

Once base application is created, if folder specified you just have to enter the folder. You can use this command to enter:

cd directory-name

Then just start up the application with this command:

npm start

and you are good to go!

Hello World

const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<h1>Hello, world!</h1>);

In this we are just putting <h1> tag in a div with id 'root'. That's it! In div with id 'root' everything will be rendered. We can also change it from 'root' to something else, as we are just getting an element and putting HTML in it.

React Getting Started

Run and Check Run the React Application with this command: A new browser window will pop up, if it does't then go on http://localhost:3000/. Check if it is showing the same page:

Hello World

For this first you need to navigate to src/App.js, it will look like:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Whatever you put in return will be rendered as HTML on the page, you can change it like:

function App() {
  return (
    <div className="App">
      Codeswithpankaj.com
    </div>
  );
}