Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 8, 2023 05:27 pm GMT

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

Introduccin

Anteriormente escrib una publicacin sobre cmo crear una aplicacin de React desde cero, ha pasado algn tiempo y ha quedado obsoleta la configuracin.

Objetivo

As que mi objetivo es crear un proyecto con una nueva configuracin y comprender lo que se necesita para crear una aplicacin de React.

Tener nociones de cmo funciona por detrs y tener un cierto control sobre la estructura de la aplicacin.

Herramientas antes de iniciar

  • Un editor de cdigo, 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, despus de crear nuestro proyecto vamos a clonarlo.

Repositorio creado

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

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

Tambin instalamos las siguientes dependencias:

npm install react react-dom sass prop-types

Usted puede agregar ms paquetes si lo desea, como styled-component, Tailwind CSS, Axios, Redux, Apollo y GraphQL. Yo solamente voy a instalar lo necesario para un proyecto pequeo.

3. Creando archivos de configuracin

Vamos a crear los siguientes archivos de configuracin en la raz 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:

Estructura del proyecto

Al final de la publicacin se encuentran los enlaces del repositorio donde podr ver todo el cdigo.

5. Ejecutamos los comandos

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

npm start

Localhost

Para construir nuestro proyecto:

npm run build

Build

Terminamos

Conclusin

Es probable que en tu vida laboral te asignen proyectos muy grandes y con varios aos de desarrollo, los cuales tengan una configuracin creada desde 0.

Tambin puede que te enfrentes a desafos para conseguir un trabajo y te pidan crear un proyecto con una configuracin creada por ti.

As que espero que esta publicacin sea de mucha ayuda y feliz ao nuevo


Original Link: https://dev.to/alfredocu/create-a-project-in-react-without-create-react-appvite-2023-spanish-12nd

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To