React Home

Learn React

• React is a powerful JavaScript library for crafting dynamic user interfaces.
• React simplifies the development of interactive single-page applications.
• React enables the creation of modular and reusable UI components.

Learning by Examples

Our React Demo Tool provides a seamless way to showcase React in action, displaying both the code and its output instantly.

Example:

import React from "react";
import ReactDOM from "react-dom/client";

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

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render();

What This Does:

• Defines a functional component Welcome that accepts props.
• Uses {props.name} to dynamically display a name.
• Renders the component inside the #root element, passing "Sahand" as a prop.

Create React App

To start learning and experimenting with React, you need to set up a React development environment on your system.

This guide utilizes create-react-app to simplify the setup process.

The create-react-app tool is the official and recommended way to initialize React projects.

Before proceeding, ensure that Node.js is installed, as it is required to run create-react-app

Navigate to your preferred directory in the terminal and execute the following command to generate a new React application:

npx create-react-app my-react-app

This command will automatically configure everything needed for a fully functional React application.

Important : If you have previously installed create-react-app globally, it's best to remove it to allow npx to fetch the latest version. Use the following command to uninstall it:

npm uninstall -g create-react-app 

Launching Your React Application

To navigate into your newly created React project, run the following command:

cd my-react-app

Next, start your React application by executing:

npm start

This will launch a new browser window displaying your React app. If it doesn’t open automatically, manually visit http://localhost:3000/ in your browser.

Now your React app is up and running!