React.js workshop
- 1. React.JS A Beginner Centric Intro Pearl McPhee
- 2. A What, 3 Why’s and 2 How’s
- 3. WHAT
- 4. REACT IS “A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES” - Facebook
- 5. WHY
- 6. ● Popular ● Cutting Edge ● Easy to Adopt Why Should You Learn React?
- 8. Components Building blocks of code that are ideally each responsible for doing one thing. Together they make up the user interface of a React app.
- 9. User Interface Bookmark Yani is ready for the office! :)) #ootd Components
- 10. Yani is ready for the office! :)) #ootd Bookmark
- 11. Component Name Responsibility UI BookmarkButton Render a blue button that says “Bookmark”. FramedPhoto Render an image styled with a thin border PhotoCaption Render a purple block that contains the text caption Card Render a green block that contains the BookmarkButton, FramedPhoto and PhotoCaption Components Bookmark Text for a photo caption Text for a photo caption
- 12. Component Name What Data Does It Need? UI BookmarkButton Whether button was clicked or not FramedPhoto Image source PhotoCaption Caption text Card None Bookmark Text for a photo caption Text for a photo caption
- 13. Functional Components Class Syntax
- 15. Additional Resources ● React Docs ● Egghead.io (videos) ● Additional Practice Code ● Extra references found throughout this doc in the note sections ● pearlmcphee@gmail.com
- 16. Thank You!