Training Example: React – Review the Data, Give Your Score & Compare to the Real AI Evaluation

[IMG: logo by @sawaratsuki1004]
[H1] React
The library for web and native user interfacesLearn ReactAPI Reference
[H2] Create user interfaces from components
React lets you build user interfaces out of individual pieces called components. Create your own React components like Thumbnail, LikeButton, and Video. Then combine them into entire screens, pages, and apps.Whether you work on your own or with thousands of other developers, using React feels the same. It is designed to let you seamlessly combine components written by independent people, teams, and organizations.
[H2] Write components with code and markup
React components are JavaScript functions. Want to show some content conditionally? Use an if statement. Displaying a list? Try array map(). Learning React is learning programming.This markup syntax is called JSX. It is a JavaScript syntax extension popularized by React. Putting JSX markup close to related rendering logic makes React components easy to create, maintain, and delete.
[H2] Add interactivity wherever you need it
React components receive data and return what should appear on the screen. You can pass them new data in response to an interaction, like when the user types into an input. React will then update the screen to match the new data.You don’t have to build your whole page in React. Add React to your existing HTML page, and render interactive React components anywhere on it.Add React to your page
[H2] Go full-stack with a framework
React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js or React Router.React is also an architecture. Frameworks that implement it let you fetch data in asynchronous components that run on the server or even during the build. Read data from a file or a database, and pass it down to your interactive components.Get started with a framework
[H2] Use the best from every platform
People love web and native apps for different reasons. React lets you build both web apps and native apps using the same skills. It leans upon each platform’s unique strengths to let your interfaces feel just right on every platform.With React, you can be a web and a native developer. Your team can ship to many platforms without sacrificing the user experience. Your organization can bridge the platform silos, and form teams that own entire features end-to-end.Build for native platforms
[H2] Upgrade when the future is ready
React approaches changes with care. Every React commit is tested on business-critical surfaces with over a billion users. Over 100,000 React components at Meta help validate every migration strategy.The React team is always researching how to improve React. Some research takes years to pay off. React has a high bar for taking a research idea into production. Only proven approaches become a part of React.Read more React newsLatest React News
[H2] The React Foundation: A New Home for React Hosted by the Linux Foundation
February 24, 2026
[H2] Additional Vulnerabilities in RSC
December 11, 2025
[H2] Vulnerability in React Server Components
December 3, 2025
[H2] React Conf 2025 Recap
October 16, 2025Read more React news
[H2] Join a community of millions
You’re not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.
[IMG: People singing karaoke at React Conf]
[IMG: Sunil Pai speaking at React India]
[IMG: A hallway conversation between two people at React Conf]
[IMG: A hallway conversation at React India]
[IMG: Elizabet Oliveira speaking at React Conf]
[IMG: People taking a group selfie at React India]
[IMG: Nat Alison speaking at React Conf]
[IMG: Organizers greeting attendees at React India]
[IMG: People singing karaoke at React Conf]
[IMG: Sunil Pai speaking at React India]
[IMG: A hallway conversation between two people at React Conf]
[IMG: A hallway conversation at React India]
[IMG: Elizabet Oliveira speaking at React Conf]
[IMG: People taking a group selfie at React India]
[IMG: Nat Alison speaking at React Conf]
[IMG: Organizers greeting attendees at React India]
This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It’s a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.
[IMG: logo by @sawaratsuki1004]
[H2] Welcome to the React community
Get Started

Learn ReactCopy pageCopy
[H1] Quick Start
Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.
[H3] You will learn
How to create and nest components
How to add markup and styles
How to display data
How to render conditions and lists
How to respond to events and update the screen
How to share data between components
[H2] Creating and nesting components
React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
React components are JavaScript functions that return markup:
function MyButton() { return ( <button>I'm a button</button> );}
Now that you’ve declared MyButton, you can nest it into another component:
export default function MyApp() { return ( <div> <h1>Welcome to my app</h1> <MyButton /> </div> );}
Notice that <MyButton /> starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.
Have a look at the result:
App.jsApp.jsReloadClearForkfunction MyButton() {
return (
<button>
I'm a button
</button>
);
}
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}
Show more
The export default keywords specify the main component in the file. If you’re not familiar with some piece of JavaScript syntax, MDN and javascript.info have great references.
[H2] Writing markup with JSX
The markup syntax you’ve seen above is called JSX. It is optional, but most React projects use JSX for its convenience. All of the tools we recommend for local development support JSX out of the box.
JSX is stricter than HTML. You have to close tags like <br />. Your component also can’t return multiple JSX tags. You have to wrap them into a shared parent, like a <div>...</div> or an empty <>...</> wrapper:
function AboutPage() { return ( <> <h1>About</h1> <p>Hello there.<br />How do you do?</p> </> );}
If you have a lot of HTML to port to JSX, you can use an online converter.
[H2] Adding styles
In React, you specify a CSS class with className. It works the same way as the HTML class attribute:
<img className="avatar" />
Then you write the CSS rules for it in a separate CSS file:
/* In your CSS */.avatar { border-radius: 50%;}
React does not prescribe how you add CSS files. In the simplest case, you’ll add a <link> tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
[H2] Displaying data
JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display user.name:
return ( <h1> {user.name} </h1>);
You can also “escape into JavaScript” from JSX attributes, but you have to use curly braces instead of quotes. For example, className="avatar" passes the "avatar" string as the CSS class, but src={user.imageUrl} reads the JavaScript user.imageUrl variable value, and then passes that value as the src attribute:
return ( <img className="avatar" src={user.imageUrl} />);
You can put more complex expressions inside the JSX curly braces too, for example, string concatenation:
App.jsApp.jsReloadClearForkconst user = {
name: 'Hedy Lamarr',
imageUrl: 'https://react.dev/images/docs/scientists/yXOvdOSs.jpg',
imageSize: 90,
};
export default function Profile() {
return (
<>
<h1>{user.name}</h1>
<img
className="avatar"
src={user.imageUrl}
alt={'Photo of ' + user.name}
style={{
width: user.imageSize,
height: user.imageSize
}}
/>
</>
);
}
Show more
In the above example, style={{}} is not a special syntax, but a regular {} object inside the style={ } JSX curly braces. You can use the style attribute when your styles depend on JavaScript variables.
[H2] Conditional rendering
In React, there is no special syntax for writing conditions. Instead, you’ll use the same techniques as you use when writing regular JavaScript code. For example, you can use an if statement to conditionally include JSX:
let content;if (isLoggedIn) { content = <AdminPanel />;} else { content = <LoginForm />;}return ( <div> {content} </div>);
If you prefer more compact code, you can use the conditional ? operator. Unlike if, it works inside JSX:
<div> {isLoggedIn ? ( <AdminPanel /> ) : ( <LoginForm /> )}</div>
When you don’t need the else branch, you can also use a shorter logical && syntax:
<div> {isLoggedIn && <AdminPanel />}</div>
All of these approaches also work for conditionally specifying attributes. If you’re unfamiliar with some of this JavaScript syntax, you can start by always using if...else.
[H2] Rendering lists
You will rely on JavaScript features like for loop and the array map() function to render lists of components.
For example, let’s say you have an array of products:
const products = [ { title: 'Cabbage', id: 1 }, { title: 'Garlic', id: 2 }, { title: 'Apple', id: 3 },];
Inside your component, use the map() function to transform an array of products into an array of <li> items:
const listItems = products.map(product => <li key={product.id}> {product.title} </li>);return ( <ul>{listItems}</ul>);
Notice how <li> has a key attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items.
App.jsApp.jsReloadClearForkconst products = [
{ title: 'Cabbage', isFruit: false, id: 1 },
{ title: 'Garlic', isFruit: false, id: 2 },
{ title: 'Apple', isFruit: true, id: 3 },
];
export default function ShoppingList() {
const listItems = products.map(product =>
<li
key={product.id}
style={{
color: product.isFruit ? 'magenta' : 'darkgreen'
}}
>
{product.title}
</li>
);
return (
<ul>{listItems}</ul>
);
}
Show more
[H2] Responding to events
You can respond to events by declaring event handler functions inside your components:
function MyButton() { function handleClick() { alert('You clicked me!'); } return ( <button onClick={handleClick}> Click me </button> );}
Notice how onClick={handleClick} has no parentheses at the end! Do not call the event handler function: you only need to pass it down. React will call your event handler when the user clicks the button.
[H2] Updating the screen
Often, you’ll want your component to “remember” some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add state to your component.
First, import useState from React:
import { useState } from 'react';
Now you can declare a state variable inside your component:
function MyButton() { const [count, setCount] = useState(0); // ...
You’ll get two things from useState: the current state (count), and the function that lets you update it (setCount). You can give them any names, but the convention is to write [something, setSomething].
The first time the button is displayed, count will be 0 because you passed 0 to useState(). When you want to change state, call setCount() and pass the new value to it. Clicking this button will increment the counter:
function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <button onClick={handleClick}> Clicked {count} times </button> );}
React will call your component function again. This time, count will be 1. Then it will be 2. And so on.
If you render the same component multiple times, each will get its own state. Click each button separately:
App.jsApp.jsReloadClearForkimport { useState } from 'react';
export default function MyApp() {
return (
<div>
<h1>Counters that update separately</h1>
<MyButton />
<MyButton />
</div>
);
}
function MyButton() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<button onClick={handleClick}>
Clicked {count} times
</button>
);
}
Show more
Notice how each button “remembers” its own count state and doesn’t affect other buttons.
[H2] Using Hooks
Functions starting with use are called Hooks. useState is a built-in Hook provided by React. You can find other built-in Hooks in the API reference. You can also write your own Hooks by combining the existing ones.
Hooks are more restrictive than other functions. You can only call Hooks at the top of your components (or other Hooks). If you want to use useState in a condition or a loop, extract a new component and put it there.
[H2] Sharing data between components
In the previous example, each MyButton had its own independent count, and when each button was clicked, only the count for the button clicked changed:
[IMG: Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. Both MyButton components contain a count with value zero.]
[IMG: Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. Both MyButton components contain a count with value zero.]
Initially, each MyButton’s count state is 0
[IMG: The same diagram as the previous, with the count of the first child MyButton component highlighted indicating a click with the count value incremented to one. The second MyButton component still contains value zero.]
[IMG: The same diagram as the previous, with the count of the first child MyButton component highlighted indicating a click with the count value incremented to one. The second MyButton component still contains value zero.]
The first MyButton updates its count to 1
However, often you’ll need components to share data and always update together.
To make both MyButton components display the same count and update together, you need to move the state from the individual buttons “upwards” to the closest component containing all of them.
In this example, it is MyApp:
[IMG: Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. MyApp contains a count value of zero which is passed down to both of the MyButton components, which also show value zero.]
[IMG: Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. MyApp contains a count value of zero which is passed down to both of the MyButton components, which also show value zero.]
Initially, MyApp’s count state is 0 and is passed down to both children
[IMG: The same diagram as the previous, with the count of the parent MyApp component highlighted indicating a click with the value incremented to one. The flow to both of the children MyButton components is also highlighted, and the count value in each child is set to one indicating the value was passed down.]
[IMG: The same diagram as the previous, with the count of the parent MyApp component highlighted indicating a click with the value incremented to one. The flow to both of the children MyButton components is also highlighted, and the count value in each child is set to one indicating the value was passed down.]
On click, MyApp updates its count state to 1 and passes it down to both children
Now when you click either button, the count in MyApp will change, which will change both of the counts in MyButton. Here’s how you can express this in code.
First, move the state up from MyButton into MyApp:
export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Counters that update separately</h1> <MyButton /> <MyButton /> </div> );}function MyButton() { // ... we're moving code from here ...}
Then, pass the state down from MyApp to each MyButton, together with the shared click handler. You can pass information to MyButton using the JSX curly braces, just like you previously did with built-in tags like <img>:
export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Counters that update together</h1> <MyButton count={count} onClick={handleClick} /> <MyButton count={count} onClick={handleClick} /> </div> );}
The information you pass down like this is called props. Now the MyApp component contains the count state and the handleClick event handler, and passes both of them down as props to each of the buttons.
Finally, change MyButton to read the props you have passed from its parent component:
function MyButton({ count, onClick }) { return ( <button onClick={onClick}> Clicked {count} times </button> );}
When you click the button, the onClick handler fires. Each button’s onClick prop was set to the handleClick function inside MyApp, so the code inside of it runs. That code calls setCount(count + 1), incrementing the count state variable. The new count value is passed as a prop to each button, so they all show the new value. This is called “lifting state up”. By moving state up, you’ve shared it between components.
App.jsApp.jsReloadClearForkimport { useState } from 'react';
export default function MyApp() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<h1>Counters that update together</h1>
<MyButton count={count} onClick={handleClick} />
<MyButton count={count} onClick={handleClick} />
</div>
);
}
function MyButton({ count, onClick }) {
return (
<button onClick={onClick}>
Clicked {count} times
</button>
);
}
Show more
[H2] Next Steps
By now, you know the basics of how to write React code!
Check out the Tutorial to put them into practice and build your first mini-app with React.NextTutorial: Tic-Tac-Toe

BlogCopy pageCopy
[H1] React Blog
This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first.You can also follow the @react.dev account on Bluesky, or @reactjs account on Twitter, but you won’t miss anything essential if you only read this blog.
[H2] The React Foundation: A New Home for React Hosted by the Linux Foundation
February 24, 2026The React Foundation has officially launched under the Linux Foundation.Read more
[H2] Denial of Service and Source Code Exposure in React Server Components
December 11, 2025Security researchers have found and disclosed two additional vulnerabilities in React Server Components while attempting to exploit the patches in last week’s critical vulnerability…Read more
[H2] Critical Security Vulnerability in React Server Components
December 3, 2025There is an unauthenticated remote code execution vulnerability in React Server Components. A fix has been published in versions 19.0.1, 19.1.2, and 19.2.1. We recommend upgrading immediately.Read more
[H2] React Conf 2025 Recap
October 16, 2025Last week we hosted React Conf 2025. In this post, we summarize the talks and announcements from the event…Read more
[H2] React Compiler v1.0
October 7, 2025We’re releasing the compiler’s first stable release today, plus linting and tooling improvements to make adoption easier.Read more
[H2] Introducing the React Foundation
October 7, 2025Today, we’re announcing our plans to create the React Foundation and a new technical governance structure …Read more
[H2] React 19.2
October 1, 2025React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post …Read more
[H2] React Labs: View Transitions, Activity, and more
April 23, 2025In React Labs posts, we write about projects in active research and development. In this post, we’re sharing two new experimental features that are ready to try today, and sharing other areas we’re working on now …Read more
[H2] Sunsetting Create React App
February 14, 2025Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch …Read more
[H2] React v19
December 5, 2024In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we’ll give an overview of the new features in React 19, and how you can adopt them …Read more
[H2] React Compiler Beta Release
October 21, 2024We announced an experimental release of React Compiler at React Conf 2024. We’ve made a lot of progress since then, and in this post we want to share what’s next for React Compiler …Read more
[H2] React Conf 2024 Recap
May 22, 2024Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again …Read more
[H2] React 19 Upgrade Guide
April 25, 2024The improvements added to React 19 require some breaking changes, but we’ve worked to make the upgrade as smooth as possible, and we don’t expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading libraries to React 19 …Read more
[H2] React Labs: What We've Been Working On – February 2024
February 15, 2024In React Labs posts, we write about projects in active research and development. Since our last update, we’ve made significant progress on React Compiler, new features, and React 19, and we’d like to share what we learned.Read more
[H2] React Canaries: Incremental Feature Rollout Outside Meta
May 3, 2023Traditionally, new React features used to only be available at Meta first, and land in the open source releases later. We’d like to offer the React community an option to adopt individual new features as soon as their design is close to final—similar to how Meta uses React internally. We are introducing a new officially supported Canary release channel. It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule.Read more
[H2] React Labs: What We've Been Working On – March 2023
March 22, 2023In React Labs posts, we write about projects in active research and development. Since our last update, we’ve made significant progress on React Server Components, Asset Loading, Optimizing Compiler, Offscreen Rendering, and Transition Tracing, and we’d like to share what we learned.Read more
[H2] Introducing react.dev
March 16, 2023Today we are thrilled to launch react.dev, the new home for React and its documentation. In this post, we would like to give you a tour of the new site.Read more
[H2] React Labs: What We've Been Working On – June 2022
June 15, 2022React 18 was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring…Read more
[H2] React v18.0
March 29, 2022React 18 is now available on npm! In our last post, we shared step-by-step instructions for upgrading your app to React 18. In this post, we’ll give an overview of what’s new in React 18, and what it means for the future…Read more
[H2] How to Upgrade to React 18
March 8, 2022As we shared in the release post, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18…Read more
[H2] React Conf 2021 Recap
December 17, 2021Last week we hosted our 6th React Conf. In previous years, we’ve used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features…Read more
[H2] The Plan for React 18
June 8, 2021The React team is excited to share a few updates:
We’ve started work on the React 18 release, which will be our next major version.
We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18.
We’ve published a React 18 Alpha so that library authors can try it and provide feedback…
Read more
[H2] Introducing Zero-Bundle-Size React Server Components
December 21, 20202020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. To introduce React Server Components, we have prepared a talk and a demo. If you want, you can check them out during the holidays, or later when work picks back up in the new year…Read more
[H3] All release notes
Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the CHANGELOG.md file in the React repository, as well as on the Releases page.
[H3] Older posts
See the older posts.

API ReferenceCopy pageCopy
[H1] React Reference Overview
This section provides detailed reference documentation for working with React. For an introduction to React, please visit the Learn section.
The React reference documentation is broken down into functional subsections:
[H2] React
Programmatic React features:
Hooks - Use different React features from your components.
Components - Built-in components that you can use in your JSX.
APIs - APIs that are useful for defining components.
Directives - Provide instructions to bundlers compatible with React Server Components.
[H2] React DOM
React DOM contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following:
Hooks - Hooks for web applications which run in the browser DOM environment.
Components - React supports all of the browser built-in HTML and SVG components.
APIs - The react-dom package contains methods supported only in web applications.
Client APIs - The react-dom/client APIs let you render React components on the client (in the browser).
Server APIs - The react-dom/server APIs let you render React components to HTML on the server.
Static APIs - The react-dom/static APIs let you generate static HTML for React components.
[H2] React Compiler
The React Compiler is a build-time optimization tool that automatically memoizes your React components and values:
Configuration - Configuration options for React Compiler.
Directives - Function-level directives to control compilation.
Compiling Libraries - Guide for shipping pre-compiled library code.
[H2] ESLint Plugin React Hooks
The ESLint plugin for React Hooks helps enforce the Rules of React:
Lints - Detailed documentation for each lint with examples.
[H2] Rules of React
React has idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications:
Components and Hooks must be pure – Purity makes your code easier to understand, debug, and allows React to automatically optimize your components and hooks correctly.
React calls Components and Hooks – React is responsible for rendering components and hooks when necessary to optimize the user experience.
Rules of Hooks – Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
[H2] Legacy APIs
Legacy APIs - Exported from the react package, but not recommended for use in newly written code.
NextHooks