React interfaces are built by composing JavaScript components: functions that return UI, receive data through props, and use state to respond to interaction. This tutorial starts with those fundamentals, builds a small searchable list, then explains when Effects and different application setups belong in a React project.
Choose a starting point for your React project
React describes itself as “a JavaScript library for rendering user interfaces (UI).” You can learn it in an online sandbox, add it to an existing site, build a small project from scratch, or start a new application with a framework. The right route depends on whether you are learning, extending a site, or building a complete app. React: Describing the UI · React: Installation
| Starting point | Best fit | Trade-off |
|---|---|---|
| Online sandbox | Trying components and examples without installing software. | Useful for learning, but not a complete local application workflow. |
| Framework | A new full application that needs integrated conventions for common app tasks. | You adopt the framework’s structure and conventions. React’s documentation lists Next.js and React Router among framework options. React: Creating a React App |
| From-scratch setup with a build tool | Learning fundamentals or meeting constraints that make a framework unsuitable. | You must choose solutions for routing, data fetching, and other common patterns yourself. React: Creating a React App |
| Add React to an existing website | Introducing React gradually, such as for an interactive part of a site. | The surrounding site and the React portion may have separate conventions and setup. |
For a new app, current React guidance recommends starting with a framework rather than treating a bare build-tool setup as the universal default. Create React App has been deprecated; it is not the current recommended starting point. React: Installation
Start with components and JSX
A component is a reusable piece of UI. In the common case, it is a JavaScript function whose name starts with a capital letter and whose return value describes what React should display. Components can be nested and composed to form a page. JSX is an HTML-like syntax extension for JavaScript that most React projects use; it is optional, and JSX itself is distinct from React. React: Describing the UI
#1 Best Overall
function Welcome() {
return <h1>Hello, React!</h1>;
}
export default function App() {
return (
<main>
<Welcome />
<p>This page is composed from components.</p>
</main>
);
}Here, Welcome is a component used inside App. The angle-bracket syntax resembles HTML, but it is JSX written inside JavaScript. In a project using JSX, a build setup transforms that syntax for the browser.
JSX details to remember
- Return a single enclosing element, or use a fragment such as
<>...</>when you do not want an extra DOM element. - Use
classNamefor a CSS class and camelCase for many JSX attributes, such asonClick. - Use braces to put a JavaScript expression into JSX:
<p>{message}</p>.
Pass data with props
Props are inputs passed from a parent component to a child. They let one component render different content without duplicating its structure. A component should treat its props as read-only; when displayed data needs to change in response to interaction, state is the usual mechanism.
function Greeting({ name }) {
return <p>Hello, {name}!</p>;
}
function App() {
return <Greeting name="Mina" />;
}The parent supplies the name prop, and Greeting uses it in its rendered output. Props can also carry arrays, objects, callbacks, or other values as the application requires.
Render conditions and lists
Because JSX is JavaScript, use ordinary JavaScript expressions to decide what to display. A conditional expression is useful for choosing between two outputs; && can display an element only when a condition is true.
function Status({ isSignedIn }) {
return (
<p>{isSignedIn ? "Welcome back" : "Please sign in"}</p>
);
}For repeated content, transform an array with map. Give each rendered item a stable key so React can track it when items are inserted, removed, or reordered.
const topics = ["Components", "Props", "State"];
function TopicList() {
return (
<ul>
{topics.map(topic => (
<li key={topic}>{topic}</li>
))}
</ul>
);
}Respond to events with state
An event handler runs in response to an action, such as a click or typing. State stores component-specific information that can change over time. Updating state asks React to render again with the new value; do not change a state variable directly. React’s guide covers events and state as central parts of interactive UI. React: Adding Interactivity
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}useState(0) sets the initial value. It returns the current value and a setter function. Clicking the button invokes the handler, updates state, and causes React to show the new count.
Build a searchable list
This small example combines components, props, list rendering, events, and state. The list itself is fixed data; the query is state. The visible results are calculated from the data and query during rendering, so there is no need to store a second state value for the filtered list.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →import { useState } from "react";
const videos = [
{ id: 1, title: "Components and JSX" },
{ id: 2, title: "Props and reusable UI" },
{ id: 3, title: "State and events" },
{ id: 4, title: "Effects and external systems" },
];
function VideoList({ items }) {
return (
<ul>
{items.map(video => (
<li key={video.id}>{video.title}</li>
))}
</ul>
);
}
export default function App() {
const [query, setQuery] = useState("");
const matchingVideos = videos.filter(video =>
video.title.toLowerCase().includes(query.toLowerCase())
);
return (
<main>
<h1>React learning videos</h1>
<label>
Search videos
<input
value={query}
onChange={event => setQuery(event.target.value)}
/>
</label>
{matchingVideos.length > 0
? <VideoList items={matchingVideos} />
: <p>No matching videos.</p>}
</main>
);
}How the example works
queryis the changing input value. The input is controlled by React because itsvaluecomes from state andonChangeupdates that state.matchingVideosis derived from the current query and source array. It is recalculated during rendering; keeping it as separate state would add synchronization work without adding information.VideoListreceives its items through props and renders each with a stable identifier as its key.- The conditional expression shows either the list or an empty-results message.
Use Effects only to synchronize with external systems
An Effect is for synchronizing a component with something outside React, such as a browser API, network connection, or third-party widget. It is not a general-purpose place to put calculations or all application logic. Calculate display values during rendering; put logic caused by a particular user action in that event handler. React: Synchronizing with Effects
For example, subscribing to a browser event is synchronization with an external system. The cleanup removes the listener when the component no longer needs it:
import { useEffect, useState } from "react";
function OnlineStatus() {
const [online, setOnline] = useState(navigator.onLine);
useEffect(() => {
function updateStatus() {
setOnline(navigator.onLine);
}
window.addEventListener("online", updateStatus);
window.addEventListener("offline", updateStatus);
return () => {
window.removeEventListener("online", updateStatus);
window.removeEventListener("offline", updateStatus);
};
}, []);
return <p>{online ? "Online" : "Offline"}</p>;
}This browser-specific example assumes it runs where navigator and window exist. In environments that render on a server, browser globals must not be accessed during server rendering; handle that constraint in the application’s framework or component design.
Setup and development tools
For a new project, follow the chosen framework’s current installation instructions. If learning in an existing setup or adding React to a site, use the React installation guide to choose an appropriate path rather than assuming one command fits every project. React’s setup guide also covers editor configuration, TypeScript, React Developer Tools, and React Compiler. React: Installation · React: Setup
Best Value
React Developer Tools is an optional browser extension for inspecting a component tree, examining props and state, and investigating performance problems. It is helpful when debugging, but is not a prerequisite for learning React. For version-sensitive setup details, consult the official React Versions page; it lists React 19.3 as the latest version, released September 9, 2026.
What advanced React work builds on
Advanced work is less about memorizing more syntax than making sound decisions about component boundaries, data flow, and synchronization. The same concepts used in the searchable list apply as an application grows:
Quick Recap
- Component boundaries: split UI into components where it improves reuse, clarity, or independent behavior; pass required data through props.
- State ownership: keep state near the components that use it. When sibling components need the same changing value, place it in their nearest shared parent and pass the value and handlers down.
- Derived data: compute values such as filtered lists from existing inputs instead of maintaining duplicate state that can drift out of sync.
- Effects: reserve them for external synchronization, and provide cleanup when a subscription or resource must be released.
- Application architecture: choose a framework or deliberately select solutions for routing, data fetching, and other app-wide concerns. React’s recommendation to begin a new app with a framework addresses these surrounding choices, not the fundamentals of components and state.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
