9 ekscytujących pomysłów i tematów projektów React dla początkujących 2022

Opublikowany: 2021-01-06

Tak więc opanowałeś podstawy Reacta, a także dobrze znasz JavaScript. Teraz, gdy podstawowe samouczki są dla ciebie dość łatwe, myślisz o podkręceniu go. Ale jak?

Jest to problem, z którym boryka się wielu nowicjuszy React, gdy uzupełniają podstawy biblioteki React i wkraczają na środkowy etap nauki. Najlepszym sposobem (i prawdopodobnie najbardziej produktywnym) posuwania się naprzód jest skupienie się na rozwijaniu projektów React.

Nie, nie mówimy o podejmowaniu dużych projektów branżowych, ale o mniejszych rzeczywistych projektach, które mogą pomóc w zmaterializowaniu umiejętności teoretycznych w praktyczne doświadczenie. Pracując nad realnymi projektami React, możesz wypełnić lukę między byciem początkującym Reactem a zostaniem profesjonalnym programistą.

Naucz się tworzyć aplikacje, takie jak Swiggy, Quora, IMDB i nie tylko

Rozwijanie projektów React nie tylko pomoże Ci utrwalić Twoje umiejętności React, ale także pozwoli Ci odkryć swoją kreatywną stronę. Zanim jednak zaczniemy omawiać projekty React, zajmijmy się najpierw „dlaczego” i „jak” rozwoju projektu React.

Przeczytaj: 20 najlepszych pytań i odpowiedzi w wywiadzie React

Spis treści

Dlaczego warto pracować nad projektami React?

Słyszałeś stare powiedzenie: „praktyka czyni mistrza”, prawda? Ta sytuacja jest taka sama. Gdy zdobędziesz mistrzostwo w podstawowych koncepcjach Reacta, musisz opanować budowanie projektów React. W procesie tworzenia projektów React dowiesz się, jak tworzyć aplikacje, które faktycznie działają.

Co więcej, kiedy zaczynasz tworzyć projekty React, dowiadujesz się, jakich narzędzi i ekosystemu Reacta użyć dla którego projektu React. Największą zaletą tworzenia aplikacji za pomocą React jest to, że po pomyślnym wdrożeniu możesz włączyć je do swojego portfolio, aby zaimponować potencjalnym pracodawcom.

Jednak najtrudniejszą częścią procesu jest ustalenie, jakie aplikacje React powinieneś zbudować. Aby pomóc Ci przełamać lody z tworzeniem projektów React, przygotowaliśmy listę projektów React dla początkujących.

Jak rozpocząć proces tworzenia aplikacji React?

Jedną z pierwszych rzeczy, o których należy pamiętać przy tworzeniu projektu React, jest to, że jest to w dużej mierze proces samokierowany. W przeciwieństwie do nauki podstaw Reacta za pomocą samouczków online i materiałów edukacyjnych, nie będzie zbyt wiele, aby poprowadzić Cię do tworzenia projektów React. Będziesz musiał uczyć się na zasadzie prób i błędów.

Przeczytaj także: Pomysły na projekty Full Stack Coding dla początkujących

Ale to nie znaczy, że nie ma absolutnie nic, co pomogłoby ci nauczyć się podstaw tworzenia projektów w React. Możesz znaleźć mnóstwo materiałów o tym, jak rozpocząć tworzenie projektu React. Istnieje wiele artykułów online, które uczą podstawowych etapów tworzenia aplikacji, wraz z kodem źródłowym.

Jako początkujący, zadanie tworzenia projektów React od podstaw może wydawać się trudne, ale jest pewien sekret uproszczenia tego procesu – rozbicie aplikacji na mniejsze komponenty. Staraj się skoncentrować na budowaniu jednej funkcji na raz i łącz kolejne punkty. Kontynuując ćwiczenie i eksperymentowanie z różnymi narzędziami i ekosystemami React, zrozumiesz wspólne wzorce tworzenia aplikacji, a także, które narzędzia są najlepsze do rozwijania określonych funkcji aplikacji React.

Dodatkowa wskazówka : często początkujący mają błędne przekonanie, że muszą zbudować backend aplikacji od podstaw, ale nie jest to konieczne. Możesz po prostu wykorzystać technologie bezserwerowe, takie jak AWS Amplify, Firebase i Hasura, aby wyposażyć swoją aplikację w gotowe do użycia zaplecze. Te narzędzia nie tylko oszczędzają Twój czas, ale także pomagają zwiększyć Twoją produktywność.

Dowiedz się więcej o: Full Stack Developer Salary w Indiach

Pomysły na projekty React dla początkujących

1. Aplikacja mediów społecznościowych

Przyszłość marketingu w mediach społecznościowych w Indiach jest niesamowita, ponieważ aplikacje społecznościowe, takie jak Facebook, Instagram, Snapchat i Twitter, są najlepszymi przykładami zaawansowanych aplikacji. Te aplikacje mogą być świetną inspiracją dla projektu React, ponieważ mają coraz większą liczbę zaawansowanych funkcji. Najlepsze w budowaniu aplikacji społecznościowej za pomocą React jest to, że wiesz, jakie funkcje musisz uwzględnić w aplikacji. Niektóre z najczęstszych funkcji prawie wszystkich aplikacji społecznościowych to:

  • Uwierzytelnianie użytkownika
  • Powiadomienia i kanał informacyjny
  • Łatwa integracja z innymi platformami
  • Publikowanie, udostępnianie i komentowanie

Zasadniczo aplikacja mediów społecznościowych zapewnia szerokie pole do eksperymentowania. Po dodaniu najbardziej podstawowych funkcji (takich jak te wymienione powyżej), możesz utworzyć dodatkowe funkcje do dostosowywania, które pozwolą użytkownikom końcowym dostosować swoje profile i konta zgodnie z ich wymaganiami i preferencjami.

Technologie, z których możesz skorzystać:

  • Utwórz aplikację React lub React Native do tworzenia dynamicznego interfejsu użytkownika dla postów, wiadomości i polubień.
  • AWS Amplify lub Firebase lub Hasura (przy użyciu subskrypcji GraphQL) dla danych w czasie rzeczywistym.
  • Funkcje AWS Lambda lub Firebase do powiadomień aplikacji
  • Pamięć Firebase lub Cloudinary do przesyłania zdjęć i filmów

2. Aplikacja e-commerce

Odkąd e-commerce przeniknął do głównego nurtu przemysłu, aplikacje e-commerce (takie jak Amazon, Flipkart, Nykaa itp.) stały się wszechobecne. Te aplikacje są teraz integralną częścią naszego życia. Tak więc, jeśli zbudujesz funkcjonalną aplikację e-commerce, pokaże ci to, że masz prawdziwe umiejętności, aby nadążyć za najnowszymi trendami w branży. Nie trzeba dodawać, że staniesz się atrakcyjnym kandydatem przed potencjalnymi pracodawcami.

Pamiętaj, że mówimy o rozwoju małego projektu e-commerce, który jest bardziej skoncentrowany na określonej branży, a nie na dużym rynku, takim jak Amazon czy eBay. Możesz wybrać dowolną branżę, która Cię interesuje, na przykład urządzenia elektroniczne (telefony komórkowe, telewizory, laptopy itp.) i rozwijać swoją aplikację e-commerce wokół tego.

Twoja aplikacja e-commerce może dostarczać produkty lub usługi. W każdym przypadku musisz zapewnić, że oprócz przeglądania produktów lub usług, klienci mogą cieszyć się bezproblemową obsługą klienta. Ma to kluczowe znaczenie dla sukcesu aplikacji — wszechstronna obsługa klienta i dobre wrażenia klientów to dwa kluczowe elementy każdej udanej aplikacji.

Jeśli chodzi o funkcje aplikacji, utrzymuj układ i interfejs schludny i łatwy w nawigacji, uwzględniaj opcję lokalizacji dostaw, dołącz koszyk na zakupy i listę życzeń. Upewnij się, że proces realizacji transakcji zawiera niezbędne opcje uwierzytelniania (jako gość lub zarejestrowany użytkownik).

Technologie, z których możesz skorzystać:

  • Create React App lub Gatsby to doskonały wybór do budowania witryny sklepowej, która wyświetla produkty/usługi.
  • Algolia jest idealna do tworzenia błyskawicznego interfejsu wyszukiwania produktów.
  • Netlify/AWS Lambda do obsługi procesu kasowego.
  • Stripe/react-stripe-elementy do zarządzania procesem płatności.
  • Snipcart umożliwia tworzenie koszyka, a także zarządzanie produktami koszyka.

3. Aplikacja pogodowa

To idealny projekt React dla początkujących. To prosty projekt – możesz go zakodować w ciągu kilku godzin! W tym projekcie musisz zbudować aplikację pogodową, która może wyświetlać 5-dniową prognozę pogody. W przypadku tej aplikacji możesz wykorzystywać fałszywe, zakodowane na stałe dane, dopóki wszystkie funkcje nie będą poprawne.

Aplikacja pogodowa musi mieć wszystkie podstawowe funkcje, w tym nazwę miasta, ikonę aktualnej pogody, temperaturę, wilgotność, prędkość wiatru itp. Musi wyświetlać zapis zarówno wysokich, jak i niskich temperatur każdego dnia, w tym trafne obrazy dla słonecznych/deszczowych/ pochmurna/śnieżna pogoda. Powinien mieć responsywny projekt i odświeżać się co pięć minut z dokładną temperaturą i warunkami pogodowymi.

Gdy już zdobędziesz kluczowe funkcje, możesz dalej rozwijać aplikację w następujący sposób:

  • Uwzględnij funkcję, w której użytkownik może kliknąć określony dzień tygodnia, aby zobaczyć prognozę godzinową.
  • Dodaj React Router do aplikacji (npm install respond-router). Sprawdź skrócony przewodnik , aby dodać trasy. Na przykład trasy, które mogą wyświetlać prognozę 5-dniową wraz z nazwą dnia i prognozą godzinową na ten dzień.
  • Zarejestruj się na Open Weather Map , aby otrzymać darmowy klucz API i pobrać prognozę na 5 dni. Następnie podaj te dane w swojej aplikacji.
  • Jeśli chcesz, aby aplikacja była jeszcze bardziej wyrafinowana, możesz dodać bibliotekę graficzną, taką jak vx . Możesz sprawdzić te przykłady vx dla inspiracji.

Tworząc tę ​​aplikację pogodową, dowiesz się, jak połączyć się z zewnętrznym API i wyświetlić odpowiednie wyniki. Ta praktyczna umiejętność będzie bardzo przydatna, gdy opracujesz inne rodzaje jednostronicowych aplikacji, które są przeznaczone do pobierania danych ze źródeł zewnętrznych i wyświetlania wyników.

Źródło

Technologie, z których możesz skorzystać:

  • Node.js i Bower to dwie doskonałe opcje dla tej aplikacji.
  • Możesz użyć Gulp Task Runner i preprocesora SASS CSS .
  • Możesz sprawdzić Erik Flowers dla ikon pogody, a dla modułów „wymaganych” możesz użyć Browserify .

4. Aplikacja do przesyłania wiadomości

Aplikacje do przesyłania wiadomości i usługi przesyłania wiadomości są niezwykle popularne wśród internautów. W rzeczywistości aplikacje do przesyłania wiadomości, takie jak WhatsApp i Facebook Messenger, stanowią tak dużą część naszego codziennego życia, że ​​nie wyobrażamy sobie dnia bez nich. Wiadomości błyskawiczne to teraz sposób na życie. Nawet firmy (duże lub małe) polegają na potędze komunikatorów, aby zapewnić swoim klientom całodobową obsługę klienta. Tak więc budowanie aplikacji do przesyłania wiadomości jest jednym z najlepszych sposobów zarabiania na umiejętnościach React.

Podczas opracowywania aplikacji do obsługi wiadomości mobilnych, pierwszą rzeczą do rozważenia jest to, że musisz zbudować platformę, która może ułatwić rozmowę między dwiema lub większą liczbą osób w czasie rzeczywistym. Kluczem jest tutaj czas rzeczywisty, ponieważ jest to istota komunikatorów. Możesz użyć narzędzi takich jak Firebase lub Hasura, które przesyłają dane przez WebSockets, aby natychmiast wyświetlać wiadomości w rozmowie. React Native to idealny wybór dla tego projektu.

Technologie do wykorzystania:

  • React Native lub React Native Web, ponieważ oba są doskonałe do tworzenia aplikacji do przesyłania wiadomości mobilnych i aplikacji hybrydowych (internet + urządzenia mobilne).
  • Firebase, AWS Amplify lub Hasura do wysyłania i odbierania wiadomości w czasie rzeczywistym.
  • Pamięć masowa w chmurze lub Firebase do wysyłania/odbierania wiadomości z obrazami lub treściami wideo.
  • pakiet npm emoji-mart dla emotikonów, które użytkownicy mogą umieszczać w swoich wiadomościach

5. Aplikacja produktywności

Jest to jeden z najłatwiejszych projektów na liście, a biorąc pod uwagę fakt, że samouczki dotyczące aplikacji biurowych są obfite, ten projekt powinien być stosunkowo łatwy dla początkującego. Jak sama nazwa wskazuje, aplikacje zwiększające produktywność to te, które pomagają zwiększyć produktywność. Niektóre z najczęściej używanych aplikacji biurowych to aplikacje do robienia notatek, aplikacje do zarządzania zespołem, aplikacje do list zadań, aplikacje do zarządzania czasem, żeby wymienić tylko kilka.

Chociaż są to typowe aplikacje biurowe, możesz spróbować utworzyć aplikację, która oferuje szczegółowe wprowadzenie do procesu tworzenia aplikacji. Jest to doskonały pomysł na aplikację biurową ze względu na uproszczony projekt i funkcje, które pozwolą użytkownikom śledzić etapy rozwoju aplikacji.

Tworząc aplikację zwiększającą produktywność, musisz zapytać, jakie funkcje uprościją dzienny harmonogram lub harmonogram nauki, i to będzie wskazówka do rozpoczęcia. Zacznij od prostej funkcji, takiej jak edytor tekstu do pisania sformatowanego tekstu ze znacznikami. Po pomyślnym opracowaniu jednej lub dwóch takich podstawowych funkcji aplikacji, stopniowo zacznij rozszerzać elementy. Na przykład opcja zapisania tekstu jako pojedynczych plików na komputerze, aby wyeksportować przecenę tekstu jako HTML do pisania sformatowanych wiadomości e-mail.

Technologie, z których korzystasz:

  • Utwórz aplikację React (dla sieci) lub React Native (dla platform mobilnych).
  • React-markdown pakiet npm do wyświetlania przecen w interfejsie użytkownika aplikacji.
  • React-codemirror2 pakiet npm do pisania kodu w notatkach.
  • React-draggable pakiet npm do zmiany kolejności zawartości listy za pomocą opcji „kliknij i przeciągnij”.

Wypróbuj także: Pomysły na projektowanie stron internetowych dla początkujących

6. Aplikacja rozrywkowa

Na koniec zapisaliśmy najbardziej rozbudowaną aplikację – aplikację rozrywkową. Aplikacje rozrywkowe koncentrują się na treściach multimedialnych, od filmów po muzykę i podcasty. Netflix, Audible, Spotify i Soundcloud to tylko niektóre przykłady aplikacji rozrywkowych. Co ciekawe, dzisiaj mamy wiele aplikacji rozrywkowych, które mają bliski związek z mediami społecznościowymi. TikTok jest prawdopodobnie najlepszym przykładem aplikacji rozrywkowej w mediach społecznościowych. Zawiera krótkie klipy wideo tworzone przez użytkowników i jest napędzane wysokim zaangażowaniem użytkowników. Następnie masz YouTube, który zachęca użytkowników do zaangażowania poprzez subskrypcje, polubienia i komentarze.

Nasz projekt będzie dużo, dużo prostszy niż którakolwiek z tych popularnych aplikacji. Wybierz media rozrywkowe, które najbardziej Cię interesują i zaprojektuj na jego podstawie swoją aplikację. Pomysł polega na stworzeniu aplikacji rozrywkowej, w której użytkownicy mogą się logować, aby przeglądać i zapisywać wybrane przez siebie treści. Gdy masz podstawowe funkcje, możesz bawić się elementami społecznościowymi, które pozwolą użytkownikom polubić, udostępniać i komentować zawartość aplikacji.

Technologie, z których możesz skorzystać:

  • Utwórz aplikację React, Next.js lub Gatsby dla interfejsu aplikacji.
  • Algolia do wyszukiwania multimediów (nazwy ścieżek audio, filmów, podcastów itp.).
  • React-player npm pakiet do odtwarzania multimediów.
  • Pamięć masowa w chmurze/Firebase do przesyłania treści multimedialnych.

Oprócz tych sześciu projektów, istnieje kilka innych łatwych projektów, które możesz wypróbować:

7. Karty społeczne

Chociaż nie jest to pełnowymiarowa aplikacja, ale raczej jej składnik, to jednak jest to dobry projekt. Internet jest pełen wielu odmian interfejsów kart społecznościowych. Możesz je znaleźć na Facebooku, Twitterze i Pintereście. Karta społecznościowa to idealny pomysł na projekt dla początkującego, ponieważ pozwala przećwiczyć rozkładanie interfejsu użytkownika na komponenty React. Ponadto karty społecznościowe są idealnymi reprezentacjami wizualnymi, w których można wyświetlać obrazy wraz z odpowiednimi danymi.

Źródło

8. Kalkulator

Kalkulatory to proste gadżety, które wykonują zestaw podstawowych funkcji matematycznych, w tym dodawanie, odejmowanie, mnożenie, dzielenie i procenty. Taka będzie idea naszego projektu – kalkulator, który może wykonać te niezbędne funkcje. Aby stworzyć nawet prosty kalkulator, musisz stworzyć konfigurację dla wszystkich różnych komponentów, stworzyć wspólną interaktywną platformę, a także stworzyć system wsparcia do obsługi awarii, awarii i błędów. Możesz użyć pakietu Create React App, aby utworzyć instancję katalogu do przechowywania i uruchamiania aplikacji kalkulatora.

Źródło

9. Strona problemów z Github

Ten projekt ma na celu zaprojektowanie uproszczonej wersji strony Github's Issues. Tak powinno wyglądać:

Źródło

Musisz mieć mały zakres. Zignoruj ​​elementy w nagłówku (wyszukiwanie, filtrowanie, gwiazdki itp.) i skup się tylko na implementacji listy problemów. Aby rozpocząć projekt, najpierw zbierz otwarte zgłoszenia z API Github i wyświetl je na liście. Następnie dodaj kontrolkę stronicowania, aby ułatwić nawigację po pełnej liście problemów. Jeśli dodasz React Router, możesz przejść bezpośrednio do wybranej strony. Możesz zwiększyć złożoność strony, dołączając również stronę ze szczegółami problemu.

Ucz się kursów rozwoju oprogramowania online z najlepszych uniwersytetów na świecie. Zdobywaj programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.

Wniosek

Mamy nadzieję, że ten artykuł był wystarczająco inspirujący, aby wprowadzić Cię w sposób myślenia o tworzeniu aplikacji. Im więcej ćwiczysz, tym lepiej rozwijasz realne projekty za pomocą Reacta.

Jeśli chcesz dowiedzieć się więcej na temat reagowania, pełnego rozwoju stosu, zapoznaj się z programem Executive PG UpGrad i IIIT-B w zakresie tworzenia pełnego stosu oprogramowania, który jest przeznaczony dla pracujących profesjonalistów i oferuje ponad 500 godzin rygorystycznych szkoleń, ponad 9 projektów i zadania, status absolwentów IIIT-B, praktyczne praktyczne projekty zwieńczenia i pomoc w pracy z najlepszymi firmami.

Przygotuj się na karierę przyszłości

Złóż wniosek o program Executive PG w zakresie pełnego rozwoju stosu