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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
110
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
430
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
190
Houdini, what lies ahead - JSConf Iceland 2018
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
510
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
200
Getting started with React 16
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
1.3k

Other Decks in Programming

See All in Programming
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
Avatar for hideki kinjyo o0h
PRO
0
200
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
5
850
PDI: Como Alavancar Sua Carreira e Seu Negócio
Avatar for Marcel dos Santos marcelgsantos
0
110
Coding as Prompting Since 2025
Avatar for Jimmy Moon ragingwind
0
770
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
130
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.8k
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
330
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
230
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
650
Redox OS でのネームスペース管理と chroot の実現
Avatar for isan isanethen
0
560
forteeの改修から振り返るPHPerKaigi 2026
Avatar for muno92 muno92
PRO
3
250
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
Avatar for Sota Makino sotamaki0421
3
450

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.6k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
200
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.8k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
120

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