Vai Na Web
O Vai na Web é um movimento de alta tecnologia e impacto social que amplia as capacidades humanas e requalifica a força de trabalho para encarar os desafios da Indústria 4.0.
Introdução
Primeiros componentes
Revisão tipo de dados
Revisão Let/Const
Revisão Mod 1
npm install -g create-react-app
create-react-app meu-projeto
cd meu-projeto
npm start
componentes
class Welcome extends React.Component {
render() {
return <h1>Oi pessoa, bem vinda ao React!</h1>;
}
}
class Welcome extends React.Component {
render() {
return (
<div>
<h1>Oi pessoa</h1>
<p>Bem vindo ao React!</p>
</div>
);
}
}
compondo componentes
criando um sticker
import React, { Component } from 'react';
class Sticker extends Component {
render() {
return (
<div>
<img
src={
"https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
}
/>
</div>
);
}
}
export default Sticker;
renderizando vários stickers
import Sticker from './Sticker'
...
render() {
return(
<div>
<Sticker>
<Sticker>
<Sticker>
</div>
)
}
variáveis
let string = 'texto';
let numero = 206;
let booleano = true;
let objeto = {
nome: 'Cicero',
idade: 24,
vivo: true,
};
let array = [ // Coisas que eu gosto
'Anime',
'Jogos',
'Musica',
];
let nome = 'Cicero';
let sobrenome = 'Matos';
renderIdade() {
return <p> 24 anos </p>
}
render
import React, { Component } from 'react';
let sobrenome = 'Matos';
class Sticker extends Component {
renderIdade() {
return <p>24 anos</p>
}
render() {
let nome = 'Cicero';
return (
<div className="App">
<p>{nome}</p>
<p>{sobrenome}</p>
<p>{this.renderIdade()}</p>
</div>
);
}
}
export default Sticker;
Vamos praticar!
feedback é um presente
referências
By Vai Na Web
O Vai na Web é um movimento de alta tecnologia e impacto social que amplia as capacidades humanas e requalifica a força de trabalho para encarar os desafios da Indústria 4.0.