React is a JavaScript library for building user interfaces from reusable components. The core concepts are components, JSX (HTML-like syntax in JavaScript), props (data passed into components), state (data that changes), events and effects. Learn JavaScript fundamentals first, then React, by building small interactive apps.
Why React exists
As web apps grew more interactive, keeping the page in sync with changing data by hand became messy. React solves this: you describe what the interface should look like for a given state, and React updates the page efficiently when the state changes. It is one of the most widely used front-end tools, with a huge ecosystem and job market.
Before you start
Be comfortable with JavaScript: functions, arrays, objects, array methods like map and filter, destructuring and modules. Starting React too early is one of the most common beginner mistakes. See JavaScript for beginners.
Core concepts
Components
A component is a reusable piece of UI, written as a function that returns markup:
function Welcome() {
return <h1>Welcome to my app</h1>;
}JSX
JSX lets you write HTML-like syntax inside JavaScript. It looks like HTML but has small differences, such as className instead of class.
Props
Props pass data into components, making them reusable:
function Greeting({ name }) {
return <p>Hello, {name}!</p>;
}State
State is data that changes over time, such as a counter or form input. When state changes, React re-renders the component:
const [count, setCount] = useState(0);Events
Respond to user actions with handlers like onClick and onChange.
Effects
Effects (useEffect) handle work outside rendering, such as fetching data. Modern React apps often use frameworks or data libraries for data fetching, but understanding effects is still important.
A first project plan
Build a study planner:
- A form to add subjects and topics.
- A list of topics with checkboxes.
- Filters for done and not done.
- Progress shown as a percentage.
- Data saved in the browser.
- Then fetch motivational quotes or holidays from a public API.
What comes next
Routing between pages, forms and validation, data fetching, TypeScript, and full-stack frameworks such as Next.js. Our web development course teaches React with real projects and code reviews.
Frequently asked questions
Is React a framework or a library?
React itself is a UI library. Frameworks such as Next.js build on React to add routing, server rendering and more.
Should I learn React or Vue or Angular?
React has the largest job market in many regions. Vue and Angular are also good choices; concepts transfer.
Can AI write React code for me?
AI can generate components quickly, but you need to understand React to fix bugs and keep apps maintainable.
