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)

Hola a todos, esta es la publicaci贸n actualizada y resumida 馃コ

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:

...
鈩 锝ds锝: Project is running at http://localhost:8080/
鈩 锝ds锝: 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.