Live Coding: Criando aplicação REACT do ZERO
Você já ouviu falar em live coding? É uma prática em que programadores realizam uma transmissão ao vivo pela internet, mostrando todo o processo de criação de uma aplicação.
Neste artigo, vamos abordar o live coding a partir da criação de uma aplicação com o framework REACT. O REACT é uma biblioteca JavaScript muito utilizada para a criação de interfaces de usuário.
Para iniciar o live coding, é necessário ter o ambiente de desenvolvimento configurado. Vamos precisar do Node.js e do npm (Node Package Manager) instalados em nossa máquina. Com isso pronto, podemos começar a criar a aplicação.
Primeiro, vamos criar uma pasta para o projeto. Digite o seguinte comando no terminal:
$ mkdir minha-app-react
Agora, acesse a pasta do projeto:
$ cd minha-app-react
Com a pasta do projeto aberta, vamos iniciar o REACT. Digite o seguinte comando no terminal:
$ npx create-react-app .
Esse comando irá criar a estrutura básica de uma aplicação REACT dentro da pasta atual.
Nosso próximo passo é abrir o projeto em um editor de código de sua preferência. Vamos adicionar um componente básico para testar a renderização no browser.
Dentro da pasta do projeto, abra o arquivo “src/App.js” e substitua o conteúdo por:
import React from 'react';
function App() {
return (
Hello, world!
);
}
export default App;
Agora, vamos rodar a aplicação. Digite o seguinte comando no terminal:
$ npm start
Com isso, o servidor de desenvolvimento será iniciado e a aplicação poderá ser acessada no navegador através do endereço http://localhost:3000.
Pronto! Agora temos uma aplicação REACT funcionando. A partir daqui, podemos adicionar mais componentes, estilizar a aplicação e implementar funcionalidades de acordo com nossas necessidades.
O live coding é uma ótima maneira de aprender, já que podemos acompanhar o desenvolvimento em tempo real e tirar dúvidas com o programador.
Além disso, é uma forma de compartilhar conhecimento e mostrar diferentes técnicas, boas práticas e truques na criação de aplicações REACT.
Espero que este artigo tenha te inspirado a realizar seu próprio live coding, criando uma aplicação REACT do ZERO. Divirta-se programando!
aplicação vem do modo do termo, que se denomina em sel salvamento livre como .dll
uma injecção de dll fás com que no chip o script funcione como o devido modo de um softwhere, há e existe diversas camada para cada denominação do uso estipulado pelo dono.
na minha epoca éra se programador certo ? tudo bem, más programador de que, ai vinha dos devs de Java, a voce ja está fazendo um calendario inteiro, pois ainda como nos dias de hoje rende muito dinheiro !
.
Cara, coloca esse curso na Udemy URGENTE rsrsrs parabéns viu!?
Oi
O segredo para tipar o event, é dentro do componente HTML input ou, nesse caso, no componente Input do Chakra UI, você inserir ali na propriedade onChange, uma arrow function e passar o mouse em cima do parâmetro dessa Arrow, que aí ele mostra o tipo do event. Ou era só você ter colocado o mesmo tipo do onChange na função handleChange.
tem alguma live dessa sua com Javascript? @FernandaKipper
Mt boa a live!, mas ainda não achei a segunda parte =/
estava acompanhando a live e copiando os codigos mas quando fui rodar a tela fica branca e não aparece nada. Oq pode ser? Alguem pode me ajudar?
cara eu te amo. que conteudo daora que vc faz. ja vi varios videos. Todo sucesso pra vc
Eu tô apaixonado ❤ kkk
Legal!
VOCÊ É MUITO INTELIGENTE !!!! ÓTIMO LIVE.
Fer, acho q o nome eh vit mesmo que fala, =]
Vite (French word for "quick", pronounced /vit/, like "veet")
Você é linda.
Essa mina programa de verdade, não é igual outras ai que é só github bonitinho e videozinho copiado de gringo, não vou citar nomes.
❤️
Muito legal! Nunca tinha usado o chakara antes, sempre usei styled components, vou usar no meu próximo projeto.
16:22 na verdade o SWC é o novo transpiler escrito em Rust, a ideia dele é substituir o babel, já que ele é MUITO mais rápido! Alguns testes citam que ele é até 70x mais rápido em relação ao bom e velho babel. Você confundiu SWC com o SWR kkk
Eu abri o video por acaso ja estou em 1:34:27de video, Parabéns pela aula, mais um escrito <3
Você explica muito bem Fernanda, tô iniciando agora no Front, e tá me ajudando bastante!