Globalcode – Open4education

Javascript – React.jsDanillo 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

ComponentDOM

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 CComponent 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