プロジェクトを構築してReact.jsを学ぶ–誕生日リマインダーアプリを作成する

あなたが新しいスキルを学んでいるとき、ビデオチュートリアルはあなたをここまでしか連れて行けません。多くの人々は、プロジェクトを構築することによってあなたの手を汚すことは行く方法であることに同意します。

したがって、この一連の実践的な記事では、1つまたは2つではなく、5つの小さなReactアプリケーションを構築します。

これらのアプリは中小規模のものまであり、すべてを自分で作成する必要があります。実際にアプリをコーディングしてテストケースに合格し、各スキルを確実に習得するように。

始める準備はできましたか?

これがどのように機能するか

この記事は、freeCodeCamp自身のビデオに大きく影響を受けています。ただし、ビデオを見るだけでなく、自分の手でプロジェクトを完了する必要があります。

このミニブログシリーズのコース全体を通して、5つの小さなプロジェクトを構築します。また、プロジェクトごとに、いくつかの基本的なルールがあります。

  1. 機能の特定の(またはすべての)側面をコーディングする必要があります
  2. あなたは挑戦のために与えられたテストに合格しなければなりません
  3. あなたは外部の助けを求めることができます。ただし、最初にインターフェイスと手順を確認することをお勧めします。これは、インターフェイスが、開発者ベースのツールで開発者として実際にどのように時間を費やす可能性があるかに基づいて設計されているためです。

注:codedamnはユーザーごとにサーバーインスタンスを起動するため、クラスルームを使用するには登録/サインインする必要があります。

コードをチェックアウトして、教室ではなく自分でプロジェクトを実行したい場合は、GitHubで表示できます。以下の各セクションでGitHubにリンクしているので、コードの関連部分にジャンプできます。

それでは、最初のプロジェクトから始めましょう。良いフィードバックがあれば、記事やプロジェクトを続けます。

誕生日リマインダーアプリの作り方(プロジェクト#1)

これは私たちの最初のプロジェクトなので、複雑さを非常に低く抑えます。このプロジェクトでは、Reactを使用して、データ項目のリスト、つまり数人の誕生日をレンダリングします。

これらのデータは静的データソースからレンダリングされ、状態内のデータをインポートして使用/クリアする方法を理解するのに役立ちます。プロジェクトCodedamnで作成した教室で作業します。ここからこの教室を始めることができます。

この教室や他の教室をできるだけ自分で完了することを強くお勧めします。このブログ投稿をガイドとして使用できます(使用する必要があります)。

この教室で学ぶことは次のとおりです。

  1. 基本的なReactプロジェクトの外観
  2. 静的JSファイルからデータをロードする方法
  3. useStateを使用してデータを保存する方法
  4. 状態変数をクリアして、それがUIに反映されていることを確認する方法

ラボ1-プロジェクトの概要

このラボへのリンクは次のとおりです。

この最初の課題では、プロジェクトとその構造を紹介します。これに関連するすべての小片を見つけるのに少し時間をかけ、完了したら、「テストの実行」を押すだけでこのチャレンジに合格します。ここには何も派手なものはありません:)

ラボ2-誕生日ビューコンテナを作成する方法

この練習ラボへのリンクは次のとおりです。

ラボのセットアップファイルは、GitHubのこちらにもあります。

プロジェクトの構造とファイルがどのように編成されているかを確認したので、次は静的ビューを作成します。

いつでも最初に静的データホルダーを作成し、後で動的データを入力できることを忘れないでください。

これは、動的にデータを入力する前にコンポーネントを準備できるため、動的コンポーネントを構築するための非常にクリーンなアプローチです。

このラボでは、次の課題を完了する必要があります。

  • App.jsxファイル内に、次のHTML階層を作成します。
main > section.container > h3 + List
  • ヒント:上記の省略形は、構造が次のようになることを意味します。

  • h3のテキストを含める必要があります。
0 birthdays today
  • あなたのコンポーネントがあるべきList.jsx一番上にインポートされたコンポーネント。

すべてのテストに合格するには、次のことを確認してください。

  • App.jsxファイルに1つの「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.