Setting Up React: A Beginner’s Guide

Introduction
- Why React?
- Importance of React in Modern Development
Setting Up the Development Environment
- Installing Node.js and npm
- Setting Up React App
Exploring the Project Structure
- Key Files and Folders
Understanding React Basics
- JSX Syntax
- Components and Props
Running and Testing Your React App
- Starting the Development Server
- Observing Outputs
Conclusion

Introduction

Why React?

React, developed by Facebook, is one of the most widely used JavaScript libraries for building dynamic and interactive user interfaces. Its component-based architecture and virtual DOM enable developers to create scalable and high-performance web applications.

According to Google Trends, React consistently ranks among the top front-end development frameworks, outperforming many competitors like Angular and Vue.

Setting Up the Development Environment

Step 1: Installing Node.js and npm

React requires Node.js and npm for its setup. To install:

Visit the Node.js official website.
Download and install the latest stable version.
Verify installation using:

    node -v
    npm -v

1 2	node -v npm -v

Step 2: Creating a React App

Use the following command to initialize a new React project:

    npx create-react-app my-app
    cd my-app

1 2	npx create-react-app my-app cd my-app

This sets up a project with the necessary configuration and dependencies.

Exploring the Project Structure

Key Files in src Folder

App.js: The main component of the application.
index.js: Entry point for rendering the React app.

Key Files in public Folder

index.html: Contains the root <div> where the React app is rendered.

Understanding React Basics

JSX Syntax

React uses JSX, a syntax extension for JavaScript that allows embedding HTML-like structures in JavaScript code.

    function Greeting() {
        return &lt;h1&gt;Hello, World!&lt;/h1&gt;;
    }

function Greeting() {

return <h1>Hello, World!</h1>;

}

Components and Props

React applications are built using reusable components. Props (short for properties) allow components to be dynamic.

    function Welcome(props) {
        return &lt;h1&gt;Welcome, {props.name}!&lt;/h1&gt;;
    }

function Welcome(props) {

return <h1>Welcome, {props.name}!</h1>;

}

Running and Testing Your React App

Starting the Development Server

To run the app:

    npm start

npm start

Open http://localhost:3000 in your browser to view the app.

Observing Outputs

Modify App.js to display custom content. For instance:

    function App() {
        return (
            &lt;div className="App"&gt;
                &lt;h1&gt;My First React App&lt;/h1&gt;
                &lt;p&gt;This is a demo application.&lt;/p&gt;
            &lt;/div&gt;
        );
    }

function App() {

return (

<h1>My First React App</h1>

<p>This is a demo application.</p>

</div>

);

}

Output:

The browser will display the updated content in real time.

Conclusion

React is a powerful tool for building dynamic and scalable web applications. By understanding its basics and setting up the environment, you’ve taken the first step towards mastering modern web development.

S01L01 – Setting up React JS