Você está aqui: React ::: Dicas & Truques ::: Passos Iniciais |
Conheça o React e aprenda a criar sua primeira aplicação usando a ferramenta create-react-app e o Apache Web Server para deployQuantidade de visualizações: 2894 vezes |
|
De acordo com a Wikipédia, o React (também denominado React.js ou ReactJS) é uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário (frontend) em páginas web. É 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. Na pesquisa de 2018 sobre hábitos de desenvolvedores do site Stack Overflow, o React foi a terceira biblioteca ou framework mais citado pelos usuários e desenvolvedores profissionais, ficando atrás somente do Node.js e Angular, respectivamente. Montando o ambiente de desenvolvimento Para o estudo, teste e desenvolvimento de aplicações React, nós precisamos organizar o nosso ambiente. No momento que escrevo esta dica (Janeiro/2020), a forma mais comum é usar a ferramenta create-react-app, que é instalada usando o npm do Node.js. Então, se você já tem o Node.js devidamente funcionando na sua máquina, basta seguir os passos abaixo: 1) Verifique se você já tem o Apache Web Server na sua máquina. Teste o seu funcionando. Se você ainda não o tiver, instale-o como parte do wamp ou xampp. Em seguida vá até a pasta htdocs e crie um novo diretório, por exemplo, "estudos_react". 2) Agora vamos instalar a ferramenta create-react-app. Abra uma nova janela de terminal e digite o comando: npm install -g create-react-app A instalação correu tudo bem? Vamos prosseguir então. 3) Hora de criar a aplicação React. Na janela de terminal, navegue até a pasta que criamos anteriormente: cd C:\xampp\htdocs\estudos_react Agora, dentro deste diretório, dispare o comando: npx create-react-app primeira_app Aguarde alguns minutos. Esse processo é um pouco demorado mesmo. 4) Hora de testar a aplicação. Na mesma janela de terminal e no mesmo diretório, dispare os comandos: cd primeira_app npm start O último comando vai iniciar o servidor de desenvolvimento (calma, ainda não é o Apache Web Server. Por padrão, este servidor vai ouvir em http://localhost:3000 e já vai mostrar a aplicação. Se isso não acontecer, abra o seu navegador neste endereço. 5) Entra em cena o Apache Web Server. Minha idéia ao envolver esse servidor é porque, em geral, uma aplicação React vai interagir com outras ferramentas, tais como PHP, Perl, MySQL, entre outras (mesmo que por meio de serviços), e o servidor Apache Web Server, por sua robutez e maior disponibilidade, é o mais recomendado nesses casos. Então, para que você não perca tempo copiando e colando arquivos, desenvolver dentro do diretório htdocs é a melhor saída. Então, vamos compilar a nossa aplicação React. Localize o arquivo package.json e adicione "homepage": "." para que os arquivos dentro do diretório static do build fiquem relativos ao index.html da raiz e não à raiz do servidor web. Vai ficar algo parecido com: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
{
"homepage": ".",
"name": "primeira_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Agora, dispare o seguinte comando dentro do diretório primeira_app: npm run build Aguarde alguns segundos, levante o Apache Web Server e acesse a URL http://localhost/estudos_react/primeira_app/build (talvez o seu Apache esteja em um porta diferente). Você verá que a aplicação React está 100% funcional. Pronto! Agora você já pode estudar, testar e desenvolver à vontade. Use "npx create-react-app" para criar a aplicação, depois use "npm start" para testar no ambiente de desenvolvimento, use "npm run build" para construir o build e finalmente faça o teste final no Apache Web Server. Quando estiver tudo finalizado, copie os arquivos do build para a entrega definitiva. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de React |
Dicas e truques de outras linguagens |
|
AutoLISP - Como retornar o nome da layer atual do AutoCAD usando AutoLISP e a variável de sistema CLAYER |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
