Tweet
Tweet

Slide 1

Slide 1 text

An Introduction to Chua Allan Gabriel Louis Valencia React JS

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Did you know how they flew it?

Slide 4

Slide 4 text

Did you know how they flew it?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Supported Platforms Web Mobile Desktop

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Unidirectional vs Bidirectional

Slide 11

Slide 11 text

Pre-requisites

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Material UI UI Frameworks Bootstrap UI Ant Design

Slide 14

Slide 14 text

Vue & Angular Comparison with

Slide 15

Slide 15 text

Unidirectional Data Flow Bidirectional

Slide 16

Slide 16 text

Dashboards & Read Only Great for building Forms and Design Systems

Slide 17

Slide 17 text

Maintainability & Stability GOOD POOR

Slide 18

Slide 18 text

Stars in Github

Slide 19

Slide 19 text

Job Postings

Slide 20

Slide 20 text

How to create a project

Slide 21

Slide 21 text

Without react

Slide 22

Slide 22 text

With React

Slide 23

Slide 23 text

Thanks to Component Syntax

Slide 24

Slide 24 text

State is the king

Slide 25

Slide 25 text

Events are propagated by the root

Slide 26

Slide 26 text

Demo

Slide 27

Slide 27 text

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)