Slide 1
Slide 1 text
Criando Componentes com ReactJS
Slide 2
Slide 2 text
Roger Albino
Full-stack Developer at Kazap
@rogerAlbi rogeralbinoi roger.albino.1
Slide 3
Slide 3 text
ES6, ES7, ES8
Slide 4
Slide 4 text
Já sei!
Mais um framework js!
Slide 5
Slide 5 text
Já sei!
Mais um framework js!
Slide 6
Slide 6 text
É tipo Vue, Angular, Ember?
Slide 7
Slide 7 text
Não, não, não e não!
Slide 8
Slide 8 text
Não, não, não e não!
Slide 9
Slide 9 text
Framework vs Library
Slide 10
Slide 10 text
Framework vs Library
APP
APP
Framework
Library
Library
Library
Library
Slide 11
Slide 11 text
ReactJS
A JavaScript library for building user interfaces
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
MVC
Slide 15
Slide 15 text
View
MVC
Slide 16
Slide 16 text
DOM Lento
Slide 17
Slide 17 text
DOM Lento
Slide 18
Slide 18 text
Virtual DOM
DOM Lento
Slide 19
Slide 19 text
Learn once, write anywhere.
Slide 20
Slide 20 text
Web + server side rendering
Slide 21
Slide 21 text
Native Apps (Android, iOS)
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
< JSX />
Slide 24
Slide 24 text
import { Component } from 'react';
class HelloMessage extends Component {
render() {
return (
Hello { this.props.name }
);
}
}
export default HelloMessage;
Slide 25
Slide 25 text
E se eu não quiser usar JSX?
Slide 26
Slide 26 text
import React, {Component} from 'react';
class HelloMessage extends Component {
render() {
return React.createElement(
'div',
null,
'Hello ',
this.props.name
);
}
}
Slide 27
Slide 27 text
Html no Javascript?
const HelloWorld = ({title}) =>
{title}
Slide 28
Slide 28 text
const Input = () => (
);
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Html no Javascript?
const Input = () => (
);
XML
Slide 32
Slide 32 text
XML no Javascript
const Input = () => (
);
Slide 33
Slide 33 text
const Input = () => (
);
const Input = () => (
);
class é uma palavra reservada
Slide 34
Slide 34 text
const Input = () => (
);
const Input = () => (
);
É obrigatório o fechamento das tags
Slide 35
Slide 35 text
CSS no Javascript?
const Wrapper = styled.header`
color: #212121;
background: #f9f9f9;
`
const Header = ({ title }) => (
{title}
)
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Componentes
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Componentes no React
Slide 44
Slide 44 text
Funções
import React, { Component } from 'react'
const Hello = () => (
Hello React!
) export default HelloSlide 45
Slide 45 text
Classes
import React, { Component } from 'react'
class Hello extends Component {
render() {
return (
Hello React!
) } } export default HelloSlide 46
Slide 46 text
ReactDOM
ReactDOM.render(
,
document.getElementById('root')
);
Slide 47
Slide 47 text
Props e State
Slide 48
Slide 48 text
Props
Slide 49
Slide 49 text
Props
Slide 50
Slide 50 text
Props
const Input = props => (
)
Slide 51
Slide 51 text
class UserTitle extends Component {
render() {
return (
{this.props.name}
) } } PropsSlide 52
Slide 52 text
Props
class UserTitle extends Component {
static defaultProps = {
name: 'Ninguém'
}
static propTypes = {
name: PropTypes.string
}
render() {
return (
{this.props.name}
) } }Slide 53
Slide 53 text
Props
class UserTitle extends Component {
static defaultProps = {
name: 'Ninguém'
}
static propTypes = {
name: PropTypes.string
}
render() {
return (
{this.props.name}
) } }Slide 54
Slide 54 text
State
class UserTitle extends Component {
state = {
hiddenTitle: true
}
toggleTitle = () => {
this.setState((state) => ({
hiddenTitle: !state.hiddenTitle
}))
}
render() {
return (
{ !hiddenTitle && (
)
}
}
{this.props.name}
)} Hidden TextSlide 55
Slide 55 text
State
class UserTitle extends Component {
state = {
hiddenTitle: true
}
toggleTitle = () => {
this.setState((state) => ({
hiddenTitle: !state.hiddenTitle
}))
}
render() {
return (
{ !hiddenTitle && (
)
}
}
{this.props.name}
)} Hidden TextSlide 56
Slide 56 text
Loops
Map, filter, reduce…
Slide 57
Slide 57 text
let users = [
{ firstName: 'Marcio', lastName: 'da Silva' },
{ firstName: ‘Olívia', lastName: 'da Silva' },
{ firstName: 'Ana', lastName: 'Almeida' }
]
const listUser = () => (
-
{users.map(({firstName, lastName}) => (
- Name: {firstName} {lastName} ))}
Slide 58
Slide 58 text
let users = [
{ firstName: 'Marcio', lastName: 'da Silva' },
{ firstName: ‘Olívia', lastName: 'da Silva' },
{ firstName: 'Ana', lastName: 'Almeida' }
]
const listUser = () => (
-
{users.filter(({ lastName }) => lastName === 'da Silva')
.map(({ firstName, lastName }) => (
- Name: {firstName} {lastName} ))}
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Configurações
Slide 62
Slide 62 text
create-react-app
Slide 63
Slide 63 text
npm install -g create-react-app
// ou
yarn global add create-react-app
Slide 64
Slide 64 text
create-react-app my-app
cd my-app/
npm start
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Links úteis
• https://reactjs.org/
• https://medium.com/reactbrasil
• http://reactconfbr.com.br/
Slide 71
Slide 71 text
Dúvidas?
Slide 72
Slide 72 text
Dúvidas?
Slide 73
Slide 73 text
Obrigado.
@rogerAlbi rogeralbinoi roger.albino.1