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
490
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
450
Código Limpo (Clean Code) - FATEC DevDay 2021
rogeralbinoi
1
230
Desmistificando a Refatoração - TDC Innovation 2021
rogeralbinoi
1
220
Código Limpo - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
170
Princípios S.O.L.I.D - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
350
Construindo Progressive Web Apps - GDG Mogi Guaçu 2019
rogeralbinoi
1
180
Layouts flexiveis com Flex-box
rogeralbinoi
0
260
Other Decks in Programming
See All in Programming
ゲームの物理
fadis
5
1.5k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
300
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
140
decksh - a little language for decks
ajstarks
4
21k
AHC051解法紹介
eijirou
0
610
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
570
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
670
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
4
320
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
760
実践 Dev Containers × Claude Code
touyu
1
240
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
The Language of Interfaces
destraynor
160
25k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Gamification - CAS2011
davidbonilla
81
5.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
A designer walks into a library…
pauljervisheath
207
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
GitHub's CSS Performance
jonrohan
1031
460k
Faster Mobile Websites
deanohume
309
31k
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