tdc são paulo - react presentation
DESCRIPTION
React.js Presentation made on TDC São Paulo - 2014TRANSCRIPT
![Page 1: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/1.jpg)
Globalcode – Open4education
Javascript – React.jsDanillo Corvalan
Full Stack Web Developer at Bravi Software - Florianópolis/SC
1
![Page 2: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/2.jpg)
Globalcode – Open4education
About Me
Danillo Corvalan de Barros Bacharel em Ciências da Computação Nascido em Cuiabá/MT Mora e trabalha em Florianópolis/SC hà 2 anos
Não gosta de tainha Já fala “tu dix?"
![Page 3: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/3.jpg)
Globalcode – Open4education
Work
Full Stack Web Developer Node.js Client side - Angular, Backbone and React.js
www.bravi.com.br
![Page 4: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/4.jpg)
Globalcode – Open4education
History
A Javascript library for Building User Interfaces The V of MV* if it’s your architecture Open Source By Instagram & Facebook
http://facebook.github.io/react/index.html
![Page 5: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/5.jpg)
Globalcode – Open4education
Goals
Performance Declarative Composability
Reusable Components
Transforms your model / state into UI and handle its events.
![Page 6: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/6.jpg)
Globalcode – Open4education
Hello World
Dependencies React.js JSX transformer [DEMO]
![Page 7: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/7.jpg)
Globalcode – Open4education
JSX
Stands for JavaScript XML Syntax Easier to visualize the structure of the DOM Not mandatory
![Page 8: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/8.jpg)
Globalcode – Open4education
JSX - Html inside script? WTF!!
You have done it before! Javascript templates
jQuery templates Angular and so on…
![Page 9: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/9.jpg)
Globalcode – Open4education
Props
They are like attributes are to HTML elements Used for configuring your components [DEMO]
![Page 10: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/10.jpg)
Globalcode – Open4education
Nested Components
Composability Reusable code Reduce Complexity on how component state is handled
Many small components can build a more robust and reliable component or your entire app - Lego
![Page 11: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/11.jpg)
Globalcode – Open4education
Nested Components
ComponentDOM
Nested Component
DOM Child Element(s)
![Page 12: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/12.jpg)
Globalcode – Open4education
Nested Components
[DEMO]
![Page 13: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/13.jpg)
Globalcode – Open4education
Stateful Components
Setup - getInitialState accessed through this.state Once its changed, the component is rendered again Use setState to change the state
Often triggered from an event of a nested component (Events - next topic)
[DEMO]
![Page 14: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/14.jpg)
Globalcode – Open4education
Events
Normalised DOM event abstraction Cross Browser
Custom events (Domain Specific) Touch Events Support [DEMO]
![Page 15: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/15.jpg)
Globalcode – Open4education
Events
Props State
App
Component CComponent A
Comp. B
Events
Render
![Page 16: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/16.jpg)
Globalcode – Open4education
Events
[DEMO]
![Page 17: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/17.jpg)
Globalcode – Open4education
Virtual DOM
The main reason for React being so FAST In-memory diff of your new sate with the actual one Minimun steps to change real DOM
![Page 18: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/18.jpg)
Globalcode – Open4education
Lifecycle
Mounting: componentWillMount Mounting: componentDidMount Updating: componentWillReceiveProps Updating: shouldComponentUpdate Updating: componentWillUpdate Updating: componentDidUpdate Unmounting: componentWillUnmount
Reference
![Page 19: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/19.jpg)
Globalcode – Open4education
Other Features
Default Properties Prop Types (Validation) Mixins React Router etc..
![Page 20: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/20.jpg)
Globalcode – Open4education
Thinking Components
![Page 21: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/21.jpg)
Globalcode – Open4education
References & Useful links
React Page Pluralsight Course Video Rethinking Best Practices, Pete Hunt (MUST WATCH!) Github - React Source Code
![Page 22: TDC São Paulo - React presentation](https://reader030.vdocuments.site/reader030/viewer/2022020217/554f97bbb4c90586258b4642/html5/thumbnails/22.jpg)
Globalcode – Open4education
Thanks!
My work routine