Complete React.
js Notes
React.js Full Notes
1. Introduction to React:
- React is a JavaScript library for building fast, interactive UIs.
- Developed by Facebook.
- It uses a component-based architecture and a virtual DOM for efficient rendering.
2. Features of React:
- JSX (JavaScript XML): HTML-like syntax in JavaScript.
- Components: Reusable, isolated pieces of UI.
- Virtual DOM: Efficient updating of UI.
- Unidirectional Data Flow: Data flows from parent to child.
- Hooks: Functions to manage state and side effects.
3. JSX:
- Allows HTML to be written in JavaScript.
Example:
const element = <h1>Hello, React!</h1>;
4. Components:
- Functional Components: Simple functions that return JSX.
Example:
function Welcome() {
return <h1>Welcome to React!</h1>;
- Class Components: ES6 classes extending React.Component (less common now).
5. Props:
Complete React.js Notes
- Short for "properties". Passed from parent to child.
Example:
function Greet(props) {
return <h1>Hello, {props.name}</h1>;
6. State:
- A way to manage dynamic data.
- useState is a Hook to manage state in functional components.
Example:
const [count, setCount] = useState(0);
7. useEffect Hook:
- Allows side effects like data fetching, subscriptions.
Example:
useEffect(() => {
console.log("Component Mounted");
}, []);
8. Conditional Rendering:
- Using ternary or logical AND (&&) operators.
Example:
{isLoggedIn ? <Dashboard /> : <Login />}
9. Lists and Keys:
- Use map() to render lists. Keys help identify list items.
Example:
{items.map((item) => <li key={item.id}>{item.name}</li>)}
10. Forms in React:
Complete React.js Notes
- Controlled Components using useState for input handling.
Example:
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
11. React Router (react-router-dom):
- Used for navigation in single-page applications.
Components:
- BrowserRouter, Routes, Route, Link, useNavigate
12. Context API:
- For global state management without prop drilling.
Example:
const MyContext = React.createContext();
13. Lifting State Up:
- Share state between components by moving it to the nearest common ancestor.
14. React Project Structure (Basic):
- src/
- components/
- pages/
- App.js
- index.js
15. Best Practices:
- Break UI into small, reusable components.
- Use prop-types for type checking.
- Use keys when rendering lists.
- Maintain clean folder structure.
- Use async/await for async operations.
Complete React.js Notes
This is your complete basic-to-intermediate level React.js guide.