Create a project in React without create-react-app/vite 2023 (Spanish)
Tags: javascript, webdev, beginners, tutorial
Published: 2023-01-08 17:27:43

## 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.

![Crear un nuevo repositorio en Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o96yk8x596zpbl1796m7.png)

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


![Repositorio creado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjs330f7klzmzn68kr8q.png)

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.

```json
{
  "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

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

### .prettierrc

```json
{
    "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

```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

```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:

![Estructura del proyecto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahxpvqf6xubl5dcwmrae.png)

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
```

![Localhost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2dduwxwowwbjl3y7ir1.png)

Para construir nuestro proyecto:

```
npm run build
```

![Build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj3umvdwruc6bw9gfr7z.png)

## Terminamos 😀

- [Repositorio](https://github.com/AlfredoCU/react-app-2023)
- [Github Page](https://alfredocu.github.io/react-app-2023/)

## 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 🥳