ݺߣ

ݺߣShare a Scribd company logo

TDC São Paulo - React presentation

•
•
Danillo Corvalan
Danillo Corvalan

Danillo Corvalan is a full stack web developer at Bravi Software in Florianópolis, Brazil who specializes in React.js. He has a computer science degree and has lived in Florianópolis for 2 years. React.js is an open source JavaScript library for building user interfaces that was created by Instagram and Facebook. It uses a virtual DOM for fast performance and declarative programming with reusable components to build user interfaces.

1 of 22
Download to read offline
Globalcode – Open4education Javascript – React.js Danillo Corvalan Full Stack Web Developer at Bravi Software - Florianópolis/SC 1
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?"
Globalcode – Open4education Work Full Stack Web Developer Node.js Client side - Angular, Backbone and React.js www.bravi.com.br
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
Globalcode – Open4education Goals Performance Declarative Composability Reusable Components Transforms your model / state into UI and handle its events.
Globalcode – Open4education Hello World Dependencies React.js JSX transformer [DEMO]
Globalcode – Open4education JSX Stands for JavaScript XML Syntax Easier to visualize the structure of the DOM Not mandatory
Globalcode – Open4education JSX - Html inside script? WTF!! You have done it before! Javascript templates jQuery templates Angular and so on…
Globalcode – Open4education Props They are like attributes are to HTML elements Used for configuring your components [DEMO]
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
Globalcode – Open4education Nested Components Component DOM Nested Component DOM Child Element(s)
Globalcode – Open4education Nested Components [DEMO]
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]
Globalcode – Open4education Events Normalised DOM event abstraction Cross Browser Custom events (Domain Specific) Touch Events Support [DEMO]
Globalcode – Open4education Events Props State App Component C Component A Comp. B Events Render
Globalcode – Open4education Events [DEMO]
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
Globalcode – Open4education Lifecycle Mounting: componentWillMount Mounting: componentDidMount Updating: componentWillReceiveProps Updating: shouldComponentUpdate Updating: componentWillUpdate Updating: componentDidUpdate Unmounting: componentWillUnmount Reference
Globalcode – Open4education Other Features Default Properties Prop Types (Validation) Mixins React Router etc..
Globalcode – Open4education Thinking Components
Globalcode – Open4education References & Useful links React Page Pluralsight Course Video Rethinking Best Practices, Pete Hunt (MUST WATCH!) Github - React Source Code
Globalcode – Open4education Thanks! My work routine

More Related Content

TDC São Paulo - React presentation