Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
10K+ Views
