Introduction to React
1 like155 views
This document is an introduction to React by an experienced software developer, outlining why React is beneficial and its key concepts for users with some programming knowledge. It emphasizes declarative, component-based architecture, the importance of JSX, state management, and various methods for rendering and interaction within React applications. The author encourages a shift in thinking about UI development, focusing on composition and functional programming principles.
Introduction to React
- 2. INTRO TO REACT ABOUT AMBROSE ▸ Glad dad of 6 munchkins. ▸ Making pro software for ~18 years Computer geek since 1987 ▸ Shipped over 45 projects, led over 20. 2 Patents. Sometime dev, arch, UX guy, manager, PM, etc. ▸ 8x Microsoft MVP; Books, Blogs… ▸ Voted Most Likely to Wear a Kilt to Work
- 3. INTRO TO REACT THE PLAN ▸ Why React? The Strange History of Computing that Led Up to this Little Thing We Call React (j/k) ▸ Key Concepts Or what I think is important, anyways. ▸ With the Showing of Some Examples May or may not be in chronological order. ▸ Now for a Limited Time: Things I Wish I’d Known!
- 4. INTRO TO REACT ABOUT YOU? ▸ You have some programming experience, probably a Web developer of some sort. ▸ You are conversant with JavaScript, ideally ES2015+. ▸ You don’t barf at the site of JSX. ▸ You are not a React expert.
- 5. INTRO TO REACT WHY REACT? ▸ Declarative (State-Driven/Functional) ▸ Component-based (Composable) ▸ Flexible Rendering ▸ Client Web ▸ Server (Web) ▸ Native Client (React Native) ▸ High Performing ▸ Minimally Invasive YUUUGE COMMUNITY!
- 6. INTRO TO REACT PREFACE: GETTING REACT ▸https://reactjs.org/ - The Homepage ▸For my examples, using: https://github.com/facebookincubator/create-react-app ▸create-react-app <name> and done ▸Sir Not Appearing in this Film: https://reacttraining.com/react-router/
- 7. THINGS ALWAYS SEEM SIMPLE AT FIRST KEY CONCEPT #1
- 8. JSX THAT HORRIFIC BLEND OF JS AND X KEY CONCEPT #2
- 9. INTRO TO REACT IT’S JUST MARKUP
- 10. INTRO TO REACT IT’S NOT JUST MARKUP
- 11. INTRO TO REACT SOME COMMON DYNAMIC UI SCENARIOS ▸ Conditional Rendering ▸ The && Approach ▸ The ? : Approach ▸ The Strategy Pattern Approach ▸ Repeating
- 12. INTRO TO REACT JUST SAY NO TO SPAGHETTI CODE ▸ Minimize in-JSX JS. Move that to functions and use Strategy Pattern. ▸ Be zealous about composition. But not artificially. Look for the natural boundaries, similar to OOD.
- 13. REACT IS FUNCTIONAL (SORTA) KEY CONCEPT #3
- 14. INTRO TO REACT YOU GOTTA CHANGE YOUR THINKING A BIT ▸ You don’t write code that directly manipulates the DOM (usually—see ‘ref’). ▸ You can’t write code that directly manipulates React elements. ▸ You modify state that signals what you want to React. ▸ You compose elements to achieve outcomes. ▸ Somewhat similar to MVVM (particularly the VVM)
- 15. INTRO TO REACT GET FRIENDLY WITH ARRAY.MAP AND ARRAY.FILTER
- 16. INTRO TO REACT COMPONENT COMMUNICATION PROPS DOWN EVENTS UP
- 17. LIFTING STATE…
- 18. I NEED THAT! ME, TOO!
- 20. lift state up
- 21. pass props down props props
- 22. SPEAKING OF STATE.. WHAT ABOUT LETTING USERS EDIT IT? Some Experienced Developer INTRO TO REACT
- 25. TESTING REACT KEY CONCEPT #5
- 26. INTRO TO REACT THAT’S IT! YOU’VE SEEN… ▸ Key Concepts & How to Do Some Things ▸ Get React into a Page ▸ Make & Compose Components to Layout Your View ▸ Classic vs. Functional Components ▸ How to Do Looping (Repeaters) ▸ Conditional Rendering ▸ How to Handle Interactions ▸ How to Handle User Input ▸ What Else is There?! :D
- 27. REPETITIO MATER STUDIORUM EST. Ancient Dude INTRO TO REACT
- 28. REPETITION IS THE MOTHER OF ALL LEARNING. Dude What Speaks Modern English INTRO TO REACT