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

Other Decks in Programming

See All in Programming
[RubyKaigi 2026] Require Hooks
Avatar for Vladimir Dementyev palkan
1
290
UaaL×Androidアプリのメモリ計測 — Memory Profilerの先へ
Avatar for Ryosuke Shimizu (RIO) rio432
0
110
クラウドネイティブなエンジニアに向ける Raycastの魅力と実際の活用事例
Avatar for Nealle nealle
2
250
書籍「ユーザーストーリーマッピング」が私のバイブル
Avatar for asumikam asumikam
4
480
AIと共に生きる技術選定 2026
Avatar for Sugar Sato sgash708
0
120
実用！Hono RPC2026
Avatar for yodaka yodaka
2
300
Structured Concurrency, Scoped Values and Joiners in the JDK 25 26 27
Avatar for José josepaumard
1
140
「OSSがあるなら自作するな」は AI時代も正しいか ── Build vs Adopt の新しい判断基準
Avatar for Kumo Ishikawa kumorn5s
6
1.7k
ソースコード→AST→オペコード、の旅を覗いてみる
Avatar for hideki kinjyo o0h
PRO
1
130
【26新卒研修】OpenAPI/Swagger REST API研修
Avatar for ディップ株式会社 dip_tech
PRO
0
140
AIを導入する前にやるべきこと
Avatar for Negima negima
2
330
PicoRuby for IoT: Connecting to the Cloud with MQTT
Avatar for Y_uuu yuuu
2
760

Featured

See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
540
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.3k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
190
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
65
54k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
490
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
180
Done Done
Avatar for chrislema chrislema
186
16k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
340

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