Hello World in React.js

Post author:anis kchaou
Post published:February 24, 2024
Post category:React
Post comments:0 Comments
Post last modified:March 31, 2024

Welcome to our “Hello World React.js Tutorial” where we’ll guide you through building your first React application. React.js has become one of the most popular front-end JavaScript libraries for building user interfaces. Its component-based architecture and virtual DOM make it efficient and flexible. If you’re new to React.js, a “Hello World” example is the perfect starting point to understand its basic concepts. In this article, we’ll walk through creating a simple “Hello World” application in React.js.

Prerequisites

Before we begin, make sure you have Node.js and npm (Node Package Manager) installed on your machine. You can download and install them from the official Node.js website.

Setting Up a React App

React provides a tool called create-react-app to set up a new React project quickly. Open your terminal or command prompt and run the following command to create a new React app called hello-world-react:

npx create-react-app hello-world-react

This command will create a new directory called hello-world-react and set up a basic React project structure inside it.

Next, navigate into the project directory:

cd hello-world-react

Creating a Hello World Component

In React, everything is a component. We will create a simple functional component to display our “Hello World” message.

Open the src directory in your code editor and create a new file called HelloWorld.js. Then, add the following code to define our component:

// src/HelloWorld.js

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a basic React.js application.</p>
    </div>
  );
}

export default HelloWorld;

In this code:

We import React because every React component needs to have access to the React library.
The HelloWorld function is a simple functional component that returns JSX (JavaScript XML).
JSX allows us to write HTML-like code within JavaScript.
We export the HelloWorld component so we can use it in other parts of our application.

Rendering the Hello World Component

Now, let’s render our HelloWorld component inside the main App component.

Open the src directory and edit the App.js file. Replace its contents with the following code:

// src/App.js

import React from 'react';
import './App.css';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HelloWorld />
      </header>
    </div>
  );
}

export default App;

In this code:

We import the HelloWorld component we created earlier.
Inside the App component, we render the HelloWorld component.
The className="App" and className="App-header" are for styling. You can find these styles in the src/App.css file.

Running the React App

Now that we’ve created our “Hello World” component and rendered it, let’s run our React app!

In the terminal, make sure you’re in the hello-world-react directory, then run:

npm start

This command starts the development server and opens your app in the default browser. You should see “Hello, World!” displayed in the browser along with the accompanying paragraph.

Understanding the React Code

Components: In React, we create reusable UI components. Our HelloWorld component is a simple functional component that returns JSX.
JSX: JSX allows us to write HTML-like code directly in our JavaScript files. This makes our code more readable and concise.
Rendering: In the App component, we render the HelloWorld component. React uses a virtual DOM to efficiently update the actual DOM when components change.
npm start: This command starts the development server. Any changes you make to your code will automatically reload the app in the browser.

Conclusion

This simple example demonstrates the core concepts of React, including components, JSX, and rendering. As you continue your journey with React, you’ll explore more advanced topics such as state management, props, and lifecycle methods. React’s official documentation is an excellent resource for diving deeper into these topics: React Documentation.

Now that you have a basic understanding, feel free to experiment with adding more components, styling, or even fetching data from APIs. React’s flexibility and vast ecosystem of libraries make it a powerful tool for building modern web applications.