React Complete Beginner Notes
1. Introduction to React
React is a JavaScript library developed by Facebook for building user interfaces, especially for Single Page
Applications (SPAs). It allows you to create reusable components that update efficiently when data changes.
Key Features:
- Component-based architecture
- Virtual DOM for performance
- Unidirectional data flow
- JSX syntax
2. React Setup and Create React App
To create a new React project:
1. Install Node.js and npm
2. Run: npx create-react-app my-app
3. Navigate: cd my-app
4. Start server: npm start
This runs the app at http://localhost:3000 with a live development server.
3. JSX (JavaScript XML)
JSX allows writing HTML-like code in JavaScript. React converts JSX into `React.createElement` calls.
Example:
const name = "Pawan";
return <h1>Hello, {name}</h1>;
React Complete Beginner Notes
Rules:
- One parent element per return
- Use `className` instead of `class`
- JS expressions go inside curly braces {}
4. Components in React
React components can be Functional or Class-based.
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 allow passing data from parent to child components.
Example:
React Complete Beginner Notes
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
Usage:
<Greeting name="Pawan" />
Output: Hello, Pawan!
6. useState Hook
The useState hook adds state to functional components.
Example:
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
It rerenders the component on state change.
7. Event Handling
React supports events like onClick, onChange.
Example:
function handleClick() {
alert("Button clicked!");
React Complete Beginner Notes
<button onClick={handleClick}>Click Me</button>
8. useEffect Hook
useEffect lets you perform side effects like data fetching.
Syntax:
useEffect(() => {
// Code here
}, [dependencies]);
Empty dependency array [] means it runs only once.
9. Fetching API Data
You can use useEffect to fetch data when the component loads.
Example:
useEffect(() => {
fetch("https://randomuser.me/api/")
.then(res => res.json())
.then(data => setUser(data.results[0]));
}, []);
10. React Context & useContext
Context lets you share data globally without prop drilling.
React Complete Beginner Notes
1. Create context: const UserContext = React.createContext();
2. Provide context:
<UserContext.Provider value={{ name: "Pawan" }}>
<Child />
</UserContext.Provider>
3. Use context:
const user = useContext(UserContext);
11. useReducer Hook
useReducer is for complex state logic.
Syntax:
const [state, dispatch] = useReducer(reducer, initialState);
Reducer example:
function reducer(state, action) {
switch(action.type) {
case 'INCREMENT': return { count: state.count + 1 };
Dispatch action:
dispatch({ type: 'INCREMENT' })
12. React Router
Used for navigation between pages in React apps.
React Complete Beginner Notes
Install: npm install react-router-dom
Basic setup:
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
Use <Link to="/">Home</Link> to navigate.
13. Custom Hooks
Custom hooks are reusable logic using other hooks.
Example:
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
Usage: const data = useFetch("url");
14. Lifting State Up
React Complete Beginner Notes
When two components share state, move the state to their nearest common parent.
Example:
const [msg, setMsg] = useState("");
Pass down via props:
<Input msg={msg} setMsg={setMsg} />
<Display msg={msg} />
15. Conditional Rendering
Show or hide elements based on condition.
1. if/else
2. Ternary: condition ? <A /> : <B />
3. Logical &&: show && <Component />
Example:
{loading ? <p>Loading...</p> : <p>Done!</p>}
