Introduction to React

A short introduction to react

Transcript

1. An Introduction to Chua Allan Gabriel Louis Valencia React JS
2. Table of Contents • What is React • Supported Platforms • Origin / History • Core Philosophy • Why react • Pre-requisites • Popular Tools • UI Frameworks • How it differentiates with Vue & Angular • How to create a project • Basic Usage • Demo App
3. Did you know how they flew it?
4. Did you know how they flew it?
5. What is React JS? A JavaScript library for building user interfaces
6. Supported Platforms Web Mobile Desktop
7. Origin / History Jordan Walke Software Engineer Worked at Facebook Created React Scaled to Instagram @ 2012 Open-sourced @ 2013 Most Productionized Framework @ 2022
8. Core Philosophy Component-Based Declarative Learn-Once; Write Anywhere
9. Why react? Reusable Components Performance enhancements Can be used for mobile apps Unidirectional data flow Simple development of dynamic websites Small Learning Curve
10. Unidirectional vs Bidirectional
11. Pre-requisites
12. Popular Tools Developer Tools Reactide Storybook Bundle Analyzer Why Did You Render Jest Formik and Yup React Hook Form React Sight React Proto
13. Material UI UI Frameworks Bootstrap UI Ant Design
14. Vue & Angular Comparison with
15. Unidirectional Data Flow Bidirectional
16. Dashboards & Read Only Great for building Forms and Design Systems
17. Maintainability & Stability GOOD POOR
18. Stars in Github
19. Job Postings
20. How to create a project
21. Without react
22. With React
23. Thanks to Component Syntax
24. State is the king
25. Events are propagated by the root
26. Demo
27. Learning Materials - React GITHUB Page (Link) - React Website (Link) - React Learning Tutorial (Link) - Material UI (Link) - Carbon (Link) - React in 10 hours Free Code Camp (Link) - React for Beginners (Link) - React Full Course (Link) - React TypeScript (Link)