Introduction to React

A short introduction to react

Transcript

1. An Introduction to
   Chua Allan
   Gabriel Louis Valencia
   React JS
   

   View Slide

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
   

   View Slide

3. Did you know how they flew it?
   

   View Slide

4. Did you know how they flew it?
   

   View Slide

5. What is React JS?
   A JavaScript library for building user interfaces
   

   View Slide

6. Supported Platforms
   Web Mobile Desktop
   

   View Slide

7. Origin / History
   Jordan Walke
   Software Engineer
   Worked at Facebook
   Created React
   Scaled to
   Instagram @ 2012
   Open-sourced @
   2013
   Most Productionized
   Framework @ 2022
   

   View Slide

8. Core Philosophy
   Component-Based
   Declarative Learn-Once;
   Write Anywhere
   

   View Slide

9. Why react?
   Reusable
   Components
   Performance
   enhancements
   Can be used for
   mobile apps
   Unidirectional
   data flow
   Simple development of
   dynamic websites
   Small Learning
   Curve
   

   View Slide

10. Unidirectional vs Bidirectional
    

    View Slide

11. Pre-requisites
    

    View Slide

12. Popular Tools
    Developer Tools Reactide Storybook
    Bundle Analyzer
    Why Did You Render Jest
    Formik and Yup
    React Hook Form
    React Sight React Proto
    

    View Slide

13. Material UI
    UI Frameworks
    Bootstrap UI Ant Design
    

    View Slide

14. Vue & Angular
    Comparison with
    

    View Slide

15. Unidirectional
    Data Flow
    Bidirectional
    

    View Slide

16. Dashboards & Read Only
    Great for building
    Forms and Design Systems
    

    View Slide

17. Maintainability & Stability
    GOOD POOR
    

    View Slide

18. Stars in Github
    

    View Slide

19. Job Postings
    

    View Slide

20. How to create a project
    

    View Slide

21. Without react
    

    View Slide

22. With React
    

    View Slide

23. Thanks to Component Syntax
    

    View Slide

24. State is the king
    

    View Slide

25. Events are propagated by the root
    

    View Slide

26. Demo
    

    View Slide

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)
    

    View Slide