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
400
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
370
Código Limpo (Clean Code) - FATEC DevDay 2021
rogeralbinoi
1
180
Desmistificando a Refatoração - TDC Innovation 2021
rogeralbinoi
1
180
Código Limpo - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
120
Princípios S.O.L.I.D - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
310
Construindo Progressive Web Apps - GDG Mogi Guaçu 2019
rogeralbinoi
1
130
Layouts flexiveis com Flex-box
rogeralbinoi
0
200
Other Decks in Programming
See All in Programming
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
170
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
Package Traits
ikesyo
1
210
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
280
Beyond ORM
77web
11
1.6k
最近のVS Codeで気になるニュース 2025/01
74th
1
110
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
快速入門可觀測性
blueswen
0
500
Оптимизируем производительность блока Казначейство
lamodatech
0
960
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
570
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
6k
Featured
See All Featured
Scaling GitHub
holman
459
140k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Why Our Code Smells
bkeepers
PRO
335
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Writing Fast Ruby
sferik
628
61k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Making Projects Easy
brettharned
116
6k
Building Adaptive Systems
keathley
38
2.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
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