Scribd
Upload
4 views1 page

reactjs_1week_cheatsheet

This cheat sheet outlines a one-week learning plan for React.js, covering fundamentals, components, state management, and data fetching. Each day focuses on key concepts and practical examples, culminating in a mini project and deployment tips. The guide emphasizes best practices like using function components, controlled inputs, and CSS Modules for styling.

Uploaded by

vadersback04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views1 page

reactjs_1week_cheatsheet

This cheat sheet outlines a one-week learning plan for React.js, covering fundamentals, components, state management, and data fetching. Each day focuses on key concepts and practical examples, culminating in a mini project and deployment tips. The guide emphasizes best practices like using function components, controlled inputs, and CSS Modules for styling.

Uploaded by

vadersback04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

React.

js One-Week Learning Cheat Sheet

Day 1 - Fundamentals & Setup


- React: JavaScript library for building UIs
- SPA: Single Page Application
- JSX: Syntax extension for writing HTML in JS
- Virtual DOM improves performance
Setup:
1. Install Node.js and npm
2. npx create-react-app my-app
3. npm start

Day 2 - Components & Props


- Function components preferred over Class
- Props pass data into components
- JSX rules: one parent element, use {} for JS
Example: <UserCard name='John' age={25} />

Day 3 - State & Events


- useState hook for local state
- Event handling: onClick, onChange, etc.
- Controlled components for inputs
Example: const [count, setCount] = useState(0)

Day 4 - Lists & Conditionals


- Use map() to render lists
- Keys help React identify list items
- Conditional rendering with ternary or &&

Day 5 - useEffect & Data Fetching


- useEffect handles side effects
- Fetch data inside useEffect
Example:
useEffect(() => {
fetch(url).then(res => res.json()).then(data => setData(data))
}, [])

Day 6 - Styling & Structure


- CSS Modules: styleName.module.css
- Tailwind CSS for utility-first styling
- Keep components in /components folder

Day 7 - Mini Project & Deployment


- Project ideas: Weather App, Recipe Finder, Blog
- Deploy with Vercel or Netlify
- Push code to GitHub first

You might also like