THAKURCODER BLOG

Getting Started with React.js: Your First React App

Introduction: React.js is a powerful JavaScript library used for building dynamic and interactive user interfaces. In this tutorial, we'll guide you through setting up your development environment and creating your very first React app. Let's get started!

Prerequisites: Before we begin, ensure you have the following prerequisites:

• A code editor (e.g., Visual Studio Code)
• Node.js and npm (Node Package Manager) installed on your machine. You can download them from the official Node.js website: https://nodejs.org/

Setting Up Your Development Environment:

1. Installing Node.js and npm: To check if Node.js and npm are installed, open your terminal and run the following commands:

node -v
npm -v

If they're not installed, download and install them from https://nodejs.org/.

2. Creating a New React App: To create a new React app, we'll use the Create React App (CRA) tool. Open your terminal and run the following command:

npx create-react-app my-first-react-app

Replace my-first-react-app with your desired app name. This command will generate a new React project with the necessary files and folders.

3. Exploring the Project Structure: Navigate to the project directory using cd my-first-react-app. You'll see the following structure:

my-first-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── ...
├── src/
│   ├── index.js
│   ├── App.js
│   ├── ...
├── package.json
├── ...

Building Your First React Component:

1. Understanding JSX: JSX (JavaScript XML) is a syntax extension for JavaScript that allows us to write HTML-like code within our JavaScript files. It's a fundamental part of React development.

2. Creating a Simple Component: Open the src/App.js file in your code editor. Replace its contents with the following code:

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to your first React app.</p>
    </div>
  );
}

export default App;

Rendering Components:

1. Mounting a Component: To render our App component, open the src/index.js file. Replace its contents with the following code:

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

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