React Training Course, Parte 28: React Modern Features, Idéias de Projetos, Conclusão

Hoje, na parte final da tradução do curso React, falaremos sobre os recursos modernos do React e discutiremos as idéias dos aplicativos React, criando as quais você poderá repetir o que aprendeu ao fazer este curso e aprender muito.



→ Parte 1: visão geral do curso, razões para a popularidade do React, ReactDOM e JSX
→ Parte 2: componentes funcionais
→ Parte 3: arquivos de componentes, estrutura do projeto
→ Parte 4: componentes pai e filho
→ Parte 5: início do trabalho em um aplicativo TODO, noções básicas de estilo
→ Parte 6: sobre alguns recursos do curso, JSX e JavaScript
→ Parte 7: estilos embutidos
→ Parte 8: trabalho contínuo na aplicação TODO, familiaridade com as propriedades dos componentes
→ Parte 9: propriedades do componente
→ Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes
→ Parte 11: geração dinâmica de marcação e método de matrizes de mapas
→ Parte 12: workshop, terceira etapa do trabalho em uma aplicação TODO
→ Parte 13: componentes baseados em classe
→ Parte 14: workshop sobre componentes baseados em classe, status dos componentes
→ Parte 15: oficinas de saúde componentes
→ Parte 16: a quarta etapa do trabalho em um aplicativo TODO, manipulação de eventos
→ Parte 17: quinta etapa do trabalho em um aplicativo TODO, modificando o estado dos componentes
→ Parte 18: a sexta etapa do trabalho em um aplicativo TODO
→ Parte 19: métodos do ciclo de vida dos componentes
Parte 20: a primeira lição sobre renderização condicional
→ Parte 21: segunda lição e workshop sobre renderização condicional
→ Parte 22: sétima etapa do trabalho em um aplicativo TODO, baixando dados de fontes externas
→ Parte 23: primeira lição sobre como trabalhar com formulários
→ Parte 24: Segunda lição sobre formulários
→ Parte 25: Workshop sobre como trabalhar com formulários
→ Parte 26: arquitetura do aplicativo, padrão Container / Component
→ Parte 27: projeto do curso
→ Parte 28: recursos atuais do React, idéias de projetos, conclusão
→ O fim!

Lição 46. Desenvolvendo aplicativos modernos de reação

→ Original

Muitos programadores no Facebook estão trabalhando na biblioteca do React, e membros da grande comunidade em torno do React estão contribuindo para o projeto. Tudo isso leva ao fato de que o React está se desenvolvendo muito rapidamente. Por exemplo, se você, enquanto estudava o React no início de 2019, analisou os materiais desta biblioteca, digamos, dois anos atrás, não poderia deixar de notar as mudanças que ocorreram no React desde a publicação desses materiais. Por exemplo, no React 16.3, surgiram alguns novos métodos de ciclo de vida dos componentes e alguns foram preteridos. E, digamos, no React 16.6, existem ainda mais recursos novos. É esperado um grande número de inovações no React 17.0 e em versões futuras desta biblioteca.

Agora vamos falar sobre alguns recursos modernos do React.

Muitos desses recursos dependem de qual versão da especificação ECMAScript é suportada pelas ferramentas usadas para desenvolver o projeto React. Digamos, se você usar o transportador Babel, isso significa que você possui os recursos mais recentes do JavaScript. Deve-se observar que, ao usar os recursos JavaScript em projetos que ainda não estão incluídos no padrão, você pode encontrar o fato de que, se incluídos no padrão, eles podem mudar.

Um dos recursos modernos do JavaScript que você pode usar ao desenvolver aplicativos React é a capacidade de declarar métodos de classe usando a sintaxe da função seta.

Aqui está o código para o componente App que exibe o campo de texto:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     //        handleChange(event) {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

É assim que a página deste aplicativo se parece em um navegador.


Aplicativo no navegador

handleChange() o método handleChange() como uma função de seta, trazendo o código do componente para o seguinte formato:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }   }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Durante essa conversão, pequenas alterações foram feitas no código, mas essas alterações têm um sério impacto em como o método funcionará. A this nas funções de seta indica o escopo lexical em que elas estão localizadas. Essas funções não suportam this ligação. Esse recurso de funções de seta leva ao fato de que os métodos declarados usando-os não precisam ser vinculados a this no construtor de classes.

Outra possibilidade que consideraremos aqui é usar propriedades de classe. Agora, ao inicializar o estado no construtor, usamos a this.state . Então, criamos uma propriedade de instância da classe. Agora, propriedades podem ser criadas fora do construtor. Como resultado, você pode converter o código da seguinte maneira:

 import React, {Component} from "react" class App extends Component {   //        state = { firstName: "" }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Observe que aqui nos livramos do construtor inicializando o estado ao declarar a propriedade correspondente. Tudo indica que esse recurso JS será incluído no padrão no futuro próximo.

Aqui está uma lista dos recursos do React.

• API de contexto Ele pode ser usado no lugar do Redux, embora isso não signifique que a biblioteca Redux tenha perdido sua relevância.
• Limites de erros .
• Render adereços modelo .
• Componentes de ordem superior .
• Reagir o roteador .
• Reagir os ganchos .
• Novos recursos do React 16.6 .

Em geral, pode-se notar que, como o React está se desenvolvendo muito rapidamente, é recomendável que todos os envolvidos no desenvolvimento do React monitorem constantemente as inovações desta biblioteca .

Lição 47. Reagir às idéias do projeto

→ Original

Durante o desenvolvimento do React, você e eu criamos alguns projetos - um aplicativo Todo e um gerador de memes. É possível que você já saiba o que deseja criar usando o React. Talvez você já esteja desenvolvendo seu próprio aplicativo. Se você ainda não fez uma escolha e, considerando que a prática é a melhor maneira de aprender tecnologia de computador, aqui e aqui existem materiais nos quais você encontrará várias idéias para aplicativos da Web que podem ser criados usando o React.

Lição 48. Conclusão

→ Original

Parabéns! Você acabou de concluir um curso na biblioteca React. Você se familiarizou com os blocos de construção básicos dos aplicativos React, que já podem ser usados ​​para criar seus próprios projetos. É verdade que se você deseja criar algo usando o React, esteja preparado para o fato de ainda ter muito a aprender.

Vamos passar pelos conceitos básicos que você aprendeu durante o desenvolvimento deste curso.

• JSX. O JSX permite descrever interfaces de usuário usando sintaxe muito semelhante ao código HTML comum.
• Duas abordagens para o desenvolvimento de componentes. Componentes funcionais e baseados em classe.
• Diferentes maneiras de estilizar os aplicativos React.
• Passando propriedades de componentes pai para componentes filhos.
• Usando o estado dos componentes para armazenar e trabalhar com dados.
• Renderização condicional.
• Trabalhar com formulários no React.

Obrigado pela atenção!

Caros leitores! Pedimos que você compartilhe suas impressões sobre este curso e conte-nos o que você deseja desenvolver (ou já está desenvolvendo) usando o React.