thinking in react slides for students.pptx

React

1. Introduction to React.js Mr. Yasir Arfat

2. What is React.js? A tool for building user interfaces (UIs). Helps developers create reusable pieces of UI called components . Makes websites faster and easier to update . Why Use React? Speed : React updates parts of the page quickly. Reusability : Write once, use it everywhere! Simplicity : Focus on what the page should look like. Introduction

3. Components : Think of them as LEGO blocks to build your UI. JSX : A mix of HTML and JavaScript. Virtual DOM : Keeps React apps fast by updating only the changed parts. Data Flow : Info flows in one direction , making your app predictable and clean. Core Features of React.js

4. Break your page into small components . Example: Header, Menu, Content, Footer. Plan how these components will work together . Keep track of what should change (state) and what should stay the same. Pass information down through props . Thinking in React.js

5. Plan Your App : Sketch or imagine your design. Break It Down : Divide into Header, Sidebar, Content, etc. Build Each Component : Write small bits of code for each. Use return to describe what they should display. Put It Together : Combine components to complete the app. Building an App Using Components

6. ReactDOM : Places your React app into the browser . JSX : Write <h1>Hello!</h1> inside JavaScript instead of document.createElement . Babel : Converts JSX into JavaScript the browser understands. ReactDOM , JSX, and Babel

7. Write a function or class that outputs HTML-like code. Example:jsx function Welcome() { return <h1>Welcome to React!</h1>; } Use this component in other parts of your app! Creating Custom Components

8. Props = properties extra info you send to a component . Example:jsx function Welcome(props) { return <h1>Hello, {props.name}!</h1 >; } Dynamic : Change props, and the UI updates automatically. Introduction to Props

9. Use the className property . Example:jsx <h1 className ="title">Hello!</h1> Link your CSS file for custom styles. Adding CSS Classes to JSX

10. Show or Hide things based on a condition . Example:jsx const isLoggedIn = true; return <h1>{ isLoggedIn ? 'Welcome!' : 'Please Log In'}</h1>; Conditional JSX

11. PropTypes : Ensure props are of the right type . DefaultProps : Set a prop’s default value . Example:jsx Welcome.defaultProps = { name : "Guest" }; PropTypes and DefaultProps

12. State = Data that changes inside a component . Example:jsx const [count, setCount ] = useState (0); Use setState to update it safely. State Concepts

13. To Children : Send it using props . To Parents : Use callback functions. Passing State

14. Think of components as a tree : Root = Main app. Branches = Components. Component Architecture

15. A copy of the real DOM . React compares the old and new DOM to make updates quickly . Virtual DOM

16. Add actions like clicks: Example: jsx < button onClick ={ handleClick }>Click Me</button> Events in React

17. Use fetch() or Axios to get data . Example:jsx useEffect (() => { fetch ('https://api.example.com/data') . then(response => response.json ()) . then(data => setData (data)); }, []); Fetching Data From an API

18. Phases: Mounting : When the component first appears. Updating : When state or props change. Unmounting : When the component is removed. Component Lifecycle