Agora, neste curso de atualização, o Module Yeater não escreverá um aplicativo de reação complexo, porque essa simplesmente não
é a idéia deste módulo.
Escreveremos um aplicativo realista no módulo principal mais adiante neste curso, depois deste módulo, onde trabalharemos no
projeto do curso.
Então isso é apenas uma atualização aqui.
E me concentro nos principais elementos de reação, Stael, para e não na criação de um aplicativo incrível.
Portanto, REACT tem tudo a ver com componentes e, portanto, normalmente dividimos nosso aplicativo em componentes.
Agora vamos começar sem dividi-lo.
E, em vez de emitir H uma tecnologia aqui, um aplicativo, usarei uma div, digamos nessa div.
Vamos adicionar mais código h html.
Estou dizendo que h html aqui é claro que é J é X, mas já está traduzido para duas notas do HCM Altidore.
Direita.
Mas é J é X.
Portanto, aqui poderíamos ter H para marcar onde dizemos causar metas e abaixo que queremos ter uma lista ou adicionar uma lista
de nossas metas de curso.
E eles são um objetivo.
Poderia ser.
Pai, queremos terminar o curso.
Que queremos aprender tudo sobre o curso.
Tópico principal e que queremos, digamos, ajudar.
Nossos alunos do curso, CU e.
Uma seção, e isso poderia ser um pouco de ouro.
Agora, uma aplicação muito trivial.
Agora, eu não tenho nenhum estilo espetacular especial aqui, e é por isso que salvamos e divulgamos isso.
Mas agora vou adicionar um pouco de estilo e, para isso, vou adicionar um aplicativo, o arquivo da Sears aqui e importar Deadfall
para o arquivo JavaScript.
Obviamente, isso não é possível em Manila, JavaScript, mas por causa disso, nas ferramentas do Nien, que
Nien analisa nossos arquivos e depois transforma o código.
Isso é possível e isso é simplesmente transformado para injetar esse código CSX no H.
Arquivo Timal também.
Agora aqui, eu darei um C como classe.
E há uma coisa especial.
O atributo de classe como este não existe e J é X porque class é uma palavra-chave em JavaScript.
Então é o nome da classe.
E é assim que você adiciona classes siestas aos elementos e J é X.
Tudo isso, é claro, é uma espécie de prova ou lembra o fato de que esse não é o H Tim.
Mas H Tim.
Sintaxe de aparência coruja, todos nomeados como lista de objetivos de classe aqui e agora, aqui podemos.
Define alguns estilos para o Gollust aqui, e simplesmente definirei a lista como estilo para não aqui, removo uma
margem ou dou uma margem de duas ram superior e inferior e um preenchimento de zero.
E em cada item da lista de objetivos, adicionarei uma margem de um cômodo superior e inferior zero, dois à esquerda e à direita e,
em seguida, simplesmente uma borda de um pixel sólido.
E então esta cor acinzentada aqui e um preenchimento de um carneiro.
Esse é um estilo muito, muito simples, porque eu não quero gastar muito tempo escrevendo escrevendo como
estilos aqui.
Agora, talvez um ajuste.
Vamos realmente dar à lista uma margem de duas faixas em todas as direções.
Agora, temos esta lista de nossos objetivos para ajustar os objetivos do curso aqui no topo.
Eu também vou.
Dê a este d'Hiv um nome de classe, é claro, caveiras.
E então em D. C. como arquivo dos EUA.
Talvez no topo possamos deter as metas do curso e seus d. h para marcar para alinhar no centro.
Bem desse jeito.
Agora, novamente, objetivos muito Euge.
Mas isso é bom para o discurso aqui.
Estamos apenas praticando reagir.
Então, temos essas metas de curso aqui.
Impressionante.
Obviamente, essa é uma marcação muito simples.
Agora, o que você costuma reagir ao dividir isso em mais componentes, por exemplo,
terceiriza essa lista em um componente separado para manter cada componente por si próprio relativamente enxuto e
focado em uma tarefa.
Para isso, podemos adicionar uma pasta sup de componentes aqui na pasta de origem.
E lá vou adicionar uma lista de objetivos J. S. Arquivo.
Isso manterá meu componente da lista de objetivos.
Agora, para criar um novo componente, precisamos primeiro importar, reagir de reagir.
Caso contrário, não podemos usar esse J como X Syntex.
E então eu mencionei morto.
Um componente é uma função.
E, a propósito, você também pode criar com a palavra-chave function ou.
Com uma expressão de função ou.
Com a função Arrow, logo o texto que eu usei antes, era apenas um somático que vou usar aqui,
mas isso não é obrigatório.
E aqui exporto minha lista de objetivos dessa maneira.
E agora aqui, eu volto.
Essa lista não ordenada, sal, recorte aqui e, em seguida, inclua, aqui está um valor de retorno e,
se houver uma reforma, você verá automaticamente esses parênteses serem adicionados ao redor para que possa ser bem formatado
em várias linhas.
Caso contrário, isso não seria JavaScript válido.
O mesmo acontece com os parênteses.
É porque o JavaScript sabe que esse bloco pertence um ao outro.
Então agora temos a lista de objetivos aqui e um aplicativo.
Sim, agora podemos importar nosso componente da lista de objetivos.
Você pode nomear aqui como quiser.
Não precisa ser o mesmo nome com o qual você o exporta aqui.
O importante é que ele comece com um caractere maiúsculo aqui no Abcess e com uma importação da pasta de
componentes e eles sejam da lista de objetivos.
E como mencionei anteriormente, você pode omitir D. extensão de arquivo aqui.
Não é necessário.
E então aqui você usa a lista como um J. regular S. Elemento X, como um elemento H tim L comum, você poderia
dizer.
Mas como não temos conteúdo entre as tags de abertura e fechamento, podemos e precisamos escrever uma tag de fechamento
automático aqui.
Isso não seria permitido.
Você sempre tem que fechar impostos e jazz x.
Portanto, esse seria agora o meu componente da lista de objetivos.
E, portanto, se tivermos segurança, veremos a mesma saída de antes.
Também temos o mesmo estilo, porque os estilos aqui são sempre aplicados globalmente, mesmo que você os importe para um
arquivo de componente específico.
E ainda assim, é uma boa prática configurar os estilos no arquivo CSX ao lado do componente ao qual eles pertencem.
Portanto, adicionarei uma lista de objetivos C como arquivo s.
Adicione minha lista de objetivos Stollsteimer e importe essa lista de objetivos.
O CSX se enquadra no arquivo JavaScript da lista de objetivos.
Isso não é obrigatório, mas facilita a localização dos estilos que pertencem a esse componente.
Lembre-se de que os estilos não têm escopo definido automaticamente para um componente, embora as regras normais como
s sejam aplicadas porque todo esse C é o seguinte, independentemente de onde você os importa, são aplicados globalmente em
toda a página.
Com isso, porém, voltamos ao mesmo resultado de antes.
Então, por que fizemos isso?
E por que dividimos isso se temos o mesmo resultado de antes?