Hinweis: Der folgende Artikel hilft Ihnen dabei: 8 progetti React da realizzare nel 2023
In questo articolo abbiamo raccolto otto diversi progetti React che ti mostreranno cosa puoi costruire con React e ti ispireranno a creare app che dovresti avere nel tuo curriculum per lavoro.
Inoltre, ti fornisco tutti gli strumenti necessari per costruire in modo efficace qualsiasi progetto presente nell’elenco.
Quindi iniziamo!
1. Applicazione “Da fare”.
Il primo progetto React che dovresti avere nel tuo curriculum è l’app TODO.
Se vuoi iniziare a realizzare progetti, non c’è posto migliore da cui iniziare che con un semplice piano per iniziare.
Un’app todo ha funzionalità CRUD di base, creazione, lettura, aggiornamento ed eliminazione di attività. Todo può essere sostituito con qualsiasi contenuto tu voglia. Molte applicazioni che utilizziamo quotidianamente possono essere considerate ottime applicazioni di lavoro.
Il vantaggio di creare un programma di cose da fare è che l’intero programma può essere realizzato rapidamente. Se riesci a creare un’app da fare senza tutorial che ti guidino, è un buon test per vedere le tue abilità in React.
Le app Todo sono un ottimo progetto perché non sono necessarie librerie di terze parti per crearle. Puoi rendere la tua app da fare complessa quanto desideri, il che ti aiuterà ad acquisire sicurezza con i concetti che desideri apprendere. Vuoi aggiungere l’autenticazione o un database alla tua applicazione?
Articoli necessari:
Applicazione Barebone React
Funzionalità principali di React (stato, contesto, ecc.).
2. blog personale
Un blog personale è il secondo progetto React che dovresti avere nel tuo curriculum.
Un passo avanti rispetto all’app to-do originale è un sito web blog.
Se desideri scrivere in Markdown, un modo per scrivere e formattare il testo, il tuo blog probabilmente è composto da diversi file Markdown (md.).
Se desideri che il contenuto venga incluso localmente nel progetto per renderlo un po’ più complicato, puoi estrarlo da una fonte esterna come un CMS (Content Management System) come Sanity o Contentful.
Questo blog è composto da pagine statiche, quindi puoi utilizzare qualsiasi sito tu voglia.
Una buona scelta di framework per questo blog sarebbe Next.js o Gatsby. Entrambi sono ideali per creare siti Web basati su testo come i blog perché sono framework lato server e offrono una migliore SEO. Questo viene confrontato con un’app React tradizionale fornita dal client (ad esempio, un’app creata con Create React App).
I nostri requisiti includono uno di questi framework React più un trasformatore in cui convertire il nostro contenuto di markup HTML quando costruiamo il nostro sito. Una buona scelta per modificare il contenuto del nostro markup è il pacchetto di osservazioni npm.
Se vuoi creare un blog ancora più impressionante con contenuti dinamici, puoi utilizzare MDX. MDX è molto simile al markup semplice, ma ti consente anche di includere i tuoi componenti React personalizzati nel markup.
Se usi Next.js, usi un pacchetto come next-mdx-remote per usare MDX. Anche il semplice pacchetto mdx-js/mdx funziona in modo eccellente.
Articoli necessari:
- Next.js/Gatsby
- Markdown o MDX (nota o mdx-js/mdx)
- CMS
3. Applicazione di commercio elettronico
Il terzo progetto React che dovresti avere nel tuo curriculum è un’app di eCommerce.
Il prossimo passo nel nostro progetto blog è un’app di e-commerce.
Ha molte delle stesse funzionalità del nostro blog, incluso il fatto che la maggior parte dei contenuti sono statici.
Ancora una volta, i dati possono essere ottenuti localmente o recuperati da un CMS in fase di creazione. La differenza in un’applicazione di e-commerce è che ci consente di lavorare con un server.
Ad esempio, se desideri che i tuoi clienti acquistino un articolo tramite Stripe, potresti voler impostare un webhook che riceve un evento da Stripe quando il tuo cliente ha acquistato un particolare articolo. Questo è essenziale per gestire cose come l’inventario dei prodotti.
Puoi utilizzare un percorso API per scrivere rapidamente codice lato server, quindi non è necessario impostare un progetto Node.js completo. Questa funzione elabora vari eventi che si verificano durante o dopo il regolamento.
Se non desideri toccare alcun codice lato server, puoi evitare completamente il pacchetto stripe npm e utilizzare Stripe Checkout o il collegamento di pagamento Stripe.
In futuro, ogni progetto che vogliamo affrontare coinvolgerà un server. La maggior parte dei programmi che usi hanno un backend e un front-end. React sarà sempre il nucleo della nostra applicazione, ma tieni presente che per ognuno di questi progetti puoi facilmente configurare un server per la tua applicazione per gestire cose come la connessione al database se disponi di un framework come Next.js. lento
Next.js include un particolare tipo di pagina chiamato percorso API che consente di eseguire attività lato server come autenticazione, webhook e lettura e scrittura nel database. Inoltre, avremo alcune soluzioni come Firebase che non richiedono affatto la creazione di un backend!
Articoli necessari:
- Next.js
- Stripe (utilizzando percorsi API per webhook)
- CMS
4. Programma comunitario (come Reddit)
Il quarto progetto React che dovresti avere nel tuo curriculum è un clone di Reddit.
Un clone di Reddit incentrato sulla condivisione di collegamenti o post semplici è un eccellente passo avanti dalla nostra app da fare.
Stiamo ancora creando, aggiornando ed eliminando i dati, ma questa volta verranno archiviati in un database. Potremmo consentire agli utenti di aggiungere diversi tipi di contenuto, come un video, un collegamento o un breve post. Possiamo utilizzare Firebase per avviare il nostro progetto, fornendoci il database Firestore.
Il nostro database Firestore è costituito da una semplice raccolta che memorizza tutti i post creati da un utente. Possiamo svilupparlo ulteriormente consentendo ad altri utenti di aggiungere commenti e Mi piace ai post.
Un’applicazione ancora più avanzata include l’autenticazione. Fortunatamente, Firebase Auth lo rende molto semplice. Possiamo anche aggiungere Mi piace ai singoli commenti e rispondere ai commenti nei nostri thread di commenti.
Possiamo utilizzare qualsiasi framework React per questo. Una buona scelta è utilizzare il modello Vite. Abbiamo bisogno di percorsi dinamici per recuperare posizioni individuali in base al loro ID per i nostri post. Una buona scelta per questo è React Router.
Articoli necessari:
- React (avviato con Vite)
- React Router (installa react-router-dom)
- Database Firestore (da Firebase)
- Aut. Firebase
5. App di chat (simile a Discord)
Il quinto progetto React che dovresti avere nel tuo curriculum è un clone di Discord.
Per aggiungere alla nostra app Reddit, possiamo visualizzare messaggi in tempo reale come Discord.
Se cambiamo i post in thread, ora abbiamo un programma di chat in cui è in corso una conversazione.
Come l’emulazione Reddit, gli utenti possono comunque aggiungere qualsiasi supporto desiderino. Un bel tocco è aggiungere un’anteprima del collegamento, così quando un utente condivide un collegamento come un video di YouTube, altri utenti possono ricevere una piccola scheda che mostra cosa è collegato a un’immagine prima che l’utente faccia clic su di essa. , mostra. Esiste una libreria chiamata react-tiny-link che ti consente di farlo.
Possiamo ancora utilizzare Firebase per questo progetto. Questo è un buon caso d’uso per il database in tempo reale di Firebase, quindi non è necessario aggiornare o ricaricare la pagina per visualizzare nuovi messaggi.
Inoltre, possiamo aggiungere diversi ruoli ai nostri utenti su Discord. Nell’app Discord, alcuni moderatori hanno un maggiore controllo sugli altri utenti. Un esempio potrebbe essere l’aggiunta di una funzione di ban per rimuovere un utente da un canale o forum specifico.
Articoli necessari:
- React (avviato con Vite)
- React Router (installa react-router-dom)
- react-tiny-link
- Database in tempo reale Firebase
- Aut. Firebase
6. Programma Messenger (simile a WhatsApp)
Il sesto progetto React che dovresti avere nel tuo curriculum è un’app clone di WhatsApp.
Una derivazione di questa app in tempo reale potrebbe essere un’app di messaggistica come WhatsApp.
Questa app è un po’ più limitata poiché le conversazioni sono solitamente uno a uno, anche se non deve esserlo. Invece di parlare per canali, avrai diverse opzioni per parlare con l’una o l’altra persona alla volta.
Un bel tocco è aggiungere notifiche quando qualcuno ti invia un messaggio. Questo è un altro esempio di applicazione che richiede prestazioni di dati in tempo reale dal database. Firebase è sempre una buona opzione per questo.
Se Firebase diventa noioso, puoi provare Supabase, un’alternativa competitiva con funzionalità di database in tempo reale basate su Postgres anziché Firestore.
Articoli necessari:
- React (avviato con Vite)
- React Router (installa react-router-dom)
- Supabase
7. App per social media (simile a Twitter)
Il settimo progetto React che dovresti avere nel tuo curriculum è un’app clone di Twitter.
Invece di avere un’app in cui una persona parla direttamente con un’altra persona in uno spazio minimo, cosa succederebbe se volessi il contrario, dove chiunque possa interagire con chiunque?
Un ottimo esempio di questo tipo di programma sarebbe Twitter.
Twitter è un’applicazione che richiede un feed e una pagina di tendenza nel feed dell’utente. Gli utenti possono vedere tutti i post delle persone che seguono. Ma nella pagina delle tendenze vedranno tutti i post più popolari del sito web.
Per aiutarti a capire quali sono i post più popolari, aggiungi la possibilità di mettere mi piace (cuore) ad una determinata posizione e ricondividerla, permettendo di aggiungere o collegare un post ad un altro utente. Infine, ti consigliamo di consentire agli utenti di rispondere direttamente ad altri post (come la funzione “Tweet Quote” di Twitter).
E un’altra funzionalità essenziale che può essere aggiunta a qualsiasi app di cui abbiamo parlato fino a questo punto è la ricerca. Nella nostra simulazione di Twitter, gli utenti probabilmente vorranno essere in grado di cercare diversi utenti da seguire e pubblicare in base ai loro contenuti.
Uno degli svantaggi di Firebase è che non dispone dei migliori strumenti di ricerca e non è facile eseguire query basate su una parola chiave specifica. Questo è un caso in cui Supabase sarebbe un’alternativa superiore.
Articoli necessari:
- React (avviato con Vite)
- React Router (installa react-router-dom)
- Supabase o Firebase
8. Programma di condivisione video (simile a YouTube o Tik Tok)
L’ultimo progetto divertente in questo elenco di progetti React da avere nel tuo curriculum è un’app di condivisione video come YouTube o TikTok.
Le due app hanno caratteristiche molto simili, con YouTube che si concentra principalmente su contenuti video lunghi e Tiktok che presenta principalmente video brevi di durata inferiore a un minuto.
Entrambe le piattaforme utilizzano una funzione di scorrimento infinito, sia che tu stia scorrendo i video suggeriti o i video consigliati. TikTok stesso è certamente solo un grande feed con scorrimento infinito.
La cosa più difficile da implementare su entrambe queste piattaforme è l’algoritmo. Puoi fare molto per creare un’app che si basi solo sul fatto che gli utenti seguano altri utenti e abbiano una home page con i video più popolari. Ai tuoi utenti verranno offerti prima i video delle persone che seguono e poi i video più popolari sul sito.
La caratteristica più essenziale di TikTok e YouTube è lo streaming video. Affinché gli utenti possano caricare i propri contenuti, è necessario un servizio che includa un’API di caricamento. Alcune buone scelte sono Cloudflare Stream, Video.js o Mux.
Questi strumenti ti forniscono un lettore video e un’API che carica i video da pubblicare sul sito.
Costruisco questa applicazione utilizzando il mio server e il mio database. Probabilmente sceglierei Prisma come ORM (Object Relational Mapping) per interagire con il database, che è un database MySQL gestito da Planetscale.
Articoli necessari:
- Next.js (con percorsi API per interagire con il database)
- pacchetto next-auth (per aggiungere Google Auth, tra gli altri fornitori di autenticazione)
- Cloudflare Streamer o Video.js (come nostro lettore video e hosting dei nostri video)
- Prisma (come il nostro ORM)
- MySQL (gestito da Planetscale)
Un’altra serie di tutorial sul software è stata completata. Ci auguriamo che questa formazione ti sia utile per apprendere e comprendere gli 8 progetti React da realizzare nel 2023; Se anche tu conosci una formazione particolare o un progetto React che deve essere presente nel tuo curriculum, puoi menzionarlo nella sezione commenti in modo che questo articolo venga aggiornato con il tuo nome.
