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
420
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
410
Código Limpo (Clean Code) - FATEC DevDay 2021
rogeralbinoi
1
210
Desmistificando a Refatoração - TDC Innovation 2021
rogeralbinoi
1
200
Código Limpo - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
140
Princípios S.O.L.I.D - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
320
Construindo Progressive Web Apps - GDG Mogi Guaçu 2019
rogeralbinoi
1
150
Layouts flexiveis com Flex-box
rogeralbinoi
0
220
Other Decks in Programming
See All in Programming
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
780
AHC 044 混合整数計画ソルバー解法
kiri8128
0
320
Chrome Extension Techniques from Hell
moznion
1
150
Unlock the Potential of Swift Code Generation
rockname
0
180
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
200
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
170
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
260
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
150
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
3
1.8k
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
140
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
390
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.2k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
51
7.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
The Invisible Side of Design
smashingmag
299
50k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2.1k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
How to train your dragon (web standard)
notwaldorf
91
6k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
370
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Designing for humans not robots
tammielis
251
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
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