# Unit 5: ReactJS (CA225) ## Introduction, Installation and Setup - **React** is an open-source JavaScript **library** (Facebook/Meta, 2013) for building user interfaces from reusable components. - Setup: install Node.js; `npx create-react-app myapp` (or `npm create vite@latest`); `npm start`. - Structure: `public/index.html`, `src/index.js`, `App.js`, `package.json`. ## Features - **Virtual DOM** (efficient diffing and updating), **component based**, **JSX**, **one-way data flow**, declarative, fast rendering, strong ecosystem, React Native for mobile. ## Angular vs React | Angular | React | |---|---| | Full framework | UI library | | TypeScript | JavaScript/JSX (TS optional) | | Two-way binding | One-way binding | | Real DOM with change detection | Virtual DOM | | Built-in routing, forms, HTTP | Needs extra libraries | | Steeper learning curve | Easier start | ## JSX - Syntax extension that lets you write HTML-like markup in JavaScript: `const el =

Hello, {name}

;` Compiled to `React.createElement`. Rules: one root element, `className`, `htmlFor`, camelCase attributes, expressions in `{}`, self-close tags. ## Components - **Functional**: `function Welcome(props){ return

Hi {props.name}

; }`; uses **Hooks** (`useState`, `useEffect`). - **Class**: `class Welcome extends React.Component { render(){ return

Hi

; } }`. - Component names start with a capital letter. ## Render Lists and Conditional Rendering - Lists: `items.map(i =>

{i.name}

)`; unique **key** needed. - Conditional: `if`, ternary `{ok ? : }`, logical `{show && }`. ## State and Props - **Props**: read-only inputs passed from parent to child. - **State**: component's internal changeable data: `const [count, setCount] = useState(0);` or `this.setState({count:1})`; state change triggers re-render. ## Component Lifecycle - Phases: **Mounting** (`constructor`, `render`, `componentDidMount`), **Updating** (`shouldComponentUpdate`, `render`, `componentDidUpdate`), **Unmounting** (`componentWillUnmount`). - Hooks: `useEffect(() => { ... return cleanup; }, [deps])` replaces these. **[Figure: React component lifecycle]** Three phases: mounting, updating, unmounting with the associated methods. ## Forms, Validation and Controlled Components - **Controlled component**: form value stored in state with `value` and `onChange` handler; React is the single source of truth. Validation by checking state on change or submit and showing error messages; libraries: Formik, React Hook Form. ## Events - camelCase handlers `onClick={handle}`, synthetic events, `event.preventDefault()`. ## REST APIs with Axios - `axios.get(url).then(res => setData(res.data));` also `post`, `put`, `delete`; in `useEffect`; handle errors with `catch`; alternative `fetch`. ## Routing with React Router - `BrowserRouter`, `Routes`, `Route path="/about" element={}`, `Link`, `useParams`, `useNavigate`. ## Redux - State management library with a **single store**, **actions**, **reducers** (pure functions), `dispatch`, `Provider`, `useSelector`, `useDispatch`; Redux Toolkit. ## Deploying and Testing - `npm run build` creates a production build; deploy to Netlify, GitHub Pages, Vercel or a server. - **Jest** with React Testing Library: `test("renders", () => { render(); expect(screen.getByText(/hi/i)).toBeInTheDocument(); });` run `npm test`. ## Likely Exam Questions 1. What is ReactJS? List its features. 2. Differentiate between Angular and React. 3. Explain JSX with an example. 4. Differentiate between state and props. 5. Explain the React component lifecycle. 6. How are REST APIs consumed using Axios? Explain React Router and Redux.