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
710

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
80
Using the Gamepad API for a better gaming experience on the web
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
230
React JS Code Splitting - Why and How?
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
210
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
180
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
170
Getting started with React 16
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
1.2k

Other Decks in Programming

See All in Programming
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
Avatar for kesoji kesoji
0
220
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
770
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
Avatar for hideki kinjyo o0h
PRO
1
260
iOS 26にアップデートすると実機でのHot Reloadができない？
Avatar for Aoi Umigishi umigishiaoi
0
130
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
5
1.1k
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
2
640
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
Avatar for Agata Naomichi agatan
1
420
Rubyでやりたい駆動開発 / Ruby driven development
Avatar for chobishiba chobishiba
1
710
AIプログラマーDevinは PHPerの夢を見るか？
Avatar for Shinya Saita shinyasaita
1
220
VS Code Update for GitHub Copilot
Avatar for 74th(Atsushi Morimoto) 74th
2
650
git worktree × Claude Code × MCP ～生成AI時代の並列開発フロー～
Avatar for hisuzuya hisuzuya
1
570

Featured

See All Featured
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
18k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
820
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k

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