Slides do evento Criando Componentes com ReactJS. GDG Mogi Guaçu.
Criando Componentes com ReactJS
View Slide
Roger AlbinoFull-stack Developer at Kazap@rogerAlbi rogeralbinoi roger.albino.1
ES6, ES7, ES8
Já sei!Mais um framework js!
É tipo Vue, Angular, Ember?
Não, não, não e não!
Framework vs Library
Framework vs LibraryAPPAPPFrameworkLibraryLibraryLibraryLibrary
ReactJSA JavaScript library for building user interfaces
MVC
ViewMVC
DOM Lento
Virtual DOMDOM Lento
Learn once, write anywhere.
Web + server side rendering
Native Apps (Android, iOS)
< JSX />
import { Component } from 'react';class HelloMessage extends Component {render() {return (Hello { this.props.name });}}export default HelloMessage;
E se eu não quiser usar JSX?
import React, {Component} from 'react';class HelloMessage extends Component {render() {return React.createElement('div',null,'Hello ',this.props.name);}}
Html no Javascript?const HelloWorld = ({title}) => {title}
const Input = () => ();
Html no Javascript?const Input = () => ();XML
XML no Javascriptconst Input = () => ();
const Input = () => ();const Input = () => ();class é uma palavra reservada
const Input = () => ();const Input = () => ();É obrigatório o fechamento das tags
CSS no Javascript?const Wrapper = styled.header`color: #212121;background: #f9f9f9;`const Header = ({ title }) => ({title})
Componentes
Componentes no React
Funçõesimport React, { Component } from 'react'const Hello = () => (Hello React!)export default Hello
Classesimport React, { Component } from 'react'class Hello extends Component {render() {return (Hello React!)}}export default Hello
ReactDOMReactDOM.render(,document.getElementById('root'));
Props e State
Props
Propsconst Input = props => ()
class UserTitle extends Component {render() {return ({this.props.name})}}Props
Propsclass UserTitle extends Component {static defaultProps = {name: 'Ninguém'}static propTypes = {name: PropTypes.string}render() {return ({this.props.name})}}
Stateclass UserTitle extends Component {state = {hiddenTitle: true}toggleTitle = () => {this.setState((state) => ({hiddenTitle: !state.hiddenTitle}))}render() {return ({ !hiddenTitle && ({this.props.name})}type="button"onClick={this.toggleTitle}>Hidden Text)}}
LoopsMap, filter, reduce…
let users = [{ firstName: 'Marcio', lastName: 'da Silva' },{ firstName: ‘Olívia', lastName: 'da Silva' },{ firstName: 'Ana', lastName: 'Almeida' }]const listUser = () => ({users.map(({firstName, lastName}) => (Name: {firstName} {lastName}))})
let users = [{ firstName: 'Marcio', lastName: 'da Silva' },{ firstName: ‘Olívia', lastName: 'da Silva' },{ firstName: 'Ana', lastName: 'Almeida' }]const listUser = () => ({users.filter(({ lastName }) => lastName === 'da Silva').map(({ firstName, lastName }) => (Name: {firstName} {lastName}))})
Configurações
create-react-app
npm install -g create-react-app// ouyarn global add create-react-app
create-react-app my-appcd my-app/npm start
Links úteis• https://reactjs.org/ • https://medium.com/reactbrasil• http://reactconfbr.com.br/
Dúvidas?
Obrigado.@rogerAlbi rogeralbinoi roger.albino.1