- Preparación de un entorno de trabajo profesional con React.js
Tabla de Contenido
- Configuración Básica de React
- Instalación de React
- Creando componente de prueba
- Instalando Babel
- Instalando Webpack
- Instalando WebpackDevServer
- Instalando Sass
- Creando las carpetas de nuestros estilos
- Configurando Eslint
- Agregando gitignore
-
Creamos nuestra carpeta de proyecto
-
Abrimos la terminal y nos ubicamos dentro de la carpeta
-
Creamos el package.json
npm init -y- Creamos las carpetas y archivos principales que son
mkdir /src -- donde vive nuestro proyecto mkdir /public -- estan son elementos que se enviaran a produccion
Dentro de /src/ creamos: mkdir /components -- Donde estan nuestros react components
En /src/ creamos el archivo: touch /src index.js -- entrada de nuestro proyecto
En la carpeta /public/ creamos el archivo touch /public index.html --
En la terminal ingresamos:
npm install react react-domEn nuestro archivo src/index.js escribimos:
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
ReactDOM.render(<HelloWorld />, document.getElementById('app'));Ahora, en el public/index.html colocamos:
<!DOCTYPE html>
<html>
<head>
<mate charest="utf-8" />
<title>Hello world!</title>
</head>
<body>
<div id="app"></div>
</body>
</html>En la terminal ingresamos:
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-devRecordemos que - -save-dev es para instalar dependecias de desarrollo
En la raiz de nuestro proyecto creamos el archivo /.babelrc
Dentro de éste creamos un objeto con lo siguiente:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}En nuestra terminal ingresamos
npm install webpack webpack-cli html-webpack-plugin html-loader --save-devEn la raiz de nuestro proyecto creamos el siguiente archivo: /webpack.config.js Y dentro de el colocamos lo siguiente
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
}),
],
};Nos dirigimos al /package.json para crear nuestro script que compilará nuestro proyecto.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --mode production"
},En la terminal ingresamos :
npm run buildPodremos ver que en la raiz de nuestro proyecto de ha creado la carpeta /dist donde trendremos nuestro archivos compilados
En la terminal:
npm install webpack-dev-server --save-devEn nuestro package.json creamos otro script llamado start:
{
""scripts"": {
""build"": ""webpack --mode production"",
""start"": ""webpack-dev-server --open --mode development""
},
}Ingresamos en la terminal
npm run start Con esto podemos abrir un entorno de desarrollo local de nuestro proyecto, además de contar con la ventaja de que los cambios que vayamos realizando se cargarán al instante.
Ingresamos en la terminal
npm install mini-css-extract-plugin css-loader node-sass sass-loader --save-devEn el archivo webpack.config.js ingresaremos
// ...
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
'css-loader',
'sass-loader',
],
},
],
},
// ...
plugins: [
new MiniCssExtractPlugin({
filename: 'assets/[name].css',
}),
],`El archivo completo quedaría de esta manera:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [{
loader: 'html-loader',
}
]
},
{
test: /\.(s*)css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
}),
new MiniCssExtractPlugin({
filename: 'assets/[name].css',
}),
],
};
En la carpeta /src creamos: /assets y dentro de ésta: /styles dentro de /styles creamos un archivo: App.scss
Quedando de la siguiente manera /src/assets/styles/App.scss
Terminal
npm install eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-devUtilizaremos las relgas de Airbnb para la construccion de proyectos
En la raiz de nuestro proyecto creamos el archivo .eslintrc Dentro de este archivo copiamos el siguiente código:
Con esto podemos lintar nuestro código y trabajar mejor.
En la raiz de nuestro proyecto creamos el archivo .gitignore su función es evitar subir archivos que puedan comprometer las seguiridad de nuestro proyecto.
Dentro de este archivo copiamos el siguiente código que se encuentra en un gist:
Ahora ya tienes un entorno de trabajo profesional para trabajar con React.js