Display hello world using React.js

create-react-app is a command to create a React.js project with default configuration. Create-react-app will help in running react applications. Command will be executed on npm or yarn

If npm and node.js is installed on computer, install create-react-app globally with command −

npm install –g create-react-app

Creation of project − to create a project once above commands are executed, run below command −

npx create-react-app hello-world-example

npx comes with npm version 5.2+ , npm version can be checked on terminal using npm –version

If npm version is 5.2+, then react.js project can be directly created with command −

npx create-react-app hello-world-example

If npm version is 6+, npm init react-app hello-world is also an option to create React.js project.

With yarn, we have command − yarn create react-app hello-world-example

Once above commands are done , change directory to hello-world-example

With create-react-app, webpack or babel required for using advanced JavaScript features are preconfigured and we can only concentrate on writing code.

cd hello-world-example

To execute the application, run the below command on terminal −

npm start

npm start runs a live development server and the code changes will automatically refresh the browser and reflect the changes.

A browser window will be opened, if not opened automatically open a browser manually and type url − localhost:3000 in the address bar. 3000 is the default port used in React application. Port number can be changed if any issue with port number.

The default text on application run is shown below −

Display

To update open the project using any code editor tools e.g. visual studio code

Open the file App.js

import React from 'react';
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;

Change the content of return statement to just hello World text −

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
   return (
      <div className="App">
         Hello World !
      </div>
   );
}
export default App;

The text on the browser will be changed immediately