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
85
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
実践！App Intents対応
Avatar for 野瀬田　裕樹 yuukiw00w
1
350
ワープロって実は計算機で
Avatar for Chiharu Shirasaka pepepper
2
1.4k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
Avatar for tk1351 tk1351
3
1.2k
デザインシステムが必須の時代に
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
110
TDD 実践ミニトーク
Avatar for Daisuke Garaike contour_gara
0
150
A Gopher's Guide to Vibe Coding
Avatar for Daniela Petruzalek danicat
0
170
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
Avatar for Kakeru Sato kkakeru
0
210
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
Avatar for shunghsiyu shunghsiyu
0
470
エンジニアのための”最低限いい感じ”デザイン入門
Avatar for しゅん🌙 shunshobon
0
130
為你自己學 Python - 冷知識篇
Avatar for 高見龍 eddie
1
170
あなたとJIT, 今すぐアセンブ ル
Avatar for monochrome sisshiki1969
1
730
AHC051解法紹介
Avatar for eijirou eijirou
0
620

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
780
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k

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