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
350
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
310
Código Limpo (Clean Code) - FATEC DevDay 2021
rogeralbinoi
1
130
Desmistificando a Refatoração - TDC Innovation 2021
rogeralbinoi
1
150
Código Limpo - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
91
Princípios S.O.L.I.D - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
250
Construindo Progressive Web Apps - GDG Mogi Guaçu 2019
rogeralbinoi
1
110
Layouts flexiveis com Flex-box
rogeralbinoi
0
160
Other Decks in Programming
See All in Programming
座談会 「Strict ConcurrencyとSwift 6が開く新時代: 私たちはどう生きるか?」
shiz
4
2.9k
Playwrightから始めるVisual Regression Testingのススメ by とっと
totto2727
2
1.8k
null or undefined
susisu
19
4k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
580
複雑さに立ち向かうための ソフトウェア開発入門
shiz
2
570
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
110
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
2.7k
BQ+dbt+Lookerを用いた、月間800億件以上の広告リクエストに対するデータモデリング
hanon52_
4
990
Swiftで高速フーリエ変換してオーディオビジュアライザーを作る / iOSDC Japan 2024 Day1 Track D
kyome22
2
460
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
910
2024 컴포즈 정원사
jisungbin
0
140
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
360
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.4k
Into the Great Unknown - MozCon
thekraken
28
1.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Testing 201, or: Great Expectations
jmmastey
35
6.9k
Unsuck your backbone
ammeep
667
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
A better future with KSS
kneath
235
17k
A designer walks into a library…
pauljervisheath
201
24k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
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