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
730

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
110
Using the Gamepad API for a better gaming experience on the web
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
250
React JS Code Splitting - Why and How?
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
240
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
200
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
日本だけで解禁されているアプリ起動の方法
Avatar for Ryu-nakayama ryunakayama
0
370
米国のサイバーセキュリティタイムラインと見る Goの暗号パッケージの進化
Avatar for tom twinkle tomtwinkle
2
420
社内規程RAGの精度を73.3% → 100%に改善した話
Avatar for oharu121 oharu121
13
7.6k
PostgreSQL を使った快適な go test 環境を求めて
Avatar for Kotaro Otaka otakakot
0
410
NOT A HOTEL - 建築や人と融合し、自由を創り出すソフトウェア
Avatar for Hokuto Shimokawa not_a_hokuts
2
570
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
2k
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
160
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
Avatar for Takashi Kanemoto ttskch
1
120
Ruby x Terminal
Avatar for Akira Matsuda a_matsuda
7
580
Claude Codeセッション現状確認 2026福岡 / fukuoka-aicoding-00-beacon
Avatar for monochromegane monochromegane
4
390
CSC307 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
590

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
87
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
170
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
96
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
210
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
220
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k

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