En este artículo, vamos a crear un modelo básico para un proyecto de React desde cero sin usar la aplicación create-react ni ningún otro modelo predefinido. Esta es una gran experiencia para cualquier desarrollador de reacción para ver lo que sucede detrás de escena.
La estructura de archivos para nuestro proyecto tendrá el siguiente aspecto. Comprenderá cómo se crea esta estructura de proyecto mientras sigue los pasos a continuación.
A continuación se muestra el procedimiento paso a paso que vamos a seguir.
Paso 1: cree un nuevo directorio vacío y asígnele el nombre que desee. Abra la terminal dentro de ese directorio e inicialice el archivo package.json escribiendo el siguiente comando:
npm init -y
Aquí, -y es un indicador que crea un nuevo archivo package.json con configuraciones predeterminadas. Puede cambiar estas configuraciones predeterminadas en cualquier momento en el archivo package.json. Package.json contiene todas las dependencias y devDependencies .
Se crea un archivo package.json con configuraciones predeterminadas
Además, inicialice git en su proyecto si lo desea. Ejecute el siguiente comando en la terminal:
git init
Agregue un archivo .gitignore en el directorio raíz y agregue node_modules porque node_modules contiene todas las carpetas y archivos de dependencia, por lo que la carpeta se vuelve demasiado grande. Por lo tanto, no se recomienda agregarlo en git.
Paso 2: Cree dos directorios llamados «público» y «src» dentro del directorio raíz («/»). La carpeta «pública» contiene todos los activos estáticos como imágenes, svgs, etc. y un archivo index.html donde la reacción representará nuestra aplicación, mientras que la carpeta «src» contiene todo el código fuente.
Dentro de la carpeta pública, crea un archivo llamado index.html.
Nombre de archivo: index.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Basic Boilerplate of React</title> </head> <body> <!-- This is the div where React will render our app --> <div id="root"></div> <noscript> Please enable javascript to view this site. </noscript> <script src="../dist/bundle.js"></script> </body> </html>
Paso 3: Escribiremos nuestro código en la sintaxis moderna de ES6, pero muchos navegadores no lo admiten. Entonces, instalamos Babel que realiza las siguientes cosas:
- Convierte las nuevas sintaxis de ES6 en sintaxis compatibles con el navegador para que las versiones antiguas de los navegadores también puedan admitir nuestro código.
- Convierte JSX (JavaScript XML) en javascript vainilla.
Para instalar Babel, ejecute el siguiente comando en la terminal:
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
Aquí,
- –save-dev significa guardar todos los módulos instalados anteriormente en devDependencies en el archivo package.json,
- @babel/core es un módulo que contiene la funcionalidad principal de Babel,
- @babel/cli es un módulo que nos permite usar babel desde la terminal,
- @babel/preset-env es un preajuste que maneja la transformación de la sintaxis de ES6 en javascript común,
- @babel/preset-react está preestablecido que trata con JSX y lo convierte en javascript vainilla.
Ahora, cree un archivo “.babelrc” en el directorio raíz. Este archivo le dirá a babel transpiler qué ajustes preestablecidos y complementos usar para transpilar el código. Agregue el siguiente código JSON:
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
Paso 4: Instale React y React DOM ejecutando el siguiente comando en la terminal:
npm i react react-dom
presente dentro del archivo package.json.
Paso 5: Ahora, cree tres archivos dentro del directorio «src» llamados ‘App.js’, ‘index.js’, ‘App.css’. Estos archivos contienen el código real.
App.js: un componente de React.
Javascript
import React from "react";
import "./App.css";
const App = () => {
return (
<div>
<h1 className="heading">GeeksForGeeks</h1>
<h4 className="sub-heading">
A computer science portal for geeks
</h4>
</div>
);
};
export default App;
App.css: proporciona estilos para el componente de la aplicación.
CSS
/* stylings for App component */
.heading,.sub-heading{
color:green;
text-align: center;
}
index.js: Representa los componentes en el navegador.
Javascript
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App/>,document.getElementById("root"));
Nota: Puede crear tantos componentes como desee en su proyecto de reacción dentro de la carpeta src .
Paso 6: Instale el paquete web . El paquete web es un paquete de módulos estáticos. Funciona bien con babel. Crea un servidor de desarrollo local para nuestro proyecto. El paquete web recopila todos los módulos (ya sean personalizados que creamos o instalamos a través de NPM) y los agrupa en un solo archivo o en más archivos (activos estáticos). Para instalar webpack, ejecute el siguiente comando en la terminal:
npm install --save-dev webpack webpack-cli webpack-dev-server
Aquí,
- –save-dev es lo mismo que se discutió anteriormente,
- webpack es un paquete modular,
- webpack-cli nos permite usar webpack desde la terminal ejecutando un conjunto de comandos,
- webpack-dev-server proporciona un servidor de desarrollo con recarga en vivo, es decir, no necesita actualizar la página manualmente.
El paquete web toma el código del directorio src y realiza las operaciones requeridas, como la agrupación de código, la conversión de la sintaxis ES6 y la sintaxis JSX en javascript común, etc. y aloja el directorio público para que podamos ver nuestra aplicación en el navegador.
Paso 7: Webpack solo puede comprender archivos JavaScript y JSON. Entonces, para usar la funcionalidad del paquete web en otros archivos como .css, archivos babel, etc., debemos instalar algunos cargadores en el proyecto escribiendo el siguiente comando en la terminal:
npm i --save-dev style-loader css-loader babel-loader
Aquí,
- css-loader recopila CSS de todos los archivos CSS de la aplicación y los agrupa en un solo archivo,
- style-loader coloca todos los estilos dentro de la etiqueta <style> en el archivo index.html presente en la carpeta pública,
- babel-loader es un paquete que permite transpilar archivos javascript usando babel y webpack.
Paso 8: cree un archivo webpack.config.js en el directorio raíz que nos ayude a definir qué debe hacer exactamente el paquete web con nuestro código fuente. Especificaremos el punto de entrada desde donde el paquete web debe comenzar a agruparse, el punto de salida que es donde debe generar los paquetes y activos, complementos , etc.
webpack.config.js
Javascript
const path = require("path");
module.exports = {
// Entry point that indicates where
// should the webpack starts bundling
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/, // checks for .js or .jsx files
exclude: /(node_modules)/,
loader: "babel-loader",
options: { presets: ["@babel/env"] },
},
{
test: /\.css$/, //checks for .css files
use: ["style-loader", "css-loader"],
},
],
},
// Options for resolving module requests
// extensions that are used
resolve: { extensions: ["*", ".js", ".jsx"] },
// Output point is where webpack should
// output the bundles and assets
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js",
},
};
Paso 9: Ahora, agregue algunos scripts en el archivo package.json para ejecutar y compilar el proyecto.
"scripts": {
"start":"npx webpack-dev-server --mode development --open --hot",
"build":"npx webpack --mode production",
}
Aquí,
- –open flag le dice al webpack-dev-server que abra el navegador inmediatamente después de que se haya iniciado el servidor.
- –hot flag habilita la función de reemplazo de módulo activo de webpack. Solo actualiza lo que ha cambiado en el código, por lo que no actualiza todo el código, una y otra vez, por eso ahorra un valioso tiempo de desarrollo.
Paso para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar el proyecto en modo de desarrollo.
npm start
Producción:
Ejecute el comando «npm run build» para ejecutar el proyecto en modo de producción.
Nota: cuando ejecutamos nuestro servidor webpack, no hay una carpeta dist . Esto se debe a que lo que hace el servidor webpack es mantener esta carpeta dist en la memoria y la sirve, y la elimina cuando detenemos el servidor. Si realmente desea compilar la aplicación de reacción para que podamos ver esa carpeta dist, ejecute el comando «npm run build». Ahora, puede ver la carpeta dist en el directorio raíz.
¡Eso es todo! Estamos equipados con nuestro propio modelo de reacción y estamos listos para hacer algunos proyectos increíbles y geniales.
Publicación traducida automáticamente
Artículo escrito por iaditijain08 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA