Loading repository data…
daniel-oliv3 / repository
ReactJS é uma biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário em páginas web.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
O React (também denominado React.js ou ReactJS) é uma biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário em páginas web.
Criado em 2011 pelo Facebook, com a criação de views declarativas e baseando-se em componentes, possuía o intuito de otimizar a atualização e a sincronização de atividades simultâneas no feed de notícias da rede social e melhorar a manutenção de código.
É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. É utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros.
Em 2015, o Facebook anunciou o módulo React Native, que em conjunto com o React, possibilita o desenvolvimento de aplicativos para Android e iOS utilizando componentes de interface de usuário nativos de ambas plataformas, sem precisar recorrer ao HTML.
ReactJS
ViteJS
NodeJS
Node
(Terminal VSCode)
Verifica a versão do node instalado
node -v
npm create vite@latest
node_modules)npm install
npm run dev
npm create vite@latest
node_modules)npm install
npm run dev
Your First Component
Exemplo
npm create vite@latest
node_modules)npm install
npm run dev
npm run dev
npm run dev
npm run dev
npm run dev
npm run dev
npm run dev
Aviso: Cada filho em uma lista deve ter um prop "chave" (key) exclusivo.
Exemplo
npm run dev
API Reference
Exemplo
npm run dev
npm run dev
Git
git -v
git init
git status
Untracked files
git add .
Commit
Author Identity
git config --global user.email "seuemail@gmail.com"
git config --global user.name "John Doe"
git commit -m "hook state 01"
git log
Branch
git branch 01_hooks
git checkout 01_hooks
git checkout master
npm run dev
Git
git remote add origin https://github.com/daniel-oliv3/reactjs_bem-vindos-a-uma-nova-jornada.git
git push -u origin master
Branche
git push -u origin 01_hooks
npm run dev
Clone
git clone https://github.com/sys4soft/react_next_hooks.git
npm run dev
Branche
git branch 02_hooks
git checkout 02_hooks
Untracked files
git add .
git commit -m "hook state 02"
git push -u origin 02_hooks
git status
npm run dev
Branche
git branch 03_hooks
git checkout 03_hooks
git add .
git commit -m "hook state 03"
git push -u origin 03_hooks
git status
Criar um componente que vai apresentar 3 contadores criados a partir do mesmo componente
Roda o projeto
npm run dev
Branche
git branch 04_hooks
git checkout 04_hooks
git add .
git commit -m "hook state 04"
git push -u origin 04_hooks
git status
Criar um componente que vai apresentar um UseState (valor)
Criar outro componente, a ser apresentado dentro do componente anterior, que vai ter
Roda o projeto
npm run dev
Branche
git branch 05_hooks
git checkout 05_hooks
git add .
git commit -m "hook state 05"
git push -u origin 05_hooks
git status
<!--
----- Execício 04 -----
- (pai)
valor: 1000
- Filhos
<b- b+> (5 em 5)
<b- b+> (10 em 10)
-->
npm run dev
Um componente PAI tem 3 componentes de inc e dec (a mesma instância)
O componente pai tem um state que é um array de valores númericos
Cada componente vai comtrolar um valor desse array
Os três valores do array devem ser apresentados no componente pai
Exemplo
Criar um componente que contem um objeto clientes coom as seguintes propriedades: { Nome Apelido Cidade Email }
O componente tem que ter 4 botões
Cada botão altera o valor de cada uma das propriedades individualmente
SEM EXECUTAR FUNÇÕES INDIRETAS
Os valores devem ser apresentados
Exemplo
Apresentar um parágrafo com "Usuario logado"
Um botão vai controlar se o usuario está logado ou nçao (fake)
alterando o valor de um state.
Exemplo
Selecionar uma opção num select (com 3 opções)
Apresentar o componente correspondente
Exemplo
Temos um botão e um parágrafo
O parágrafo tem uma classe de CSS (paragrafo)
Adicionamente tem outra classe (classUm ou classDois)
A ideia é o botão alternar entre classUm e classDois, mantendo a classe parágrafo
NOTA: Obviamente, o resultado da alternancia de classes deve refletir-se no aspecto visual do elemento
Exemplo
Vamos criar um componente que vai apresentar condicionalmente um componente A ou B no seu interior.
A apresentação do componente A ou B dever ser controlada pelo click de um botão
Exemplo
Como obter dados a partir de um input e apresentar no browser
Exemplo
Exemplo
REST Countrie
REST Countrie
Exemplo
Selected from shared topics, language and repository description—not editorial ratings.
marceloodomingos /
🍋 Uma plataforma de desenvolvimento digital que busca ajudar iniciantes e pessoas que desejam um futuro de sucesso no mundo da tecnologia.
38/100 healthmuradpontes /
Aplicação web feita para o restaurante Liá Bistrô utilizando nextjs, nodejs, typescript, reactjs, postgresql, prisma, tailwindcss e uma API com expressjs.
41/100 healthoArthurCandido /
This is a ToDo list Fullstack app, an original project created for educational purposes. | Essa é uma aplicação fullstack ToDo list, um projeto autoral criado para fins educacionais.
BrunoHenrique00 /
Esse é o Cardápiu 📖, uma aplicação para vendedores colocarem seus produtos numa vitrine online, personalizável e ainda receber pedidos pelo WhatsApp!
22/100 healthRomeusorionaet /
Plataforma Patreon é a melhor plataforma para quem busca proximidade de seus influenciadores favoritos. Este projeto é apenas um clone, uma sombra da plataforma Patreon, criado apenas para fins de portfólio.
35/100 healthcarlosmfreitas2409 /
O Podcastr é uma plataforma para transmissão de podcasts. Desenvolvido durante a NLW#5 da @Rocketseat.
45/100 health