Научете React.js чрез изграждане на проекти - Създайте приложение за напомняне за рожден ден

Програмиране

Когато изучавате ново умение, видео уроците могат да ви отведат само досега. Много хора са съгласни, че изцапването на ръцете чрез изграждане на проект е начинът, по който трябва да се работи.

И така, в тази поредица от практически статии ще изградим не едно или две, а пет малки приложения на React.

Тези приложения ще варират от малки до средни и ще изискват да изградите сами всичко. Сякаш наистина ще кодирате приложението и ще преминете тестовите случаи и се уверете, че сте научили всяко умение.

Готови ли сте да започнете?

Как ще работи това

Тази статия е силно вдъхновена от собственото видео на freeCodeCamp тук. Но вместо просто да гледате видеоклипа, ще трябва да завършите проектите със собствените си ръце.

По време на тази мини серия от блогове ще изградите пет малки проекта. И за всеки проект има някои основни правила:

  1. Трябва да кодирате определени (или всички) аспекти на дадена функция
  2. Трябва да преминете дадените тестове за предизвикателствата
  3. Можете да потърсите външна помощ. Но бих препоръчал първо да отделите малко време за интерфейса и инструкциите. Това е така, защото интерфейсът е проектиран въз основа на това как най-вероятно ще прекарате времето си като разработчик на инструменти, базирани на разработчици.

Само бележка: codedamn завърта екземпляр на сървър за всеки потребител, така че за да използвате класната стая, трябва да се регистрирате / влезете.

Ако просто искате да проверите кода и да работите сами по проекта, а не в класната стая, можете да го видите на GitHub. Свързах се с GitHub във всеки раздел по-долу, за да можете да преминете към съответната част в кода.

Така че нека да започнем с първия проект. Ако получа добра обратна връзка, ще продължа с изписванията и проектите.

Как да създадем приложение за напомняне за рожден ден (проект №1)

Тъй като това е първият ни проект, ще запазя сложността много ниска. В този проект ще използваме React, за да изобразим списък с елементи от данни, т.е. рождените дни на няколко души.

Тези данни ще бъдат изобразени от статичен източник на данни и трябва да ви помогнат да разберете как да импортирате и използвате / изчистите данни в състояние. Ще работим в класната стая, която създадох с моя проект Codedamn. Можете да започнете тази класна стая тук.

Силно препоръчвам да завършите тази и други класни стаи, доколкото можете сами. Можете (и трябва) да използвате тази публикация в блога като ръководство.

Ето какво ще научите в тази класна стая:

  1. Как изглежда един основен проект на React
  2. Как да заредя данни от статичен JS файл
  3. Как да използвам useState за съхраняване на данни
  4. Как да изчистите променливата на състоянието и да видите това, отразено в потребителския интерфейс

Лаборатория 1 - Въведение в проекта

Ето връзката към тази лаборатория.

Това първо предизвикателство ви запознава с проекта и неговата структура. Прекарайте известно време в намирането на всички съответни битове и парчета в този и след като приключите, просто натиснете „Изпълнение на тестове“, за да преминете това предизвикателство. Тук няма нищо фантастично :)

Лаборатория 2 - Как да създадете контейнер с изглед за рожден ден

Ето връзката към тази практическа лаборатория.

Можете също да намерите файловете за настройка на лабораторията на GitHub тук.

След като разгледахте как са организирани структурата и файловете на проекта, е време да създадете статични изгледи.

Не забравяйте, че винаги можете първо да създадете държачи на статични данни и след това да ги попълните с динамични данни по-късно.

Това е много изчистен подход към изграждането на динамични компоненти, тъй като ви позволява да го направите готов, преди да го запълните динамично с данни.

В тази лаборатория трябва да завършите следните предизвикателства:

  • Във вашия файл App.jsx създайте следната HTML йерархия:
main > section.container > h3 + List
  • Съвет: Горното съкращение означава, че вашата структура трябва да изглежда по следния начин:
  • Вие h3трябва да съдържа текста:
0 birthdays today
  • Вашият компонент трябва да бъде List.jsxкомпонентът, който се импортира отгоре.

За да преминете всички тестове, уверете се, че сте направили следното:

  • Във вашия файл App.jsx трябва да присъства един елемент „h3“
  • Маркерът ви „h3“ трябва да съдържа „0 рождени дни днес“ (без кавички)
  • Вашият компонент "Списък" трябва да бъде изобразен

Ето решението на това предизвикателство:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { // Edit your return statement here to match the instructions return (   
0 birthdays today
    ) } export default App

Лаборатория 3 - Как да попълните статични данни от списъка

Here's the link to this lab.

You can also find the setup files of the lab on GitHub here.

We have the basic UI available to us. Let's now populate the static data from the data.js file.

This file has already been opened for you on the right side of the editor. Check out this file and see how the JSON data looks.

In this lab, you have to do the following things:

  • Inside your App.jsx file, you should now replace 0 Birthdays Today with Birthdays Today. Therefore, initially, it should show 5 Birthdays Today. Remember, the comes from the number of elements inside your data variable imported at the top.
  • Hint: You can use data.length
  • Pass the imported data variable as a prop to the List component. This prop should be called people
  • Hint:
  • In the List component, use this passed data to render just the names of the people for now. You can map over these people and display their names.

Here are 3 tests you have to pass:

  • Your App.jsx should now show "5 Birthdays Today" where "5" comes from the length of items imported at top
  • Your screen should show the names of all people in the list
  • You should use the "people" prop in the List component to pass the data and it should display the names

And here's the solution for the challenge.

App.jsx file:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { return (   {/* Make change to "0" here */} 
{data.length} birthdays today
 {/* pass data to list component */}    ) } export default App

List.jsx file:

import React from 'react' // accept props here const List = (props) => { const { people } = props // Map over prop "people" and display only the names in any way you like return people.map((item) => { return 
{item.name}
 }) } export default List

Lab 4 - How to display the new UI

Here's a link to this lab

You can also find the setup files of the lab on GitHub here.

Now that we have the names of people from the static data, let's make the UI a little bit better. You can look through all the CSS in the css files first, and then we will simply start using the CSS classes directly.

In this challenge, you only have to build up from the last challenge and create a UI inside List component.

In this lab, you have to do the following things:

  • Inside your List.jsx file, iterate over the people prop and display the following HTML structure:
NAME_OF_USER
AGE_OF_USER years
  • Make sure you replace the placeholders appropriately. Also, CSS classes in React JSX are named className, just a reminder!

Here are 4 tests you have to pass:

  • Your List component should render the "article" tag as parent
  • Your List component should render the "img" tag inside "article" tag with the correct src and alt tag
  • Your List component should render the "div > h4" inside the "article" tag with the name of the person
  • Your List component should render the "div > p" inside the "article" tag with the age of the person

And here's the solution (List.jsx file):

import React from 'react' // accept props here const List = (props) => { const { people } = props // Map over prop "people" and code the right structure return people.map((person) => { const { id, name, age, image } = person return (  
{name}
{age} years
 ) }) } export default List

Lab 5 - How to add a Clear All button

Here's a link to this lab

You can also find the setup files of the lab on GitHub here.

In this final lab, let's now add a “Clear” button which will clear the records and reset it to 0 birthdays. The button is already available for you, you just have to make sure it functions properly.

In this lab, you have to do the following things:

  • Create a new state variable called people
  • The initial value of this state variable should be the imported data from the top.
  • Pass this state variable now in the List component.
  • When the Clear button is pressed, empty the state variable so that no record is displayed (Hint: set it to an empty array)

And these are the tests you have to pass:

  • There should be a "Clear All" button on the screen (already done for you)
  • Initially, all records should be visible
  • When the "Clear All" button is pressed, it should remove all records from the screen

Here's the App.jsx solution file for this lab:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { // create a state variable here const [people, setPeople] = useState(data) // this should clear all records function clearAllRecords() { setPeople([]) } return (   
{people.length} birthdays today
  Clear All   ) } export default App

And you're done! Congrats on completing a small project in React. Way to go :)

Conclusion

I hope you enjoyed this codedamn classroom. You can find many others in the React Mastery learning path on codedamn.

There are a lot of gaps to fill yet, but there's a good chance that it will get you started pretty smoothly if you're new.

Make sure you tell me how your experience was on my Twitter handle, as this will help me frame the next practice classrooms.