Iniciar React desde 0 sense template!

Post 1 description

1

Introducció

Algunes vegades vols crear un projecte React desde zero (o t’ho demanen en una entrevista de treball… 🤔), però no sabes com començar. En aquest tutorial, aprendràs a crear un projecte React des de zero.

Requisits previos

Abans de començar, assegura’t que tens instal·lats els següents paquets:

Node.js
NPM

Creant un projecte

Crea un nou directori per al teu projecte i navega fins a aquest:

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

Inicialitza un nou projecte amb Vite:

npm create vite@latest

Posa’t un nom al projecte:

my-first-react-app

Selecciona Vanilla com a base del teu projecte (recorda’t que estam iniciant un projecte de React des de zero, sense compiladors):

vanilla

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

JavaScript

Dependencias necessaries

Entra’t al projecte que acabam de crear:

cd my-first-react-app

Instal·la les dependencies necessaries:

npm install

Instal·la el plugin de React necessari perque funcioni en Vite:

npm install @vitejs/plugin-react -E

I les dependencies de React:

npm install react react-dom -E

Sabies que s’utilitza la etiqueta ‘-E’ per instal·lar les dependencies en la versió exacta del paquet? 😉

Ara ja estam llestos per començar a escriure codi 💪:

code .

Shortcut per obrir amb VSCode el directori actual

Configurant Vite

Cream un fitxer de configuració per Vite: vite.config.js
En la configuració de Vite per que funcioni amb React al fitxer ‘vite.config.js’:

// ⚡ vite.config.js

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

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

Documentació oficial de @vitejs/plugin-react

Punt d’entrada

Ara, cream la carpeta ‘src’ i dins d’ella, crearem un fitxer ‘App.jsx’:

mkdir src
touch src/App.jsx

📁 src
  └──  📄 App.jsx

I afegim el inici d’un component de React:

// 📁 src/App.jsx

import React from 'react'

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

export default App

Pots utilitzar el comando rafce de l’extensió ES7 React per crear l’inici d’un component de React JSX automàticament 🤩.

Esborra el contingut de ‘main.js i canvia l’extensió del fitxer ‘main.js’ a ‘main.jsx’
I també al HTML, canvia l’script que enllaça a la funció d’inici del teu projecte 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>
    <!-- 👈 Importem el meu fitxer principal -->
  </body>
</html>

Importa la funció “createRoot de React-dom i enllaça’l amb l’element HTML amb 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 />) // 👈 Renderitzem el nostre component

Ara ja podem executar el nostre projecte:

npm run dev

Extra!

· Pots eliminar fitxers que venen amb Vite, com ara ‘counter.js’ o els seus estils ‘styles.css’.

· És molt recomanable utilitzar un linter com ESLint i un formatador de codi com Prettier per formatejar el teu codi.