Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Criando Componentes com ReactJS
Search
Roger Albino
February 24, 2018
Programming
0
280
Criando Componentes com ReactJS
Slides do evento Criando Componentes com ReactJS. GDG Mogi Guaçu.
Roger Albino
February 24, 2018
Tweet
Share
More Decks by Roger Albino
See All by Roger Albino
Utilizando Clean Code para deixar seu código ainda mais manutenível - TDC Transformation - Grupo Boticário
rogeralbinoi
0
230
Código Limpo (Clean Code) - FATEC DevDay 2021
rogeralbinoi
1
100
Desmistificando a Refatoração - TDC Innovation 2021
rogeralbinoi
1
120
Código Limpo - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
75
Princípios S.O.L.I.D - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
200
Construindo Progressive Web Apps - GDG Mogi Guaçu 2019
rogeralbinoi
1
97
Layouts flexiveis com Flex-box
rogeralbinoi
0
120
Other Decks in Programming
See All in Programming
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
170
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
39
18k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
370
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
10
5.6k
puregoの活用例
aethiopicuschan
0
220
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
プールにゆこう
irof
2
120
Java 22 Overview
kishida
1
170
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
470
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Facilitating Awesome Meetings
lara
41
5.6k
A Modern Web Designer's Workflow
chriscoyier
688
190k
Thoughts on Productivity
jonyablonski
57
3.8k
Typedesign – Prime Four
hannesfritz
36
2.1k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Building Applications with DynamoDB
mza
88
5.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Transcript
Criando Componentes com ReactJS
Roger Albino Full-stack Developer at Kazap @rogerAlbi rogeralbinoi roger.albino.1
ES6, ES7, ES8
Já sei! Mais um framework js!
Já sei! Mais um framework js!
É tipo Vue, Angular, Ember?
Não, não, não e não!
Não, não, não e não!
Framework vs Library
Framework vs Library APP APP Framework Library Library Library Library
ReactJS A JavaScript library for building user interfaces
None
None
MVC
View MVC
DOM Lento
DOM Lento
Virtual DOM DOM Lento
Learn once, write anywhere.
Web + server side rendering
Native Apps (Android, iOS)
None
< JSX />
import { Component } from 'react'; class HelloMessage extends Component
{ render() { return ( <div> Hello { this.props.name } </div> ); } } 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}) => <h1>{title}</h1>
const Input = () => ( <input class="form-control" type="text"> );
None
None
Html no Javascript? const Input = () => ( <input
class="form-control" type="text"> ); XML
XML no Javascript const Input = () => ( <input
class="form-control" type="text"> );
const Input = () => ( <input className="form-control" type=“text" />
); const Input = () => ( <input class="form-control" type="text"> ); class é uma palavra reservada
const Input = () => ( <input className="form-control" type=“text" />
); const Input = () => ( <input class="form-control" type="text"> ); É obrigatório o fechamento das tags
CSS no Javascript? const Wrapper = styled.header` color: #212121; background:
#f9f9f9; ` const Header = ({ title }) => ( <Wrapper>{title}</Wrapper> )
None
None
Componentes
None
None
None
None
Componentes no React
Funções import React, { Component } from 'react' const Hello
= () => ( <h1>Hello React!</h1> ) export default Hello
Classes import React, { Component } from 'react' class Hello
extends Component { render() { return ( <h1>Hello React!</h1> ) } } export default Hello
ReactDOM ReactDOM.render( <Hello />, document.getElementById('root') );
Props e State
Props <input type="text" />
Props <input type="text" />
Props const Input = props => ( <input type={props.type}> )
<Input type="text" />
<UserTitle name="José da Silva" /> class UserTitle extends Component {
render() { return ( <h1>{this.props.name}</h1> ) } } Props
Props <UserTitle /> class UserTitle extends Component { static defaultProps
= { name: 'Ninguém' } static propTypes = { name: PropTypes.string } render() { return ( <h1>{this.props.name}</h1> ) } }
Props <UserTitle /> class UserTitle extends Component { static defaultProps
= { name: 'Ninguém' } static propTypes = { name: PropTypes.string } render() { return ( <h1>{this.props.name}</h1> ) } }
State class UserTitle extends Component { state = { hiddenTitle:
true } toggleTitle = () => { this.setState((state) => ({ hiddenTitle: !state.hiddenTitle })) } render() { return ( <div> { !hiddenTitle && (<h1>{this.props.name}</h1>)} <button type="button" onClick={this.toggleTitle}> Hidden Text </button> </div> ) } }
State class UserTitle extends Component { state = { hiddenTitle:
true } toggleTitle = () => { this.setState((state) => ({ hiddenTitle: !state.hiddenTitle })) } render() { return ( <div> { !hiddenTitle && (<h1>{this.props.name}</h1>)} <button type="button" onClick={this.toggleTitle}> Hidden Text </button> </div> ) } }
Loops Map, filter, reduce…
let users = [ { firstName: 'Marcio', lastName: 'da Silva'
}, { firstName: ‘Olívia', lastName: 'da Silva' }, { firstName: 'Ana', lastName: 'Almeida' } ] const listUser = () => ( <ul> {users.map(({firstName, lastName}) => ( <li> Name: <strong>{firstName} {lastName}</strong> </li> ))} </ul> )
let users = [ { firstName: 'Marcio', lastName: 'da Silva'
}, { firstName: ‘Olívia', lastName: 'da Silva' }, { firstName: 'Ana', lastName: 'Almeida' } ] const listUser = () => ( <ul> {users.filter(({ lastName }) => lastName === 'da Silva') .map(({ firstName, lastName }) => ( <li> Name: <strong>{firstName} {lastName}</strong> </li> ))} </ul> )
None
None
Configurações
create-react-app
npm install -g create-react-app // ou yarn global add create-react-app
create-react-app my-app cd my-app/ npm start
None
None
None
None
None
Links úteis • https://reactjs.org/ • https://medium.com/reactbrasil • http://reactconfbr.com.br/
Dúvidas?
Dúvidas?
Obrigado. @rogerAlbi rogeralbinoi roger.albino.1