✅ Como criar COMPONENTES e PÁGINAS utilizando a extensão REACT TOOLS para Visual Studio Code?

Fala Dev, beleza?

Neste vídeo eu vou está te ensinando a como criar Componentes para React JS, React Native e Next JS, utilizando a extensão React Tools no Visual Studio Code, bem como criar Páginar para seus projetos com Next JS.

Vou estar te ensinando passo-a-passo sobre como esta extensão torna a criação de Componentes e P[aginas muito mais rápida e eficiente. Você não mais vai estar precisando se preocupar em criar pastas e arquivos manualmente com a extensão .tsx ou .jsx e nem ficar digitando snippets para geração da base inicial de código do seu componente.

Com a extensão React Tools você poderá criar os seus componentes sendo os mesmos organizados por pastas, onde cada pasta pode conter o arquivo do componente e o arquivo de estilização do componente e também poderá estar criando componentes nomeados, onde neste caso, os componentes serão criados diretamene na pasta indicada por você e juntamente com o componente poderá ser criado o arquivo index.ts contendo o export de cada componente criado por você.

Através das configurações da extensão é possível definir:
- Qual a extensão dos seus componentes , através da opção File Extensions (tsx, jsx e js).
- Qual o formato de estilização será utilizado através da opção Styles Format (Styled Components, SCSS, LESS, CSS).
- Se os seus componentes serão criados utilizando Arrow Function ou Regular Function.
- Se na criação dos compoentes nomeados se será criado um arquivo de index com os exports para cada componente, através da opção Use Barrel.
- Se será utilizado em seu projeto o recurso de CSS Module.
- Se os componetes criados utilizarão Export Default ou Named Export.
- Se na tipagem dos componentes com typescript se será utilizado o tipo React.FC.
- Se o import do React será utilizado a cada componente através da opção Use React Import.

? Capítulos:
00:00 - Introdução.
01:08 - Apresentação da extensão.
02:16 - Instalação da extensào.
03:11 - Visualizando as opções de configuração da extensão.
08:57 - Criando componentes (separados por pasta) para React JS e Next JS.
17:35 - Criando componentes nomeados para React JS e Next JS.
25:31 - Criando páginas para projetos com Next JS.
26:51 - Criando componentes (separados por pasta) para React Native.
28:11 - Criando componentes nomeados para React Native.
29:19 - Configurando a extensão por projeto e como adicionar a extensão React Tools às extensões recomendadas do projeto.
33:12 - Encerramento.

? Link para o material utilizado no vídeo: https://bit.ly/3a9Oe4l

? Link para a extensão React Tools do Visual Studio Code https://marketplace.visualstudio.com/items?itemName=ricardo-emerson.create-react-tsx-component

Se você gostou do conteúdo do vídeo, peço que deixe o seu like e se inscreva no canal.

? Compartilhe esse vídeo com seus amigos devs: https://youtu.be/jCwgZzpMTwk

? Participe do canal no Telegram, segue o link https://t.me/devclassricardo

? Ganhe descontos e cupons em suas próximas compras se cadastrando na CUPONOMIA e já ganhe R$ 5,00 de bônus se cadastrando pelo meu link: https://www.cuponomia.com.br/ref/0ac2c186527b



#reactjs #nextjs #reactnative #vscodeextensions