Hello World in React.js

React.js enables user interface development by creating interactive components. These components are constructed using JavaScript, making it easy to build dynamic web applications. React.js is widely used due to its flexibility and efficiency in managing complex interfaces. It allows developers to create reusable UI components, simplifying the development process. Additionally, React.js utilizes a virtual DOM, optimizing performance by only updating the parts of the interface that have changed. With its extensive ecosystem and community support, React.js empowers developers to build modern, interactive web applications with ease. In this blog, we’ll guide you through the process of setting up a basic React.js application and displaying your first “Hello World” message.

 

Prerequisite:

Node.js and npm: React.js relies on Node.js and npm (Node Package Manager). Ensure they are installed on your machine. Visit https://nodejs.org/ to download and follow the installation instructions.

 

1. Create React App:

To quickly set up a React project, we’ll use Create React App. Open your terminal and run the following commands:

npx create-react-app hello-react
cd hello-react

 

2. Project Structure:

Navigate to the project folder using your preferred text editor. You’ll find a structure with various files and folders.

1. The primary file is src/App.js, where we’ll make our changes.
2. Edit src/App.js: Replace the content of src/App.js with the following code:

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

3. Save the changes and return to your terminal. Run the following command to start the development server:

   npm start

4. Visit http://localhost:3000 in your browser to see the “Hello World” message.

 

3. Understanding the Code:

• We imported the React library and the default styling from App.css.
• The App function returns a simple JSX structure with an <h1> element displaying “Hello World!”

 

You’ve successfully created your first React.js application. Feel free to experiment and explore more features as you continue your React journey. Happy coding!