Primeiros passos com React – Conceitos Básicos

Primeiros passos com React – Conceitos Básicos

22/09/2018 0 Por Alisson Suassuna

E aí galera, no artigo dessa semana vamos dar nossos Primeiros passos com React, uma das bibliotecas mais utilizada no desenvolvimento web no mundo, vamos ter uma série de artigos sobre React no blog então fica ligado para não perde nada, assim como estamos fazendo com VueJS. Então chega de conversa e vamos estudar React.

O que é React?

Primeiros passos com React

Primeiros passos com React

Segundo a própria documentação da ferramenta, o React é uma biblioteca JavaScript para criar interfaces de usuário, ou seja, o React não é um framework, podemos utilizar ele com outros frameworks ou não.

Onde devo usar o React?

Primeiros passos com React

Primeiros passos com React

O React se encaixa bem para aplicações dinâmicas, interfaces interativas, com muita manipulação de DOM, exemplos:

  • Webapps;
  • Mobile apps;
  • Sistemas de administração de CRM.

Onde não devo usar o React?

Primeiros passos com React

Primeiros passos com React

  • Websites institucionais;
  • Blogs

Veja não é que não podemos usar, você pode usar em qualquer sistema, mas não é recomendado, pois normalmente blogs e sites institucionais não tem conteúdos dinâmicos, normalmente são apenas conteúdos estaticos que seus clientes consomem.

Problemas que o React resolve !!

Primeiros passos com React

Primeiros passos com React

  • Modularização (Separação de responsabilidade);
  • Componentização (Tudo no React é componente);
  • Performace (Manipulação de DOM, usando o DIFF, DOM virtual).

Primeiros passos com React (Código base)

 

Primeiros passos com React

Primeiros passos com React

Visão geral

Vamos entender juntos esse código base, a primeira coisa que devemos estar ciente é que em uma aplicação real não usamos o React dessa forma, estamos fazendo dessa forma para facilitar as explicações, você deverá concorda comigo que não faz sentido criar toda estrutura de um projeto real para darmos nossos Primeiros passos com React, à medida que formos avançando no conhecimento, aí sim criamos uma estrutura real com o reatc-create-app ferramenta criada pelos mantenedores que auxilia a criação da estrutura do projeto.

inspecionando elementos do DOM

Estamos prontos para iniciar nossos estudos sobre React, vamos dar nossos primeiros passos em React, mas antes disso vamos abrir nosso browser e inspecionar nosso elemento HTML.

Primeiros passos com React

Primeiros passos com React

Criando nosso primeiro elemento com React

Observe o nosso código base, importamos dois scripts via CDN, primeiro o React, segundo ReactDOM, quando fazemos essa importação esses objetos se tornam global na aplicação, então vamos olhar o que são eles, voltando lá no inpercionar do seu navegador preferido.

Primeiros passos com React

Primeiros passos com React

Veja que temos várias propriedades desse objeto React, o que nos interessa no momento é o createElement(). Depois de entendermos isso, vamos criar nosso primeiro elemento usando o React, escrevendo o seguinte código…

Primeiros passos com React

Primeiros passos com React

A função createElement() recebe trés parametros, primeiro qual elemento HTML desejamos criar, atributos, e por ultimo o conteúdo desse elemento. Vamos inspecionar esse elemento criado pelo React. Veja temos typeoff que é um tipo interno do React, as props que são os atributos desse elemento, dentro dos props temos o children com o conteúdo do elemento, o type do elemento etc. Note que os elementos criados pelo HTML e React não são iguais, isso é primordial que entendermos para sermos capazes de resolver eventuais erros em nosso código.

Renderizando nosso primeiro elemento na tela

Criamos uma <div> com um id “app” em nosso documento HTML , no script usamos a função ReactDOM.render() essa função é usando para rederizar algo na tela do browser, ela receber dois parametros, primeiro qual elemento desejamos redenrizar, segundo onde vamos fazer isso, em nosso caso na <div=”app”>.

Primeiros passos com React

Primeiros passos com React

Comparando elementos

Primeiros passos com React

Primeiros passos com React

Aqui está uma das principais diferenças do React com outras bibliotecas existentes, ele não cria logo um elemento e sim um objeto que representa esse elemento, quando esse é redenrizado aí sim passa ser um “elemento” de fato.

Conclusões

Esse foi o primeiro artigo sobre React, vamos ter uma série explicando todo o funcionamento e até criar um pequeno projeto no final, esses conceitos apresentados aqui são a essencial para você que deseja aprender de verdade React, deixa um comentário, se gostou do artigo compartilha com seus amigos e deixa um like.

Recomendações de Cursos e Livros

React + Redux: Fundamentos e Duas Apps do ABSOLUTO ZERO!

Ótimo curso galera…

CLIQUE AQUI PARA VISUALIZAR O CURSO

Javascript. O Guia Definitivo

Esse livro é muito bom galera, muito completo tenho ele a algum tempo e me ajudou muito a entender o JavaScript de verdade, vale muito apena o investimento.

CLIQUE AQUI PARA VISUALIZAR O LIVRO


CLIQUE AQUI PARA VISUALIZAR O LIVRO