Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to React
Search
Allan Chua
January 29, 2022
Technology
0
92
Introduction to React
A short introduction to react
Allan Chua
January 29, 2022
Tweet
Share
More Decks by Allan Chua
See All by Allan Chua
Sneak Peek at Kali Linux
allanchua101
0
140
Node JS for Architects Part 1
allanchua101
0
280
Traditional, N-Tier & Microservices
allanchua101
0
76
Things You Need to Know to Become a Serverless API Ninja
allanchua101
1
710
Ocelot Pluggable Gateway
allanchua101
0
1.4k
API Gateway in a Nutshell 2019
allanchua101
0
1.3k
JavaScript API Proxy Pattern
allanchua101
0
590
API Gateways - Dealing with Distributed Backends
allanchua101
0
150
API Gateways in a Nutshell
allanchua101
0
110
Other Decks in Technology
See All in Technology
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
950
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
地理情報とAPIのトレンド
nagix
0
160
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.8k
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
AWSでRAGを作る法方
sonoda_mj
1
140
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
スレットハンティングについて知っておきたいこと
hacket
0
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Code Review Best Practice
trishagee
58
16k
Designing the Hi-DPI Web
ddemaree
276
34k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Bash Introduction
62gerente
607
210k
KATA
mclloyd
20
13k
Docker and Python
trallard
37
2.9k
Practical Orchestrator
shlominoach
185
10k
Speed Design
sergeychernyshev
9
270
Transcript
An Introduction to Chua Allan Gabriel Louis Valencia React JS
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
Did you know how they flew it?
Did you know how they flew it?
What is React JS? A JavaScript library for building user
interfaces
Supported Platforms Web Mobile Desktop
Origin / History Jordan Walke Software Engineer Worked at Facebook
Created React Scaled to Instagram @ 2012 Open-sourced @ 2013 Most Productionized Framework @ 2022
Core Philosophy Component-Based Declarative Learn-Once; Write Anywhere
Why react? Reusable Components Performance enhancements Can be used for
mobile apps Unidirectional data flow Simple development of dynamic websites Small Learning Curve
Unidirectional vs Bidirectional
Pre-requisites
Popular Tools Developer Tools Reactide Storybook Bundle Analyzer Why Did
You Render Jest Formik and Yup React Hook Form React Sight React Proto
Material UI UI Frameworks Bootstrap UI Ant Design
Vue & Angular Comparison with
Unidirectional Data Flow Bidirectional
Dashboards & Read Only Great for building Forms and Design
Systems
Maintainability & Stability GOOD POOR
Stars in Github
Job Postings
How to create a project
Without react
With React
Thanks to Component Syntax
State is the king
Events are propagated by the root
Demo
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)