React Beginner Notes (Complete Guide with Explanations + Real-life Analogies)
1. What is React?
React is a JavaScript library created by Facebook (now Meta) used for building user interfaces —
especially Single Page Applications (SPAs).
🧠 Real-Life Analogy:
Think of React as Lego blocks. Each block (component) is reusable, and together they build complex
structures (web pages).
🔑 Key Features:
• Component-based: Build UI using small, reusable components.
• Declarative: Describe what UI should look like.
• Virtual DOM: Improves performance by updating only what’s changed.
• One-Way Data Flow: Data flows from parent to child (top to bottom).
2. Setting Up React (Create React App)
🛠️ Steps:
1. Install Node.js
2. In terminal:
npx create-react-app my-app
cd my-app
npm start
This will open the app at http://localhost:3000 .
📦 Files You’ll See:
• public/index.html : Entry HTML file
• src/App.js : Main React component
• src/index.js : Renders React app to HTML
3. JSX (JavaScript XML)
JSX lets you write HTML inside JavaScript. It makes UI easy to understand and build.
1
const name = "Pawan";
return <h1>Hello, {name}</h1>;
Rules:
• Use one parent element inside return.
• Use className instead of class .
• Use {} to add JS expressions.
🧠 Analogy:
JSX is like using a template where you embed variables dynamically.
4. Components
Components are the building blocks of React apps. Think of each component as a mini webpage section.
Types:
Functional Component:
function Welcome() {
return <h1>Hello!</h1>;
}
Class Component:
class Welcome extends React.Component {
render() {
return <h1>Hello!</h1>;
}
}
🔄 Usage:
<Welcome />
5. Props (Properties)
Props are like function parameters. They let you pass data from parent to child.
2
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
<Greeting name="Pawan" />
🧠 Analogy:
Props are like sending ingredients (data) to a chef (child component) to cook something specific.
6. useState (State Hook)
useState allows a component to remember information (like counter value).
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
🔁 What Happens:
• React re-renders component on setCount()
• Initial count is 0
7. Event Handling
React supports built-in browser events (onClick, onChange, etc).
function handleClick() {
alert("Button clicked!");
}
<button onClick={handleClick}>Click</button>
🧠 Tip:
Always define event handler functions outside JSX.
3
8. useEffect (Side Effects)
useEffect runs side effects (like data fetching or timers).
useEffect(() => {
console.log("Component mounted");
}, []);
When Does It Run?
• On first render (like componentDidMount ) if array is []
• On specific changes if you add variables in array
9. Forms in React (Controlled Inputs)
React inputs are controlled using useState .
const [name, setName] = useState("");
<form onSubmit={(e) => {
e.preventDefault();
alert(name);
}}>
<input value={name} onChange={(e) => setName(e.target.value)} />
<button>Submit</button>
</form>
🧠 Controlled Component:
An input field that takes value from React state and updates state on every keypress.
10. Multiple Inputs with One State
Manage multiple fields with a single object state.
const [form, setForm] = useState({ username: "", email: "" });
<input
name="username"
value={form.username}
4
onChange={(e) => setForm({ ...form, [e.target.name]: e.target.value })}
/>
🧠 Explanation:
• name="username" allows dynamic access.
• { ...form } copies existing state, then updates one field.
11. Conditional Rendering
Render different UI based on a condition.
{isLoggedIn ? <Dashboard /> : <Login />}
{loading && <p>Loading...</p>}
12. Lifting State Up
Move state to the common parent if multiple children need to access it.
const [message, setMessage] = useState("");
<MessageInput message={message} setMessage={setMessage} />
<MessageDisplay message={message} />
13. useRef
Access a DOM node or store values that don’t trigger re-render.
const inputRef = useRef();
<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus</button>
🧠 When to use:
• To focus input
• Track previous value
• Store timers/intervals
5
14. Formik + Yup (Form Validation)
Handle form state and validation easily.
const formik = useFormik({
initialValues: { username: "", email: "" },
validationSchema: Yup.object({
username: Yup.string().required("Required"),
email: Yup.string().email("Invalid email").required("Required")
}),
onSubmit: values => alert(JSON.stringify(values))
});
🧠 Real-Life Analogy:
Formik is the form manager. Yup is the gatekeeper that checks input before submission.
Would you like to continue with:
• React Router
• useReducer
• A mini project (Todo App, Login Form, etc)?
