Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Arun Michael Dsouza Arun Michael Dsouza
July 01, 2018
Programming
750
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
140
Using the Gamepad API for a better gaming experience on the web
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
290
React JS Code Splitting - Why and How?
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
280
Building your first web app with React JS, Webpack and Babel
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
470
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
230
Houdini, what lies ahead - Web Weekend Kathmandu 2018
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
220
Houdini, what lies ahead - JSConf Iceland 2018
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
540
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
Avatar for Arun Michael Dsouza arunmichaeldsouza
0
230
Getting started with React 16
Avatar for Arun Michael Dsouza arunmichaeldsouza
1
1.3k

Other Decks in Programming

See All in Programming
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
8
5.5k
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
350
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
1
2.2k
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
120
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
350
Simple Storage Service(S3) is not simple
Avatar for Yura Iwatsuka iwatsukayura
0
210
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
200
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
130
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
470
Heart of Swift Concurrency
Avatar for Yuta Koshizawa koher
0
1.2k
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
190
AI時代のコードレビューは人に向けるな、仕組みに向けろ
Avatar for meijin texmeijin
5
3.5k

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
550
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
840
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.7k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
390
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
540
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
860

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