create first reactjs application

Creating Your First ReactJS Application

Module - 1 Introduction to ReactJS
Creating Your First ReactJS Application

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

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 (
      <h1>Hello World!</h1>

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.


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.

Recommended Courses
Certification in Full Stack Web Development
20,000 people are doing this course
Become a job-ready Full Stack Web Developer in 30 weeks. Join the largest tech community in India. Pay only after you get a job above 5 LPA.
Masters in Computer Science: Software Engineering
20,000 people are doing this course
Join India's only Pay after placement Master's degree in Computer Science. Get an assured job of 5 LPA and above. Accredited by ECTS and globally recognised in EU, US, Canada and 60+ countries.

AlmaBetter’s curriculum is the best curriculum available online. AlmaBetter’s program is engaging, comprehensive, and student-centered. If you are honestly interested in Data Science, you cannot ask for a better platform than AlmaBetter.

Kamya Malhotra
Statistical Analyst
Fast forward your career in tech with AlmaBetter

Vikash SrivastavaCo-founder & CPTO AlmaBetter

Vikas CTO

Related Tutorials to watch

Top Articles toRead

Made with heartin Bengaluru, India
  • Official Address
  • 4th floor, 133/2, Janardhan Towers, Residency Road, Bengaluru, Karnataka, 560025
  • Communication Address
  • 4th floor, 315 Work Avenue, Siddhivinayak Tower, 152, 1st Cross Rd., 1st Block, Koramangala, Bengaluru, Karnataka, 560034
  • Follow Us
  • facebookinstagramlinkedintwitteryoutubetelegram

© 2023 AlmaBetter