Creating first React app

Introduction

React helps you build interactive web pages easily. Creating your first React app shows you how to start using React step-by-step.

You want to build a website that updates parts of the page without reloading.

You want to learn how to make reusable pieces of a webpage called components.

You want to practice writing JavaScript that works with HTML in a simple way.

You want to create a project that can grow bigger with many interactive parts.

Syntax

React

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

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Use function App() to create a component that returns HTML-like code called JSX.

Use ReactDOM.createRoot and root.render to show your component on the webpage.

Examples

A simple component that shows a heading.

React

function App() {
  return <h1>Welcome to React!</h1>;
}

This code finds the webpage spot with id 'root' and puts your App component there.

React

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Sample Program

This React app shows a heading and a paragraph on the page. It uses a component called App and renders it inside the element with id root.

React

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

function App() {
  return (
    <main>
      <h1>Hello, React!</h1>
      <p>This is your first React app.</p>
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Important Notes

Make sure your HTML file has a <div id="root"></div> where React can put your app.

Use a tool like Create React App or Vite to set up your project easily.

JSX looks like HTML but it is JavaScript. Always return one parent element from your component.

Summary

React apps are built from components that return JSX.

You render your main component inside a webpage element with an id like 'root'.

Creating your first React app helps you start building interactive web pages.