Alfredo Carreón Urbano

Posted on Jan 8, 2023

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

#javascript #webdev #beginners #tutorial

Introducción

Anteriormente escribí una publicación sobre cómo crear una aplicación de React desde cero, ha pasado algún tiempo y ha quedado obsoleta la configuración.

Objetivo

Así que mi objetivo es crear un proyecto con una nueva configuración y comprender lo que se necesita para crear una aplicación de React.

Tener nociones de cómo 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 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 un repositorio en GitHub

Vamos a crear un nuevo repositorio en Github.

Completamos el formulario a nuestro agrado, después de crear nuestro proyecto vamos a clonarlo.

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

git clone URL_REPOSITORIO

2. Crear proyecto e instalar dependencias

Utilizamos el comando:

npm init -y

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

{
  "name": "react-app-2023",
  "version": "1.0.0",
  "description": "Create a project in React without create-react-app 2023 (Spanish)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AlfredoCU/react-app-2023.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/AlfredoCU/react-app-2023/issues"
  },
  "homepage": "https://github.com/AlfredoCU/react-app-2023#readme"
}

Ahora vamos a instalar las dependencias de configuración:

npm install --save @babel/core @babel/preset-env @babel/preset-react babel-loader babel-plugin-transform-class-properties css-loader html-loader html-webpack-plugin react-hot-loader sass-loader style-loader webpack webpack-cli webpack-dev-server

También instalamos las siguientes dependencias:

npm install react react-dom sass prop-types

Usted puede agregar más paquetes si lo desea, como styled-component, Tailwind CSS, Axios, Redux, Apollo y GraphQL. Yo solamente voy a instalar lo necesario para un proyecto pequeño.

3. Creando archivos de configuración

Vamos a crear los siguientes archivos de configuración en la raíz de nuestro proyecto.

.babelrc

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

.prettierrc

{
    "tabWidth": 2,
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "endOfLine": "auto",
    "htmlWhitespaceSensitivity": "css",
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "parser": "babel-ts",
    "printWidth": 80,
    "proseWrap": "preserve",
    "semi": true,
    "singleQuote": false,
    "trailingComma": "none",
    "useTabs": false
}

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve("dist"),
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.html$/,
        use: "html-loader"
      },
      /* Choose only one of the following two: if you're using 
        plain CSS, use the first one, and if you're using a 
        preprocessor, in this case SASS, use the second one */
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    })
  ]
};

package.json

 "scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development --port 3000",
    "build": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

4. Estructura de proyecto

Vamos muy bien, ahora vamos a crear la estructura de nuestro proyecto, la cual es la siguiente:

Al final de la publicación se encuentran los enlaces del repositorio donde podrá ver todo el código.

5. Ejecutamos los comandos

Para correr el proyecto en http://localhost:3000/:

npm start

Para construir nuestro proyecto:

npm run build

Terminamos 😀

Conclusión

Es probable que en tu vida laboral te asignen proyectos muy grandes y con varios años de desarrollo, los cuales tengan una configuración creada desde 0.

También puede que te enfrentes a desafíos para conseguir un trabajo y te pidan crear un proyecto con una configuración creada por ti.

Así que espero que esta publicación sea de mucha ayuda y feliz año nuevo 🥳

DEV Community