React for Beginners: Components, Props & useState
React lets you build a user interface from small, reusable pieces called components. When your data changes, React updates the screen for you.
By Learn Refill Mentors · Updated
Why learn React?
- The most used frontend library in the world
- Reusable components save a lot of time
- Opens the door to Next.js and React Native
1Create a React app with Vite
Vite creates a fast React project in seconds.
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev2Write your first component
A component is a function that returns JSX — HTML-like syntax inside JavaScript.
function Welcome() {
return <h1>Welcome to Learn Refill</h1>;
}
export default Welcome;3Pass data with props
Props are inputs to a component, like arguments to a function.
function CourseCard({ title, price }) {
return <p>{title} — ₹{price}</p>;
}
<CourseCard title="React" price={21999} />4Remember values with useState
State is data that can change. When you update it, React re-renders the component.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}5Render lists with map
Turn an array into elements. Always give each item a unique key.
const skills = ["HTML", "CSS", "React"];
<ul>
{skills.map((s) => <li key={s}>{s}</li>)}
</ul>Common mistakes
- Changing state directly instead of using the setter
- Forgetting the key when rendering lists
- Putting everything in one giant component
Practice task
Build a product list with a search box that filters items as you type, using useState and map.
Frequently asked questions
Is React a framework?
React is a library for building UI. Next.js is a framework built on top of React.
Should I use Vite or Create React App?
Use Vite — it is faster and is the modern standard for new React projects.