Como configurar um projeto do React a partir do zero

Krissanawat Kaewsanmuang Blocked Desbloquear Seguir Seguindo 1 de janeiro

recurso curso Reagir

Saiba Pure React – Um Mergulho Interativo Profundo no básico do React.js
Bem-vindo ao Learn Pure React. Vou ensinar os principais conceitos do React, isoladamente, sem Redux, Webpack… www.educative.io
Fundamentos JavaScript antes de aprender Reagir
Depois de ensinar React extensivamente (mais de 33.000 alunos), seja on-line para um público maior ou no local para empresas… www.educative.io

Apesar da popularidade do React, configurar o aplicativo para começar foi uma tarefa difícil. Para combater isso, o Facebook veio com o create-react-app que ocultava as complicações e expunha um aplicativo funcional ao usuário final. Hoje, dedique algum tempo para entender a complexidade do aplicativo de fácil resposta!

Configurar tudo sozinho pode não parecer muito prático e você não deve fazer em muitas situações. No entanto, pode ser importante entender as coisas que estão por dentro. No caso, se você não gostar do boilerplate create-react-app algum dia, crie seu próprio clichê e inicie cada projeto com ele.

Certifique-se de ter instalado:

  1. NodeJS
  2. npm
  3. terminal
  4. um editor de texto

Bibliotecas para configurar reagem do zero:

Nós estaremos usando webpack e babel para configurar reagir, e eu não quero que você fique confuso.

  1. Babel é o compilador do JavaScript de próxima geração . Ele compila o novo JavaScript (ES6 / 7/8) para o padrão ES5 mais antigo para executar o mesmo em navegadores antigos e novos.
  2. O Webpack é um empacotador de módulos. Usaremos a abordagem de vários diretórios e de vários arquivos para facilitar o gerenciamento do projeto. O Webpack reunirá todos os nossos arquivos em um só, oferecendo melhor desempenho e gerenciamento de dependência mais fácil.

A configuração gira em torno dessas ferramentas, então vamos chegar à configuração em detalhes.

Vamos começar, ligue o poderoso terminal!

 mkdir reagir-de-scratchcd reagir-de-scratchnpm init -y 

Isso cria um diretório react-from-scratch e inicializa o projeto do nó, o sinalizador -y é usado para ignorar todas as perguntas com respostas padrão.

Agora que temos um diretório para realizar nosso projeto, vamos instalar reagir

npm instalar reagir reagir

ver raw install-react.sh hospedado com

por GitHub

Isto irá instalar react e react-dom .

node_modules pasta node_modules armazenará todos os módulos e suas dependências.

package.json contém informações sobre nome, dependências e mais scripts.

package-lock.json é usado para integridade de dependência, não há 'corre bem no meu computador'.

O que é react e react-dom ?

react é a biblioteca que define os componentes de visualização, os componentes React.

react-dom é a biblioteca que cria a visão. react-dom é equivalente ao DOM da Web. Cria e exibe a página da web.

A separação permitiu que o React fosse usado em várias plataformas, alterando apenas a biblioteca de renderização no lugar de react-dom . Reagir renderizações nativas para o iOS e o Android. O ReactVR é para dispositivos de RV.

Inicializando o servidor de desenvolvimento do Webpack

Nós temos uma maneira de criar e renderizar componentes React agora. Ainda temos que enviar esses componentes para o navegador para mostrá-los. É para isso que o servidor web é usado.

npm instalar webpack webpack-dev-server webpack-cli – salvar dev

ver raw webpack-dev-server.sh hospedado com

por GitHub

O --save-dev salva como dependências de desenvolvimento. Eles não farão parte do build final que é implantado no servidor, eles serão usados para o processo de desenvolvimento. webpack-cli é necessário para executar o projeto a partir do terminal.

webpack deve ser instalado porque o webpack-dev-server depende dele. Este dev-server irá viver-recarregar nosso aplicativo.

Criando um aplicativo React

No diretório raiz, que denominei react-from-scratch , crie um novo arquivo index.html . Este será o arquivo principal servido ao navegador.

 <! DOCTYPE html> 
<html lang = "en">
<cabeça>
<meta charset = "UTF-8">
<title> Projeto de amostra do ReactJS </ title>
</ head>
<body>
<div id = "root"> </ div>
<script type = "text / javascript" src = "bundle.js"> </ script>
</ body>
</ html>
  • Os componentes reagir irão no div com id root .
  • O script bundle.js será criado usando o webpack, que conterá todo o nosso código de reação, incluindo biblioteca e renderizador, no formato adequado.

Crie um arquivo index.js , com o seguinte código

 importar Reagir de 'reagir'; 
import {render} de 'react-dom';
 render ( 
React.createElement ("div", null, "Hello World"),
document.getElementById ("root")
);

O React deve ser importado para um aplicativo de resposta. render método render é importado da react-dom usando a desestruturação.

render leva dois argumentos: o primeiro é o componente e o segundo é o local.

React.CreateElement é uma API do React de nível superior. Cria elementos, nenhum JSX invloved.

Como não é muito prático sem o JSX, substituiremos o componente </App> posteriormente.

 importação Reagir de 'reagir' 
import {render} de 'react-dom'
importar App de './containers/App'
 render (<App />, document.getElementById ('root')) 

document.getElementById("root") é nossa localização em index.html .

Configurando um servidor de desenvolvimento do Webpack

Instalamos o webpack, mas ainda precisamos fazer uso dele.

De volta ao terminal,

webpack-dev-server irá compilar nosso código e servidor em localhost:8080 do que não conseguirá encontrar ./src . Isso ocorre porque o webpack está esperando o index.js no ./src/ . Você pode mover o index.js para src ou modificar o arquivo package.json ou configurar o arquivo de entrada no arquivo de configuração do webpack. A última opção é a mais preferida e usaremos a mesma sem nos mover.

 mkdir webpackcd webpacktouch webpack.dev.config.js 

Crie um webpack diretórios com um arquivo webpack.dev.config.js .

Defina o ponto de entrada no webpack.dev.config.js

 var webpack = require ('webpack'); 
var path = require ('caminho');
 module.exports = { 
entrada: [
path.join (__ dirname, '../index.js')
]
}

Ele usa o webpack como dependência e define o ponto de entrada para index.js

Precisamos carregar os módulos, então modifique o webpack.dev.config.js para

 var webpack = require ('webpack'); 
var path = require ('caminho');
 var parentDir = path.join (__ dirname, '../'); 
 module.exports = { 
entrada: [
path.join (parentDir, 'index.js')
]
module: {
regras: [{
teste: /.(js|jsx)$/,
exclude: / node_modules /,
carregador: 'babel-loader'
}, {
teste: /.less$/
carregadores: ["style-loader", "css-loder", "less-loader"]
}
]
}
output: {
caminho: parentDir + '/ dist',
nome do arquivo: 'bundle.js'
}
devServer: {
contentBase: parentDir,
historyApiFallback: true
}
}

Ele contém um monte de regras:

Ponto de entrada

index.js é o ponto de partida para todos os scripts.

Os pacotes

  • babel-loader para carregar arquivos jsx.
  • less-loader para carregar menos arquivos
  • less-loader requer less como uma dependência de peer.

Instale todas as dependências e dependências de pares com:

npm install --save-dev style-loader css-loader less-loader less

A saída

O arquivo empacotado é denominado bundle.js e contido pelo diretório dist .

Servidor de desenvolvimento

O diretório atual é usado como um diretório base e.

Configurando o babel

Precisamos que o babel converta o código ES6 em ES5.

Instale o babel e suporte a bibliotecas com

npm install --save-dev babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-register

Configure o aplicativo reagir para usar o babel no package.json .

 "babel": { 
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-object-rest-spread"]
}

Ele também usa um plugin para suportar o operador de descanso / propagação.

Faça as alterações no index.js , use o componente App vez de criar elementos manualmente.

Este é o nosso novo index.js

 importação Reagir de 'reagir' 
import {render} de 'react-dom'
importar App de './containers/App'
 render (<App />, document.getElementById ('root')) 

Crie o arquivo ./containers/App.js para servir o aplicativo

 mkdir containerscd containerstouch App.js 

Agora preencha o App.js com algum código React básico

 import React, {Component} from 'react'; 
 class App estende o componente { 
render () {
return <p> Olá da App! </ p>
}
}
exportar App padrão

Queremos criar um script que execute este aplicativo para nós.

 "scripts": { 
"test": "echo " Erro: nenhum teste especificado "&& exit 1",
"dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"
}

npm run dev executará o webpack-dev-server a partir dos módulos do nó com o arquivo de configuração de ./webpack/webpack.dev.config.js .

Isso é o que eu recebo

npm run dev

Se você receber um aviso, adicione um modo no arquivo de configuração do Webpack para removê-lo.

Verifique o mode: 'production', código comentado mode: 'production', acima. Outros modos são 'develpment' e 'none' .

A porta padrão é 8080.

Ajuste a configuração para suas escolhas e aproveite sua configuração.

Cursos JS React em destaque

Reagir 16 – O Guia Completo (incl. React Router 4 & Redux)

4,7 / 5 estrelas || 33,5 horas de vídeo || 61.597 estudantes

Aprenda Reaja ou mergulhe mais fundo nela. Aprenda a teoria, resolva tarefas, pratique em projetos de demonstração e construa uma grande aplicação que é melhorada ao longo do curso: O Burger Builder! Saber mais.

Reagir 16 – O Guia Completo (incl. React Router 4 & Redux)
Mergulhe e aprenda Reagir do zero! Aprenda Reactjs, Redux, React Routing, Animações, Básico Next.js e muito mais! thebestdevlist.link

Notas de encerramento: