Blog

Postado em em 26 de junho de 2024

Minicurso de ReactJS – Saia do Zero com Essa Tecnologia

Quer sair do zero em ReactJS e dar seus primeiros passos com essa biblioteca de JavaScript? Você vai aprender o que precisa com esse Minicurso de ReactJS!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:

O que é ReactJs?

O ReactJS é uma tecnologia do JavaScript, então para que você entenda o funcionamento dele é importane que você tenha um certo conhecimento em HTML, CSS e JavaScript!

O objetivo do ReactJS é te permitir criar um front-end de uma forma mais visual e mais dinâmica para que você consiga criar sua interface para seu site ou aplicativo.

Vamos conseguir utilizar algumas ferramentas bem interessantes com o ReactJS para criar esses layouts que são mais visiveis, tanto que o nosso projeto completo com ReactJS será a criação de um tocador de audiobook.

Nós vamos criar uma réplica do audible da Amazon. Dá só uma olhada como ele vai ficar utilizando essa tecnologia!

Replica-do-Audible-minicurso-de-reactjs

Vou deixar aqui alguns minicursos que podem te ajudar caso você ainda não tenha nenhum conhecimento em HTML, CSS e JavaScript:

O que Vamos Precisar?

Além desses conhecimentos é importante que você tenha instalado no seu computador o NodeJS. Vou deixar aqui tanto o link da nossa publicação de instalação quanto do minicurso de NodeJS que nós temos para te ajudar:

E durante as aulas, nós vamos utilizar o Visual Studio Code, então é interessante que você tenha o mesmo editor de código para que consiga seguir o passo a passo exatamente como vamos mostrar.

É claro que se você já está acostumado com outro editor de código, pode utilizar, mas a ideia é que utilize o mesmo para que consiga acompanhar exatamente o passo a passo que vamos te mostrar.

Também já temos aqui no nosso blog uma publicação mostrando todo o passo a passo de instalação do VS Code, então se ainda não tem instalado dá uma olhada lá e volta aqui:

Projeto Completo com ReactJS

Depois das informações importantes nós podemos começar o nosso projeto. O primeiro passo é abrirmos a pasta onde vamos criar o nosso projeto e selecionar a opção Abrir no Terminal ou Arbir janela do PowerShell aqui.

Abrir-no-terminal

Já dentro do terminal, que já está com o caminho da pasta onde você vai criar o projeto, vamos utilizar o comando npm create vite@latest.

Create-vite-latest

Ao inserir esse código, você vai notar que o terminal vai te pedir algumas informações. Vai pedir o nome do projeto e qual a tecnologia que você vai utilizar para esse projeto.

Nome-do-projeto-e-tecnologia

Feito isso você vai escolher a opção de JavaScript, que é a variante, então no final você vai ter o nome do projeto, o framework e a variant.

Selecionando-o-JavaScript

Com isso vamos ter a base do nosso projeto e você vai notar que na pasta que selecionou já vamos ter a pasta do projeto (com o nome que você deu) e dentro dela já teremos alguns arquivos.

Vamos voltar ao terminal só para escrever os códigos que o próprio terminal está pedindo. Ele vai pedir para rodarmos 3 códigos: cd hashtag-books, npm install e npm run dev.

Codigos-apos-a-criacao-do-projeto

Nessa parte nós vamos instalar alguns códigos que precisam estar no nosso projeto para o Vite rodar o nosso projeto. Com isso nós temos a base de um projeto em ReactJS.

Após escrever todos os 3 códigos, você vai notar que terá um link para visualizar o seu projeto. Você pode ou copiar esse link ou clicar nele direto para abrir o seu projeto no navegador.

Link-do-projeto

O que você vai ver é a base de um projeto em ReactJS, não é o que vamos fazer, mas é a base que precisamos para criar o nosso projeto. Repare que essa página tem até um contador para te mostrar que temos uma inteligência por trás disso!

Base-do-projeto-em-ReactJS

Agora que já temos a base do projeto criado, podemos abrir o Visual Studio Code (VS Code) e dentro dele abrir o nosso projeto.

Para isso basta ir em File > Open Folder ou Arquivo > Abrir Pasta. Depois é só selecionar a pasta do projeto que acabamos de criar!

Obs.: É importante que você não feche o terminal, pois é lá que o Vite está rodando e vai permitir com que você visualize o seu projeto.

Para essa parte nós vamos utilizar o arquivo chamado App.css que é um arquivo CSS que está disponível para download, dessa forma você não vai precisar escrever nada.

Arquivo-App-jsx

Nesse caso você pode apagar o conteúdo do arquivo do Vite e colar o conteúdo desse ou simplesmente excluir o arquivo do Vite e já colocar esse no lugar.

Agora nós temos outro arquivo, chamado App.jsx que é onde vamos ter a base do nosso projeto, então você pode apagar o conteúdo desse arquivo, pois vamos escrever tudo do zero aqui dentro.

O seu código dentro do arquivo App.jsx deve ficar dessa maneira:

import './App.css';

function App() {
	return <></>
}

export default App;

Estrutura do Projeto

A estrutura do projeto vai ser o local onde nós vamos criar o código para de fato criar o nosso player de audiobook, aqui vale ressaltar que estamos trabalhando com arquivos .jsx que são arquivos de JavaScript.

Mas qual a diferença desses arquivos? Eles permitem com que você junte o HTML com JavaScript, então você pode colocar a estrutura e a inteligência da página em um único lugar.

Vamos chamar esses pedaços de códigos de componentes para compor o nosso projeto!

Antes de dar início aos componentes, nós vamos criar uma variável com as informações do livro para que seja fácil de acessar essas informações quando for necessário.

Além disso, nós vamos inserir a imagem da capa, só que para essa parte da imagem nós vamos fazer alguns ajustes, pois vamos inserir um código de JavaScript dentro do HTML, então dentro da nossa tag de imagem ao invés de colocar diretamente onde está o arquivo.

Nós vamos utilizar a variável que foi criada dentro de { }, dessa forma já vamos conseguir não só colocar o JavaScript dentro do HTML, como vamos fazer a imagem aparecer na nossa página.

import './App.css';
import brasCubasImg from './assets/bras_cubas.jpeg'

function App () {
	const informaçcoesLivro = {
		nome: 'Memórias Póstumas de Brás Cubas',
		autor: 'Machado de Assis',
		totalCapitulos: 2,
		capa: ''
	};

	return <>
		<img src= {brasCubasImg} alt='Capa do Livro' />
	</>

}

export default App;

Nós fizemos a importação das informações da imagem para a variável brasCubasImg pegando da própria imagem, assim conseguimos visualizar essa imagem dentro do nosso projeto!

Então sempre que quiser colocar uma imagem dentro do seu projeto no ReactJS você vai precisar importar essa imagem para uma variável e utilizá-la como JavaScritp dentro do seu HTML!

import './App.css';
import brasCubasImg from './assets/bras_cubas.jpeg'

function App () {
	const informaçcoesLivro = {
		nome: 'Memórias Póstumas de Brás Cubas',
		autor: 'Machado de Assis',
		totalCapitulos: 2,
		capa: brasCubasImg,
		textoAlternativo: 'Capa do livro Memórias Póstumas de Brás Cubas.'
	};

	return <></>

}

export default App;

Aqui temos o ajuste das informações do livro, pois não vamos inserir a imagem da capa diretamente, a ideia foi te mostrar como você faria para utilizar uma imagem e um código JavaScript dentro do HTML.

Veja que além das informações do livro, nós colocamos um textoAlternativo. Esse texto é muito importante e você deve ter notado que quando criamos a tag de imagem nós temos o alt.

Esse alt ou texto alternativo, nada mais é do que uma informação que vai aparecer para o usuário caso aquela imagem não seja carregada ou até mesmo para pessoas que possuem algum tipo deficiência visual.

Existem alguns aplicativos que essas pessoas usam para ler uma página por exemplo, só que uma imagem não consegue ser lida como um texto. É aí que entra o texto alternativo, pois ele vem como uma descrição da imagem.

Então não vai servir apenas para quando não conseguir carregar a imagem, mas vai auxiliar na hora de informar qual é a imagem que deveria aparecer!

Componentes do Projeto

Agora que você já entendeu como funciona a estrutura do projeto vamos partir para a criação dos componentes do projeto.

O primeiro componente que nós vamos criar é da capa, então você pode clicar com o botão direito em src e depois em new file (ou novo arquivo). O nome desse arquivo vai ser Capa.jsx.

Capa-jsx

Esse componente vai ser a inteligência necessária para que você tenha a capa do livro sendo exibida da forma correta!

Nesse arquivo nós vamos ter a função Capa que vai ter o objetivo de mostrar a imagem da capa na página, só que a ideia é que possamos receber algumas informações do nosso código principal para alimentar essa função e retornar com a informação adequada.

Com isso nós vamos receber tanto a imagem quanto o texto alternativo e vamos retornar isso na forma de imagem, dessa forma a imagem fica visível dentro da página.

function Capa (props) {
	return <img className='capa' src={props.imagemCapa} alt={props.textoAlternativo} />;
}

export default Capa;

Obs.: Você deve ter notado que temos um className nesse código, que nada mais é do que a classe dessa imagem, mas nesse caso temos que utilizar esse nome, pois class já é utilizado dentro do CSS para fazer essa referência de classe. Essa className=’capa’ é a classe da nossa capa e já existe dentro do arquivo de CSS que disponibilizamos. Isso é importante, pois se visualizar essa imagem sem a classe, vai notar que ela vai ocupar um espaço muito grande, e com a classe, que já está ajustada, já vai ficar do tamanho correto para o nosso projeto.

Imagem-capa-com-classe

Obs.2: Dentro da função, você notou que temos props, essas props são as informações que vamos passar para um coponente (passamos no código App.jsx e usamos no Capa.jsx). Na hora de usar vamos colocar props. + o nome da informação que queremos, pois estão todas em um único lugar.

Além disso, temos mais alguns ajustes no código principal. Onde vamos ter a chamada dessa função Capa e a importação dela (por isso do export default Capa) no final do código.

Esse código final permite com que você possa chamar esse código em outros códigos que você tenha, dessa forma podemos deixar tudo mais organizado e separado nos componentes ao invés de deixar um bloco gigante de código com todas as informações.

import './App.css';
import brasCubasImg from './assets/bras_cubas.jpeg'
import Capa from './Capa';

function App () {
	const informaçcoesLivro = {
		nome: 'Memórias Póstumas de Brás Cubas',
		autor: 'Machado de Assis',
		totalCapitulos: 2,
		capa: ''
	};

	return <>
		<Capa imagemCapa={informacoesLivro.capa} textoAlternativo={informacoesLivro.textoAlternativo} />
	</>

}

export default App;

Conclusão – Minicurso de ReactJS

Nessa primeira aula eu dei uma breve introdução ao ReactJS e te mostrei alguns requisitos para prosseguir com o minicurso. Lembrando que temos todos os links que você precisa já na publicação.

Tanto para aprender mais sobre HTML, CSS e JavaScript quanto para fazer a instalação de configuração do seu Visual Studio Code.

Criamos um projeto em ReactJS para dar início ao nosso projeto completo de uma réplica do Audible da Amazon, que é um reprodutor de audiobook!

Ainda definimos o que são props (que são as informações passadas para um componente) e como será feita a estrutura desse projeto, que será feita em componentes para deixar tudo mais organizado e mais fácil de entender!

Fuso Horário no Python e Horário de Verão no Python
Biblioteca Time Python – 5 Principais Funções

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?

Posts mais recentes da Hashtag Treinamentos

Procure o que você quiser sobre Excel, VBA, Power BI ou Python:

Aprenda tudo de Excel para se tornar uma referência no Mercado de Trabalho

Leve os treinamentos da Hashtag para dentro da sua Empresa

Quero saber mais
Categorias
Posts recentes