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
87
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
360
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
170
Houdini, what lies ahead - JSConf Iceland 2018
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
490
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
Six and a half ridiculous things to do with Quarkus
Avatar for Holly Cummins hollycummins
0
140
アメ車でサンノゼを走ってきたよ！
Avatar for Shigure Shimotori s_shimotori
0
200
CSC305 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
260
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
Avatar for Samuel Williams ioquatix
3
1.3k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
110
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
Avatar for MinoDriven minodriven
23
12k
明日から始めるリファクタリング
Avatar for ryounasso ryounasso
0
120
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
Avatar for えいえい ei_ei_eiichi
0
380
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
380
タスクの特性や不確実性に応じた最適な作業スタイルの選択（ペアプロ・モブプロ・ソロプロ）と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
Avatar for yuki honyanya
3
150
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない？
Avatar for yimajo yimajo
2
370
そのpreloadは必要？見過ごされたpreloadが技術的負債として爆発した日
Avatar for mugi mugitti9
2
3.1k

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
9
580
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
45
2.5k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
680
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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