- Node.js
- React.jsx
Instalar o react:
npm i -g create-react-app
criar novo projeto:
create-react-app nomeDoProjeto
Rodar projeto:
npm start
O React salva os componentes da aplicação em um DOM virtual, basicamente é este snapshot do React
- Mais rápido. Quando se altera a DOM em HTML puro, toda a página é recarregada. Com a DOM virtual, apenas os componentes que se alteraram são recarregados.
- Os arquivos React tem a extensão .jsx, mas um .js funciona do mesmo jeito
- Sempre importar o React em todos .jsx e .js
import React from 'react'
- No arquivo que irá reeinderizar algo (como o index.js). importar o ReactDom também para injetar o código na página
import ReactDOM from 'react-dom'
ReactDOM.render(HTML, document.getElementById('root'))- Sempre escrever com contra-barra '/' elementos tag sem fechamento!
- Por convenção, os coloco numa pasta chamada 'components'
- Os nomes dos componentes tem de ser MAIÚSCULOS para o plug-in do react reconhecê-lo como componente
- Quando exportar um componente do React, preciso mandálo envolto em 1 tag apenas
export default () => {
<div>
<h1>Passando</h1>
<p>Tenho de envolvê-lo em 1 tag e passálo</p>
</div>
}- Posso não mandar uma tag que vai envolver também, só usar:
export default () => {
<React.fragment>
<h1>Passando</h1>
<p>Só mandei os elementos, sem a div de lá de cima</p>
</React.fragment>
}ou
export default () => [
<h1 key='titulo'>Passando</h1>,
<p key='paragrafo'>Só mandei os elementos, sem a div de lá de cima</p>
]Estas key são para o React colocar na tela de maneira mais fácil
Criando função default dentro do componente
pai
import tantoFazONome from './diretório'filho
export default function() {
return <h1>Texto</h1>
}Criando funções em 1 arquivo que retornam 1 componente por função
pai
import {Componente1, Componente2} from './diretório'
// ou
// import ObjetoDeComponentes from './diretório'
// const Componente1 = ObjetoDeComponentes.Componente1filho
export const Componente1 = function() {
return <h2>Componente 1</h2>
}
export const Componente2 = function() {
return <h2>Componente 2</h2>
}
// ou
// export default { Componente1, Componente2 }Passando variáveis para o componente
pai:
<Componente1 variavel1="passou" ouAssim={Guilherme} />filho:
export default function(props) {
return <p>Tudo { props.variavel1 } e o nome dele é { props.ouAssim }!</p>
}Passando variáveis dentro do HTML
export default function() {
const variavel
return <h1>Texto { variavel }</h1>
}Criando
import React from 'react'
export default class Componente extends React.Component {
// Este é um objeto padrão do React para alterar valor usando o this.setState()
state = {
nome: '';
}
render() {
//Função chamada assim que inicia o componente
const {nome} = this.state
return (
<input
type="text"
value="nome"
placeholder="Digite aqui..."
onChanges="e => setValue(e)" />
)
}
// React NÃO TEM TWO WAY DATABINDING
// Função para Alterar valor de input no React
setValue(event) {
this.setState({ nome: event.target.value })
}
}Props é um objeto que recebe os parâmetros do pai
Usando construtor
constructor() {
super(props)
// Salvando o contexto das funções que criei
this.funcoesQueCriei = this.funcoesQueCriei.bind(this)
}O construtor é opcional
- Importar arquivo css
import './diretório'- Atribuir a classe ao elemento
<div className="nome-da-classe"></div>- Presentational (Skinny, Dumb, Stateless)
- Componentes que reinderizam apenas um HTML e CSS recebendo props, sem state local.
- Container (Fat, Smart, Stateful)
- Utilizam um componente de apresentação e passam props para eles. Os states ficam neste componente