⚛️ Introduction to React Basics
React is a popular JavaScript library for building interactive user interfaces. Here's a rundown of the core concepts every beginner should know:
🧩 1. Components
React apps are built using components, which are reusable, self-contained UI blocks.
- Functional Components – Most common and modern approach.
- Class Components – Older style using ES6 classes.
📝 2. JSX (JavaScript XML)
JSX allows writing HTML-like syntax directly in JavaScript:
jsx
const element = <h1>Hello, world!</h1>;
It improves readability and keeps markup and logic in the same place.
🔁 3. State
State lets a component keep track of changing data:
jsx
import { useState } from 'react';
const Example = () => {
const [count, setCount] = useState(0);
return <p>{count}</p>;
};
📦 4. Props
Props (short for "properties") allow data to flow from parent to child components:
jsx
const Welcome = ({ name }) => <h1>Hello, {name}!</h1>;
Props are read-only and help make components dynamic and reusable.
🔄 5. Hooks
Hooks enable state and lifecycle features in functional components:
useState – For managing state.useEffect – For side effects like fetching data.useContext, useRef, etc. – For advanced use cases.
🔁 6. Lifecycle (Class Components)
If you're using class components, React provides lifecycle methods like:
componentDidMount()componentDidUpdate()componentWillUnmount()
🖼️ 7. Rendering
React uses a virtual DOM to efficiently update the UI based on state and props.
🖱️ 8. Event Handling
React uses camelCase for event handling like onClick, onChange, etc.:
jsx
<button onClick={handleClick}>Click Me</button>
✅ Simple Example: Counter Component
Here’s a complete example demonstrating useState, JSX, event handling, and rendering:
jsx
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<h1>Counter</h1>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
</div>
);
};
export default Counter;
📚 Summary
React makes building interactive user interfaces simple and modular. By understanding components, state, props, hooks, and JSX, you're on your way to becoming a proficient React developer.