Front-End Web Development in React

Transcript

1. Front-End Web Development in React
2. What is ? Introduction 1 2
3. Q: “How do you eat an Elephant?” A: “One bite at a time”. 3 AKA: When things seem daunting, break them down into smaller chunks. Eventually, those chunks will become understandable.
4. React Component 4
5. 5 A Component is essentially anything that looks like <UppercaseTag>
10. React Component Data 10 props state Component
11. What are Props? 11
12. What is State? 12
13. Props 1. Data that is passed into a component. 2. They are READ-ONLY in nature. React Props vs State State 1. Data that is managed by the component. 2. It is CHANGEABLE in nature. 13
14. Data only flows down in tree React Data Flow 14
15. React Inter-Component Communication 15 Parent Component Child Component Child Component
16. React One Way Data Flow 16 Props Immutable & Passed-on Data State Mutable & Private Data
17. How to ? Introduction 2 17
18. React with JSX 18 ➔ Feels like HTML inside JS ➔ Compiles down to JavaScript ➔ It is Fast due to Optimisations
19. React with JSX Example 19
20. React Component Lifecycle 20 ➔ componentDidMount() ➔ componentDidUpdate() ➔ componentWillMount() ➔ render()
21. React Component Structure 21
22. React Project Structure 22 ➔ Great-grandparent ◆ Grandparent • Parent ◦ Child ◦ Child ◆ Grandparent • Parent ◦ Child ◦ Child