$30 off During Our Annual Pro Sale. View Details »

Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup

Arun Michael Dsouza
July 01, 2018
Programming
1
640

Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup

Introductory talk on React components, what they are and how to create them.

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
arunmichaeldsouza
0
13
Using the Gamepad API for a better gaming experience on the web
arunmichaeldsouza
0
180
React JS Code Splitting - Why and How?
arunmichaeldsouza
1
150
Building your first web app with React JS, Webpack and Babel
arunmichaeldsouza
0
190
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
arunmichaeldsouza
0
110
Houdini, what lies ahead - Web Weekend Kathmandu 2018
arunmichaeldsouza
0
110
Houdini, what lies ahead - JSConf Iceland 2018
arunmichaeldsouza
0
370
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
arunmichaeldsouza
0
140
Getting started with React 16
arunmichaeldsouza
1
980

Other Decks in Programming

See All in Programming
ユーザー登録とログインフォームにautocomplete属性を使いましょう
ivanova1991
2
1.7k
インターフェースのラッパーを作る際の落とし穴 / Go Conference mini 2023
mazrean
0
210
エンジニアだけでスポンサーブースを出したら大変なことになった
zakky21
1
480
C++20からC++23までの変化
faithandbrave
1
2.4k
Accelerating App Dev with Cloudflare Workers
chimame
1
210
アーキテクチャ刷新の現場 / Scene of architectural renewal
nrslib
6
930
Expo Router は Expo 導入の決め手となるか フロントエンドカンファレンス沖縄2023 @Kaito-Dogi
doggy
3
1.7k
状態設計から「なんとなく」を無くそう
qnighy
14
4.7k
10年モノのAndroidアプリのコード品質を改善していく、3つの取り組み
okuzawats
0
670
Developing a Vim plugin with Ruby
okuramasafumi
0
220
技術書を読む技術（JJUG CCC 2023 Fall）
yonetty
1
270
弊社の開発体験の良いところは？メンバーに訊いてみた！
texmeijin
0
190

Featured

See All Featured
Statistics for Hackers
jakevdp
788
220k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
44
12k
Code Review Best Practice
trishagee
53
14k
A Modern Web Designer's Workflow
chriscoyier
688
190k
A Philosophy of Restraint
colly
194
15k
Code Reviewing Like a Champion
maltzj
511
38k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
240
20k
Intergalactic Javascript Robots from Outer Space
tanoku
264
26k
Automating Front-end Workflow
addyosmani
1354
200k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
12
1.1k
Design by the Numbers
sachag
272
18k
Creatively Recalculating Your Daily Design Routine
revolveconf
208
11k

Transcript

  1. Intro to React Components
    Arun Michael Dsouza

    @amdsouza92 React Delhi/NCR

    View Slide

  2. Header
    Sidebar
    Slider
    News News

    View Slide

  3. Image source: www.hawaii.edu

    View Slide

  4. Props
    React
    element

    View Slide

  5. React element
    DOM element

    View Slide

  6. JSX
    bit.ly/2ttPzcV

    View Slide

  7. Functional components

    View Slide

  8. Class components

    View Slide

  9. Props are read-only!

    View Slide

  10. Props are read-only!

    View Slide

  11. All React components must act like
    pure functions with respect to their props.
    bit.ly/2ywNi6n

    View Slide

  12. Use state to update a component.

    View Slide

  13. View Slide

  14. Dumb/stateless components

    View Slide

  15. Smart/statefull components

    View Slide

  16. • Abstracting complexity
    • Maintainability
    • Reusability
    • Ease of testing

    View Slide

  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

    View Slide

  18. Thank you!
    React Delhi/NCR
    Arun Michael Dsouza

    @amdsouza92

    View Slide