What Is React? A Simple Beginner's Guide to the Most Important Concepts

You do not need to learn everything at once. If you understand the ideas below, you understand the core of React.

1. Components

A component is a small, reusable piece of UI. Think of a quiz page. The question box, the options list and the timer can each be a separate component. In modern React, a component is just a JavaScript function that returns some markup.

Example: function Greeting() { return <h1>Namaste!</h1>; }

One rule here: component names must start with a capital letter. React treats lowercase names like div or button as normal HTML tags, and capitalised names like Greeting as your own components.

2. JSX

JSX is the HTML-like code you write inside JavaScript. It looks like HTML, but a build tool turns it into plain JavaScript. JSX has a few rules. You must close every tag, even single ones like <br />. A component must return one parent element, so wrap several tags in a div or in an empty fragment written as <> and </>. In JSX you write className instead of class.

You can put any JavaScript value inside curly braces. Example: <h2>Hello, {user.name}</h2> will show the user's name.

3. Props

Props are the inputs you pass to a component, just like arguments to a function. A parent component sends data down to a child component. For example, <ScoreCard name="Priya" score={18} /> sends a name and a score to ScoreCard. Inside, you read them like this: function ScoreCard({ name, score }) { ... }

Props are read-only. A child should never change the props it receives. If something needs to change, that is a job for state.

4. State and useState

State is a component's memory. It stores data that can change over time, like a counter, the text in a search box, or whether a menu is open. A normal variable does not work for this, because React does not keep it between renders and changing it does not update the screen.

Example: const [count, setCount] = useState(0); Here count is the current value and setCount is the function you call to change it. When you call setCount(count + 1), React remembers the new value and draws the component again.

Each copy of a component has its own private state. If you show two counters on a page, clicking one does not change the other.

5. Events

React lets you respond to user actions like clicks and typing. You write a function and pass it to an element. Example: <button onClick={handleClick}>Submit</button>. Notice there are no brackets after handleClick. You pass the function itself. If you write handleClick(), it runs immediately while the page is drawing, not when the user clicks.

6. Conditional rendering

Often you want to show different things in different situations. React uses normal JavaScript for this. You can use an if statement, the ternary operator, or the && operator. Example: {isLoggedIn ? <Dashboard /> : <LoginForm />} shows the dashboard to logged-in users and the login form to everyone else.

7. Lists and keys

To show a list, you use the JavaScript map() method to turn an array of data into an array of elements. Example: questions.map(q => <li key={q.id}>{q.text}</li>)

The key is very important. It is like a roll number for each item. It helps React know which item was added, removed or moved. Keys must be unique among siblings and must not change. Use a stable ID from your data. Using the array index as a key can cause confusing bugs when items are added, deleted or reordered.

8. Hooks and useEffect

Hooks are special functions whose names start with use, like useState and useEffect. There is one big rule: call Hooks only at the top level of your component. Do not call them inside if conditions, loops or nested functions.

useEffect lets your component sync with something outside React, such as a timer, a browser API or a network connection. It takes a function and a dependency array. If the array is empty, the effect runs after the first render. If it lists values, the effect runs again when those values change. If you leave the array out, it runs after every render. You can return a cleanup function, for example to stop a timer when the component goes away.

How to get started

First, make sure you are comfortable with HTML, CSS and modern JavaScript, especially arrow functions, destructuring, the spread operator and array methods like map and filter. Then install Node.js, which gives you npm, and use a code editor such as VS Code.

The official React docs now recommend starting new apps with a framework, such as Next.js, React Router, or Expo for mobile apps. If you only want to learn the basics, a build tool like Vite gives you a small, fast setup. Avoid Create React App for new projects. The React team deprecated it for new apps in February 2025.

You can also practise in the browser using the free code sandboxes that appear throughout react.dev, with nothing to install.

Common beginner mistakes

• Changing state directly, like user.name = 'Ravi'. Always create a new value and pass it to the setter, for example setUser({ ...user, name: 'Ravi' }).
• Expecting state to update instantly. After calling a setter, the new value appears in the next render, not on the very next line.
• Calling a function in onClick instead of passing it, like onClick={handleClick()}.
• Forgetting keys in lists, or using the array index when items can move.
• Calling Hooks inside if statements or loops.
• Using useEffect for things that can simply be calculated during rendering.
• Starting React before learning basic JavaScript. Most React problems are really JavaScript problems.

A simple learning roadmap

1. Revise HTML, CSS and modern JavaScript (ES6 and later).
2. Read the Quick Start and Tutorial sections on react.dev.
3. Build small components using JSX and props.
4. Add interactivity with events and useState.
5. Practise conditional rendering and lists with keys.
6. Learn useEffect, and learn when you do not need it.
7. Learn routing with React Router or a framework like Next.js.
8. Fetch data from a public API and show it on screen.
9. Build two or three real projects, such as a to-do app, a weather app or a mini quiz app.
10. Explore TypeScript with React and basic testing once the basics feel easy.

Conclusion

React looks big at first, but its core is small. Components, JSX, props, state, events, conditional rendering, lists with keys, and Hooks make up most of what you will use every day. Learn them one by one, build small things, and read the official docs when you are stuck. Then test yourself with practice questions to find your weak spots before an exam or interview.

Browse practice quizzes

Sources

• React (react.dev), Quick Start: https://react.dev/learn
• React (react.dev), State: A Component's Memory: https://react.dev/learn/state-a-components-memory
• React (react.dev), Rendering Lists: https://react.dev/learn/rendering-lists
• React (react.dev), Updating Objects in State: https://react.dev/learn/updating-objects-in-state
• React (react.dev), useEffect reference: https://react.dev/reference/react/useEffect
• React (react.dev), You Might Not Need an Effect: https://react.dev/learn/you-might-not-need-an-effect
• React (react.dev), Creating a React App: https://react.dev/learn/creating-a-react-app
• React Blog, Sunsetting Create React App: https://react.dev/blog/2025/02/14/sunsetting-create-react-app
• React (react.dev), Versions and Blog: https://react.dev/versions
• MDN Web Docs, Getting started with React: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started
• Stack Overflow, 2025 Developer Survey (Technology): https://survey.stackoverflow.co/2025/technology