Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to React Components - React Delhi NCR 01 ...

Avatar for Arun Michael Dsouza Arun Michael Dsouza
July 01, 2018
Programming
1
720

Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup

Introductory talk on React components, what they are and how to create them.

Avatar for Arun Michael Dsouza

Arun Michael Dsouza

July 01, 2018
Tweet

More Decks by Arun Michael Dsouza

See All by Arun Michael Dsouza
Using the Gamepad API for a Better Gaming Experience on the Web
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
84
Using the Gamepad API for a better gaming experience on the web
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
240
React JS Code Splitting - Why and How?
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
220
Building your first web app with React JS, Webpack and Babel
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
350
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
190
Houdini, what lies ahead - Web Weekend Kathmandu 2018
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
160
Houdini, what lies ahead - JSConf Iceland 2018
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
480
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
180
Getting started with React 16
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
1.2k

Other Decks in Programming

See All in Programming
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
Avatar for shunghsiyu shunghsiyu
0
340
階層化自動テストで開発に機動力を
Avatar for ICKX ickx
1
480
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
Avatar for Akira Suenami a_suenami
10
1.7k
MySQL9でベクトルカラム登場！PHP×AWSでのAI/類似検索はこう変わる
Avatar for Suguru Ohki suguruooki
1
290
Amazon Q CLI開発で学んだAIコーディングツールの使い方
Avatar for matsukada licux
3
180
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
150
令和最新版手のひらコンピュータ
Avatar for KOBA789 koba789
13
6.7k
AI Ramen Fight
Avatar for Yusuke Wada yusukebe
0
130
What's new in Adaptive Android development
Avatar for Sungyong An fornewid
0
140
Dart 参戦！！静的型付き言語界の隠れた実力者
Avatar for Kuno Ayana kno3a87
0
180
Comparing decimals in Swift Testing
Avatar for 417.72KI 417_72ki
0
160
Understanding Kotlin Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
250

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
440
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.4k

Transcript

  1. Intro to React Components Arun Michael Dsouza
 @amdsouza92 React Delhi/NCR

  2. Header Sidebar Slider News News

  3. Image source: www.hawaii.edu

  4. Props React element

  5. React element DOM element

  6. JSX bit.ly/2ttPzcV

  7. Functional components

  8. Class components

  9. Props are read-only!

  10. Props are read-only!

  11. All React components must act like pure functions with respect

    to their props. bit.ly/2ywNi6n

  12. Use state to update a component.

  13. None

  14. Dumb/stateless components

  15. Smart/statefull components

  16. • Abstracting complexity • Maintainability • Reusability • Ease of

    testing

  17. • https://reactjs.org/docs/components-and-props.html • https://www.youtube.com/watch?v=0BHoz0ptv7k • https://reactjs.org/docs/thinking-in-react.html Quick links

  18. Thank you! React Delhi/NCR Arun Michael Dsouza
 @amdsouza92