DEV Community

Cover image for Create a project in React without create-react-app (Spanish)
Alfredo Carreón Urbano
Alfredo Carreón Urbano

Posted on • Updated on

Create a project in React without create-react-app (Spanish)

#react #javascript #webdev #beginners

Hola a todos, esta es la publicación actualizada y resumida 🥳

alfredocu

Create a project in React without create-react-app/vite 2023 (Spanish)

Alfredo Carreón Urbano ・ Jan 8 '23

#javascript #webdev #beginners #tutorial

Introducción

El comando de create-react-app nos ahorra mucho tiempo de configuración para iniciar nuestros proyectos en React.

Pero no vamos a usar create-react-app, nosotros mismos vamos a crear la configuración de nuestro proyecto desde cero.

Si deseas gestionar tu mismo la configuración de tu proyecto desde cero, entonces puede que esta publicación sea útil para ti.

Objetivo

Mi objetivo es que se pueda comprender lo que se necesita para crear una aplicación de React y los conceptos básicos de agrupación.

Tener nociones de como funciona por detrás y tener un cierto control sobre la estructura de la aplicación.

Herramientas antes de iniciar

  • Un editor de código, puedes usar VSCode, Atom o el editor de tu preferencia.

  • Un navegador actualizado.

  • Terminal de comandos.

  • Tener instalado Node y npm.

  • Tener instalado Git y tener una cuenta en Github.

1. Crear Repositorio en Github

Primero vamos a crear un nuevo repositorio en Github.

Imagen 1

  • Agregamos un nombre.

  • Agregamos una descripción.

  • Seleccionamos publico, esto para poderlo compartir con la comunidad.

  • Damos clic para inicializar un README en nuestro proyecto.

  • Agregamos un archivo .gitignore con configuración Node.

  • Agregamos una licencia MIT, para indicar que nuestro código es libre y que otros desarrolladores puedan utilizarlo y modificarlo.

Después de crear nuestro proyecto vamos a clonarlo.

Imagen 2

Vamos a nuestra terminal, elegimos nuestro directorio para clonar nuestro proyecto.

Utilizamos el comando:

git clone URL_REPOSITORIO
Enter fullscreen mode Exit fullscreen mode

2. Iniciar proyecto, instalación de React y ReactDOM

Utilizamos el comando:

npm init -y
Enter fullscreen mode Exit fullscreen mode

Se crea nuestro package.json con una configuración por defecto.

{
  "name": "curriculumvitae",
  "version": "1.0.0",
  "description": "- Crear un proyecto desde 0 con React JS.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AlfredoCU/curriculumvitae.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/AlfredoCU/curriculumvitae/issues"
  },
  "homepage": "https://github.com/AlfredoCU/curriculumvitae#readme"
}
Enter fullscreen mode Exit fullscreen mode

Ahora vamos a instalar React y ReactDOM con el siguiente comando:

 npm install react react-dom --save
Enter fullscreen mode Exit fullscreen mode

Paquetes instalados:

+ react-dom@16.13.1
+ react@16.13.1
added 8 packages from 3 contributors and audited 22 packages in 2.845s
found 0 vulnerabilities
Enter fullscreen mode Exit fullscreen mode

Nota: es importante observar que las versiones de estos paquetes se encuentren con cero vulnerabilidades para evitar problemas en producción.

3. Instalación y configuración de Babel

Babel es una herramienta que nos ayuda a transpilar nuestro código React y JavaScript modernos a un código JavaScript que pueda entender los navegadores.

Vamos añadir babel a nuestro proyecto con el siguiente comando:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev
Enter fullscreen mode Exit fullscreen mode

Paquetes instalados:

+ @babel/preset-react@7.9.4
+ babel-loader@8.1.0
+ @babel/core@7.9.0
+ @babel/preset-env@7.9.5
added 174 packages from 83 contributors and audited 2091 packages in 25.106s
found 0 vulnerabilities
Enter fullscreen mode Exit fullscreen mode

Ahora vamos a instalar un plugin para transpilar clases o funciones flecha en funciones normales.

Utilizamos el comando:

npm install babel-plugin-transform-class-properties --save-dev
Enter fullscreen mode Exit fullscreen mode

Paquete instalado:

+ babel-plugin-transform-class-properties@6.24.1
added 22 packages from 7 contributors and audited 11297 packages in 9.881s
found 0 vulnerabilities
Enter fullscreen mode Exit fullscreen mode

Vamos a crear un archivo en la raíz del proyecto llamado .babelrc el cual tendrá toda la configuración requerida de Babel, puedes descubrir todas las posibles configuraciones en: https://babeljs.io/docs/en/config-files

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}
Enter fullscreen mode Exit fullscreen mode

4. Instalación y configuración de Webpack

Webpack es una herramienta que nos puede ayudar a compilar todos nuestros archivos de JavaScript en un sólo archivo o paquete que podemos usar en producción.

Utilizamos el comando:

npm install webpack webpack-cli html-webpack-plugin html-loader --save-dev
Enter fullscreen mode Exit fullscreen mode

Paquetes instalados:

+ html-webpack-plugin@4.2.0
+ webpack@4.42.1
+ html-loader@1.1.0
+ webpack-cli@3.3.11
added 458 packages from 303 contributors and audited 7546 packages in 109.415s
found 0 vulnerabilities
Enter fullscreen mode Exit fullscreen mode

Vamos a escribir la configuración de Webpack en un archivo en la raíz del proyecto llamado webpack.config.js, puedes aprender más sobre cómo configurar estos archivos en: https://webpack.js.org/configuration

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",
    }),
  ],
};
Enter fullscreen mode Exit fullscreen mode

5. Estructura del proyecto

Vamos a crear la estructura de nuestro proyecto.

  • Crear la carpeta src/ para guardar nuestro código JavaScript.

  • Crear la carpeta public/ para archivos estáticos de nuestro proyecto como index.html, iconos, imágenes, etc.

  • El archivo src/index.js será el archivo principal de JavaScript donde vamos a importar el resto de componentes y contenedores de nuestra aplicación.

  • Vamos a crear nuestros componentes en la carpeta src/components y los contenedores de estos componentes en la carpeta src/containers.

Estructura del proyecto

Nota: Todos nuestros componentes deben comenzar con una letra mayúscula a pesar de que los archivos sigan alguna otra convención.

Debemos de verificar que la carpeta node_modules/ se encuentre en el archivo .gitignore para no subirlo a Github ni a producción porque es una carpeta muy pesada y puede dañar nuestro proyecto.

También agregar la carpeta dist/ en el archivo .gitignore, esta carpeta almacenara la compilación de nuestro proyecto.

6. Creando nuestros archivos

Ya esta hecha la estructura de nuestro proyecto, vamos a crear un componente llamado src/components/About.jsx lo cual sólo nos mostrara un "Hola Mundo".

import React from "react";

const About = () => {
  return (
    <div>
      <h1> Hola Mundo! </h1>
    </div>
  );
};

export default About;
Enter fullscreen mode Exit fullscreen mode

Creamos un archivo src/index.js, vamos añadir nuestro componente para después enviarlo a nuestro archivo index.html.

import React from "react";
import ReactDOM from "react-dom";
import About from "./components/About";

ReactDOM.render(<About />, document.getElementById("app"));
Enter fullscreen mode Exit fullscreen mode

Creamos un archivo public/index.html hacemos la referencia por medio del id "app" para que busque y empujar nuestra aplicación.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>React</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

7. Creando nuestro servidor local

Vamos a usar Webpack Dev Server para crear un servidor local que nos permita visualizar los cambios de nuestro proyecto en tiempo real, es decir, sin recargar el navegador.

Utilizamos el comando:

npm install webpack-dev-server --save-dev
Enter fullscreen mode Exit fullscreen mode

Paquete instalado:

+ webpack-dev-server@3.10.3
added 175 packages from 117 contributors and audited 11142 packages in 31.689s
found 0 vulnerabilities
Enter fullscreen mode Exit fullscreen mode

También, vamos a crear dos nuevos scripts en nuestro package.json.

  • build para compilar nuestro proyecto (para producción).

  • start para iniciar un servidor con live reload en el puerto 8080 (para desarrollo).

"scripts": {
  "start": "webpack-cli serve --open --mode development",
  "build": "webpack --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
}
Enter fullscreen mode Exit fullscreen mode

Puedes encontrar más información sobre Webpack Dev Server y Live Reload en: https://webpack.js.org/configuration/dev-server/

Utilizamos el comando:

npm run build
Enter fullscreen mode Exit fullscreen mode

Nos creara una carpeta llamada dist, donde almacena la compilación del proyecto:

...
Hash: 9769c65335e6604e9abb
Version: webpack 4.42.1
Time: 5643ms
Built at: 2020-04-15 21:49:06
       Asset       Size  Chunks             Chunk Names
./index.html  226 bytes          [emitted]  
   bundle.js    128 KiB       0  [emitted]  main
...
Enter fullscreen mode Exit fullscreen mode

Estructura final del proyecto.

Dist

Utilizamos el comando:

npm run start
Enter fullscreen mode Exit fullscreen mode

Corre nuestro servidor:

...
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
...
Enter fullscreen mode Exit fullscreen mode

¡Listo!

Localhost

Espero les guste :)

Top comments (8)

Collapse
 
juampick profile image
Juan Pablo Cook | Software Engineer •

Está bueno, pero un poquito desactualizado para hoy en día. Hay que cambiar el start script de: "webpack-dev-server --open --mode development" a: webpack-cli serve --open --mode development.

Collapse
 
alfredocu profile image
Alfredo Carreón Urbano •

Muchas gracias por comentarlo Juan. Actualizare el post.

Collapse
 
surucobe profile image
Armando •

Excelente tutorial, sencillo y explicito
Llevaba rato buscando algo como este post muchisimas gracias!

Collapse
 
alfredocu profile image
Alfredo Carreón Urbano •

Gracias a ti! :D

Collapse
 
miguemartelo31 profile image
Miguel Angel Martelo Quiroz •

Hola Alfredo.
Muchas gracias por este gran aporte, estuvo excelente el tutorial, me ayudo a comprender y crear junto al tutorial un proyecto desde cero para React.

Collapse
 
alfredocu profile image
Alfredo Carreón Urbano •

Gracias a ti Miguel.

Collapse
 
jerocosio profile image
Jerónimo Cosío •

Hola Alfredo, gracias por compartir el tutorial pero tengo una duda fuera del aspecto 'educacional' de entender cómo hacerlo crees que haya alguna ventaja en hacerlo así vs utilizar create-react-app?

Collapse
 
alfredocu profile image
Alfredo Carreón Urbano •

Hola Jerónimo, Podemos crear nuestro proyecto con Webpack, Parcel o create-react-app y cada opción tienes sus ventajas y desventajas, tienes que analizar cual es la más adecuada para construcción de tu proyecto o la que más te guste.

Una ventaja de hacerlo con Webpack es gestionar la compilación por tu cuenta en cambio create-react-app es "sin configuración de compilación" y lo dicen en serio no se recomienda configurar esta herramienta.

Y es que los expertos hacen todo lo posible para evitar configuraciones, herramientas y códigos adicionales.

Si deseas agregar o cambiar algo, debes 'expulsar'. La ejecución npm run eject escupe todos los archivos de configuración para que puedas editarlos. La expulsión puede introducir mucha más complejidad en tu proyecto y es una decisión irreversible.

Ahora si no tienes la necesidad de gestionar la compilación y create-react-app tiene todo lo que necesitas entonces es la mejor opción.

Eliminas tiempo de configuración y documentación, el cual también existe Parcel que seria una gran opción para evitar Webpack.

Gracias por comentar y espero haber resuelto tu pregunta.

Read next

prince_beec5ccde00b7c6c73 profile image

Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/

Prince -

rajnishspandey profile image

Deploy Flask app using docker Compose

Rajnish -

piterweb profile image

👉 What is gleam language used for ❓

PiterDev -

emregursanc profile image

What is SEO (Search Engine Optimization)?

Emre Gürsanç -