DEV Community

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

Posted on

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.

Crear un nuevo repositorio en Github

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

Repositorio creado

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

git clone URL_REPOSITORIO
Enter fullscreen mode Exit fullscreen mode

2. Crear proyecto e instalar dependencias

Utilizamos el comando:

npm init -y
Enter fullscreen mode Exit fullscreen mode

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" }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

También instalamos las siguientes dependencias:

npm install react react-dom sass prop-types
Enter fullscreen mode Exit fullscreen mode

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

.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 }
Enter fullscreen mode Exit fullscreen mode

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

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

4. Estructura de proyecto

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

Estructura del proyecto

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
Enter fullscreen mode Exit fullscreen mode

Localhost

Para construir nuestro proyecto:

npm run build
Enter fullscreen mode Exit fullscreen mode

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 🥳

Top comments (0)