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
95
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
160
Node JS for Architects Part 1
allanchua101
0
290
Traditional, N-Tier & Microservices
allanchua101
0
90
Things You Need to Know to Become a Serverless API Ninja
allanchua101
1
800
Ocelot Pluggable Gateway
allanchua101
0
1.4k
API Gateway in a Nutshell 2019
allanchua101
0
1.4k
JavaScript API Proxy Pattern
allanchua101
0
600
API Gateways - Dealing with Distributed Backends
allanchua101
0
170
API Gateways in a Nutshell
allanchua101
0
140
Other Decks in Technology
See All in Technology
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Building Products in the LLM Era
ymatsuwitter
10
4.4k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
データの品質が低いと何が困るのか
kzykmyzw
6
1k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Adopting Sorbet at Scale
ufuk
74
9.2k
Why Our Code Smells
bkeepers
PRO
335
57k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Agile that works and the tools we love
rasmusluckow
328
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Docker and Python
trallard
44
3.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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)