ReactJS Hello World - JavaScript

ReactJS is a popular JavaScript library for building user interfaces. In this tutorial, we will create a simple "Hello World" program using ReactJS.

Prerequisites

Before we get started, you will need to have the following installed:

• Node.js
• npm (Node Package Manager)

Getting Started

To create a new ReactJS project, run the following command in your terminal:

npx create-react-app react-hello-world

This will create a new directory called "react-hello-world" with all the files required to start a ReactJS project.

Next, navigate into the directory by running:

cd react-hello-world

Creating the App Component

In ReactJS, components are the building blocks of an application. Every ReactJS application must have at least one component.

To create a new component, create a new file called "App.js" in the "src" directory. Place the following code inside the file:

import React from 'react';

function App() {
  return <h1>Hello World!</h1>;
}

export default App;

This creates a new component that will render an HTML heading with the text "Hello World!".

Rendering the App Component

To render the "App" component, open the "index.js" file in the "src" directory. Replace the contents of the file with the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

This will import the "App" component and render it inside the "root" element in the HTML file.

Starting the Development Server

To start the development server, run the following command in your terminal:

npm start

This will open a new tab in your browser with the "Hello World" text displayed on the screen.

Conclusion

In this tutorial, we created a simple "Hello World" program using ReactJS. With the basic understanding of components and rendering, you can now start building more complex applications using ReactJS.