Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

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

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

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
140
Using the Gamepad API for a better gaming experience on the web
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
290
React JS Code Splitting - Why and How?
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
280
Building your first web app with React JS, Webpack and Babel
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
470
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
230
Houdini, what lies ahead - Web Weekend Kathmandu 2018
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
220
Houdini, what lies ahead - JSConf Iceland 2018
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
550
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
230
Getting started with React 16
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
1.3k

Other Decks in Programming

See All in Programming
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
130
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1.7k
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
520
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
960
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
Avatar for Yuki Kuwashima yukiny
0
330
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.9k
HTML-in-Canvasで作る未来のWeb UI表現
Avatar for IKEDA Yasunobu clockmaker
1
2.2k
Vue Fes Japan 2026 タイムテーブル徹底解説
Avatar for 448jp | OKI Yoshiya 448jp
1
650
難しいけど、読めた。- OSSの入口に立った話。
Avatar for shota sts11142
0
150
外から家のPCの電源入れたい！をＰＨＰで解決する
Avatar for かわしも（Shimokawa Shion） kawashimo0
1
130
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
170
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
Avatar for junhat6 junhat6
0
130

Featured

See All Featured
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
570
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
450
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
184
10k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
590
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.4k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k

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