Creating your first ReactJS Application

Introduction

Welcome to the thrilling world of ReactJS! This class will teach you how to build your first ReactJS application. As you may have seen in earlier classes, ReactJS is a JavaScript library used to create user interfaces. It offers an effective method for managing the application's state and rendering the UI components. Setting up the development environment, creating a component, and rendering it on the web page are all steps in creating a ReactJS application. You will be able to design a simple ReactJS application and have a better grasp of the ReactJS development process by the end of this session. Let's get this party started!

Setting up the Project

To set up the new project, follow the steps given:

1. Open a command prompt or terminal and navigate to the directory where you want to create your project.
2. Run the command

   **npx create-react-app my-app**

   to create a new ReactJS project. Replace "my-app" with the name of your project. We will keep the project name as ‘firstapp’. So, our command would be like this below:

**npx create-react-app firstapp**

  and hit ‘Enter’.

3. Once the project is created, navigate to the project directory by running the command

**cd firstapp**

4. Run the command

**npm start**

to start the development server.

5. Open your web browser and navigate to

**http://localhost:3000**

to see the default ReactJS page which looks like this below:

Building Our First ReactJS App

After setting and creating the project, now it’s time to focus on building it and see how to make our first “Hello World!” App.

1. Open your project directory on a code editor.
2. Navigate to the src folder → app.js file. In app.js the default code present has to be changed. So replace that code with the following code.

import React from 'react';

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

export default App;

3. Save the code and then in a terminal run this command below.

npm start

The application will start in a browser and will show the text “Hello World!”

Congrats! You have made your first application successfully.

Conclusion

In conclusion, learning how to create your first ReactJS application is a great way to kickstart your journey in web development. Moreover, you've learned how to install React, set up a development environment, and create a basic React application that renders on a web page. ReactJS is a powerful tool that can make web development faster and more efficient. With the skills you've learned in this lesson, you're now equipped to create more complex and feature-rich applications using React. The possibilities are endless, and as you continue to learn and explore, you'll be able to create truly amazing web applications.