Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Todo List with useState - React Typing CST Test
Todo List with useState — React Code
Simple Todo list with add, remove, and toggle completion using useState.
import React, { useState } from 'react';
const TodoApp = () => {
const [todos, setTodos] = useState([]);
const [task, setTask] = useState('');
const addTodo = () => setTodos([...todos, { task, completed: false }]);
const toggleTodo = index => {
const newTodos = [...todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
};
return (
<div>
<input value={task} onChange={e => setTask(e.target.value)} />
<button onClick={addTodo}>Add</button>
<ul>{todos.map((todo, i) => <li key={i} onClick={() => toggleTodo(i)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.task}</li>)}</ul>
</div>
);
};
export default TodoApp;React Language Guide
React is a declarative, component-based JavaScript library for building user interfaces, primarily for single-page applications. It allows developers to create reusable UI components and manage application state efficiently.
Primary Use Cases
- ▸Single-page web applications (SPAs)
- ▸Dynamic user interfaces for web apps
- ▸Mobile apps via React Native
- ▸Reusable component libraries
- ▸Interactive dashboards and admin panels
Notable Features
- ▸Component-based architecture
- ▸Virtual DOM for optimized rendering
- ▸JSX syntax for combining HTML and JS
- ▸One-way data binding (props)
- ▸Hooks for state and lifecycle management
Origin & Creator
Developed by Jordan Walke at Facebook in 2013.
Industrial Note
React is specialized for building dynamic, responsive web and mobile UIs, particularly in SPA and complex front-end applications.
Quick Explain
- ▸React lets you build interactive UIs using a component-based architecture.
- ▸It uses a virtual DOM to optimize rendering performance.
- ▸Supports declarative programming and one-way data flow.
Core Features
- ▸Declarative UI design
- ▸State management with useState, useReducer
- ▸Side effects handling with useEffect
- ▸Context API for global state
- ▸Integration with routing libraries (React Router)
Learning Path
- ▸Learn JSX and component structure
- ▸Understand props and state
- ▸Practice hooks (useState, useEffect)
- ▸Learn routing and SPA patterns
- ▸Integrate with state management and APIs
Practical Examples
- ▸Dynamic to-do list app
- ▸Interactive forms with validation
- ▸SPA with multiple pages and navigation
- ▸Dashboard with charts and data fetching
- ▸Reusable component library
Comparisons
- ▸More declarative than plain JavaScript DOM manipulation
- ▸Component-based unlike jQuery
- ▸Faster UI updates via virtual DOM
- ▸Not a full framework, flexible with other libraries
- ▸Easier maintenance for large-scale apps
Strengths
- ▸Reusable and maintainable components
- ▸High performance with virtual DOM
- ▸Large community and ecosystem
- ▸Rich tooling and developer support
- ▸Supports both web and mobile (React Native)
Limitations
- ▸Requires build tools (Webpack, Babel) for JSX
- ▸Learning curve for hooks and state management
- ▸Not a full framework (needs routing, state libraries)
- ▸Frequent updates may require learning new APIs
- ▸SEO optimization requires server-side rendering or frameworks like Next.js
When NOT to Use
- ▸For small static websites
- ▸Projects not requiring dynamic UI
- ▸When SEO is critical without SSR
- ▸Low-complexity apps where vanilla JS suffices
- ▸Tight resource environments where bundle size matters
Cheat Sheet
- ▸<MyComponent /> - renders component
- ▸useState(initialValue) - manage state
- ▸useEffect(fn, [deps]) - side effects
- ▸props - pass data from parent
- ▸React Router: <Route path='/'> for routing
FAQ
- ▸Is React a framework or library?
- ▸React is a library for building UIs, not a full framework.
- ▸Does React require a virtual DOM?
- ▸Yes, it uses virtual DOM to optimize rendering.
- ▸Can I use React with existing projects?
- ▸Yes, it can be integrated gradually into existing apps.
- ▸What is React Native?
- ▸A framework for building mobile apps using React.
- ▸Do I need JSX?
- ▸JSX is recommended but you can use plain JS with React.createElement.
30-Day Skill Plan
- ▸Week 1: JSX and functional components
- ▸Week 2: State and props
- ▸Week 3: Event handling and forms
- ▸Week 4: Hooks and side effects
- ▸Week 5: Routing, context, and advanced patterns
Final Summary
- ▸React is a component-based library for building dynamic UIs.
- ▸It leverages virtual DOM for performance.
- ▸Supports declarative and reusable code patterns.
- ▸Works for both web (React) and mobile (React Native).
- ▸Essential for modern front-end development.
Project Structure
- ▸src/index.js - entry point
- ▸src/App.js - main component
- ▸src/components/ - reusable UI components
- ▸src/assets/ - images, fonts, styles
- ▸public/ - static files and HTML template
Monetization
- ▸Develop React web apps or SaaS products
- ▸Create React component libraries
- ▸Offer freelance front-end services
- ▸Teach React via courses
- ▸Contribute to open-source React projects
Productivity Tips
- ▸Use reusable components
- ▸Leverage hooks effectively
- ▸Optimize renders with memoization
- ▸Use context and state wisely
- ▸Automate repetitive tasks and testing
Basic Concepts
- ▸JSX: HTML-like syntax in JavaScript
- ▸Components: functional and class-based
- ▸Props: data passed from parent to child
- ▸State: local component data
- ▸Hooks: useState, useEffect, useContext, useReducer