Iniciar React desde 0 sin template!

Post 1 description

1

Introducción

Hay veces que quieres crear un proyecto React desde cero (o te lo piden en una entrevista de trabajo… 🤔), pero no sabes cómo empezar. En este tutorial, aprenderás a crear un proyecto React desde cero.

Requisitos previos

Antes de comenzar, asegúrate de tener instalados los siguientes paquetes:

Node.js
NPM

Creando un proyecto

Crea un nuevo directorio para tu proyecto y navega hasta él:

mkdir my-react-app
cd my-react-app

Inicializa un nuevo proyecto con Vite:

npm create vite@latest

Ponle un nombre al proyecto:

my-first-react-app

Seleccionar Vanilla como base de nuestro proyecto (recuerda que estamos iniciando un proyecto de React desde cero, sin compiladores):

vanilla

Seleccionar JavaScript (.jsx) o TypeScript (.tsx):

JavaScript

Dependencias necesarias

Entramos en el proyecto que acabamos de crear:

cd my-first-react-app

Instala las dependencias necesarias:

npm install

Instala el plugin de React necesario para que funcione en Vite:

npm install @vitejs/plugin-react -E

Y las dependencias de React:

npm install react react-dom -E

¿Sabias que se utiliza la etiqueta ‘-E’ para instalar las dependencias en la versión exacta del paquete? 😉

Ahora ya estamos listos para empezar a editor código 💪:

code .

Shortcut para abrir con VSCode el directorio actual

Configurando Vite

Creamos un archivo de configuración para Vite: vite.config.js
En la configuración de Vite para que funcione con React en el archivo ‘vite.config.js’:

// ⚡ vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Documentación oficial de @vitejs/plugin-react

Punto de entrada

Ahora, creamos la carpeta ‘src’ y dentro de ella, crearemos un archivo ‘App.jsx’:

mkdir src
touch src/App.jsx

📁 src
  └──  📄 App.jsx

Y añadimos el inicio de un componente de React:

// 📁 src/App.jsx

import React from 'react'

function App() {
  return <h1>Hello, world!</h1>
}

export default App

Puedes usar el comando rafce de la extensión ES7 React para crear el inicio de un componente de React JSX automáticamente 🤩.

Borrar el contenido de ‘main.js y cambiar la extensión del archivo ‘main.js’ a ‘main.jsx’
Y también en el HTML, cambiar el script que vincula a la función de inicio de nuestro proyecto a ‘main.jsx’:

<!-- 📁 index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.jsx"></script>
    <!-- 👈 Importamos nuestro archivo principal -->
  </body>
</html>

Importar la función “createRoot de React-dom y vincularlo con el elemento HTML con id ‘app’:

// 📁 main.jsx

import ReactDOM from 'react-dom/client'
import App from './src/App.jsx'

const root = ReactDOM.createRoot(document.getElementById('app'))

root.render(<App />) // 👈 Renderizamos nuestro componente

Ahora ya podemos ejecutar nuestro proyecto:

npm run dev

Extra!

· Puedes eliminar archivos que vienen con Vite, como ‘counter.js’ o sus estilos ‘styles.css’.

· Es muy recomendable utilizar un linter como ESLint y un formateador de código como Prettier para formatear tu código.