Hello, I’m Chiranthan Y, a budding software developer. I’m here to provide you with a step-by-step guide on building your first web app with React.js.

What is react.js

React.js is an open-source JavaScript library for building user interfaces (UIs). Developed by Facebook(Meta), it offers a component-based architecture for creating reusable UI elements. React’s virtual DOM ensures efficient updates, enhancing performance. Developers use JSX to define the UI structures, and It also provides a component lifecycle, which supports tasks like data handling and event management. With a vast community and ecosystem, It is a popular choice for developing interactive web applications.

This guide will help you set up your first web app using React. We will take a step-by-step approach to provide a clear understanding of React’s purpose and how to build a React app.

Prerequisites

Before you start building your first app with React.js, a few prerequisites are to be noted :

Basic Web App Development Knowledge: Familiarity with HTML, CSS, and JavaScript is key things for building the React.js app.

Text Editor or IDE: Install a code editor like Visual Studio Code or Sublime Text to write and manage your React code efficiently.

Node.js & npm: Ensure Node.js is installed on your system as React development relies on it for package management and tooling.

Browser: A Modern web browser such as Chrome or Firefox is necessary for testing and debugging your React app.

These prerequisites set a solid foundation for diving into React.js development and building your first web application.

Setting up the Project

Step 1: Installation

First, ensure you have Node.js and npm installed. Then, open your terminal and run this command below.

npx create-react-app my-react-app

This command creates a new React app named “my-react-app.”

Step 2: Project Structure

After initialization, your project structure will look like this:

• node_modules: Contains project dependencies.
• public: Holds static assets like HTML and favicon.ico.
• src: Main source code directory.
• index.js: Entry point for your app, where ReactDOM renders the root component.
• App.js: The root component where you build your app's structure.
• App.css: CSS file for styling the App component.
• index.css: Global CSS file for styling.
• logo.svg: An example logo image.
• package.json: Manages project dependencies and scripts.
• README.md: Documentation for your app.

Step 3: Running the App

Use the following commands to navigate into your project directory and start the development server:

cd my-react-app
npm start

This will launch you React app at http://localhost:3000.

Creating your First Component

Creating your first component in React is an exciting step in building your web application. Here is a guide to create a component in your first React App.

Step 1: Import React

Create a file named MyComponent.js in a src directory and import the React at the top of the file.ja

import React from "react";

Step 2 : Define the component

Create an functional component by writing a JavaScript function. Components in React are essentially JavaScript function that return JSX(JavaScript XML) to describe the component’s structure and appearance.

const MyComponent = () => {
 return (
 <div>
 <h1>Hello this my First React Component</h1>
 </div>
 );
};

Step 3: Export the Component

Export your component so that it can be used in others parts of yout application.

export default MyComponent;

Step 4: Using the component

In another part of your application, you can import and use your component like this. we will import our new component in app.js file.

import "./App.css";
import MyComponent from "./MyComponent";

function App() {
 return (
 <div className="App">
 <MyComponent />
 </div>
 );
}

export default App;

Now, when you render App, it will include your MyComponent, displaying "Hello this my First React Component" on your webpage. This is the foundational process of creating and using components in React.

Conclusion

In this guide, you’ve learned the basics of making your first web app using React.js. You’ve figured out how to start a React project and create your first piece of it, called a component. These are the first steps to becoming good at React. With React, you can make websites that move and respond to what people do on them. As you get better, you can learn more advanced things like how to manage information navigate between different parts of your app, and add cool features. React is popular and lots of people use it, so you’ll have help along the way. Keep learning and have fun building great web apps!