Pelajari React.js dengan Membangun Proyek - Buat Aplikasi Pengingat Ulang Tahun

Saat Anda mempelajari keterampilan baru, tutorial video hanya dapat membantu Anda sejauh ini. Banyak orang setuju bahwa mengotori tangan Anda dengan membangun sebuah proyek adalah cara yang tepat.

Jadi, dalam rangkaian artikel praktis ini, kita tidak akan membuat satu atau dua, tetapi lima aplikasi React kecil.

Aplikasi ini akan berkisar dari kecil hingga menengah dan akan meminta Anda untuk membangun semuanya sendiri. Seperti Anda benar-benar akan membuat kode aplikasi dan lulus uji kasus dan memastikan Anda mempelajari setiap keterampilan.

Siap untuk mulai?

Bagaimana ini akan berhasil

Artikel ini sangat terinspirasi oleh video freeCodeCamp sendiri di sini. Tetapi alih-alih hanya menonton videonya, Anda harus menyelesaikan proyek dengan tangan Anda sendiri.

Sepanjang rangkaian blog mini ini, Anda akan membangun lima proyek kecil. Dan untuk setiap proyek, ada beberapa aturan dasar:

  1. Anda harus mengkodekan aspek tertentu (atau semua) dari sebuah fitur
  2. Anda harus lulus tes yang diberikan untuk tantangannya
  3. Anda dapat mencari bantuan eksternal. Tetapi saya akan merekomendasikan meluangkan waktu dengan antarmuka dan instruksi terlebih dahulu. Ini karena antarmuka dirancang berdasarkan bagaimana Anda kemungkinan besar akan benar-benar menghabiskan waktu Anda sebagai pengembang di alat berbasis pengembang.

Sekadar catatan: codedamn memutar instance server untuk setiap pengguna, jadi untuk menggunakan ruang kelas, Anda perlu mendaftar / masuk.

Jika Anda hanya ingin memeriksa kode dan mengerjakan proyek Anda sendiri, bukan di ruang kelas, Anda dapat melihatnya di GitHub. Saya telah menautkan ke GitHub di setiap bagian di bawah ini sehingga Anda dapat melompat ke bagian yang relevan dalam kode.

Jadi mari kita mulai dengan proyek pertama. Jika saya menerima umpan balik yang baik, saya akan melanjutkan penulisan dan proyek.

Cara Membuat Aplikasi Pengingat Ulang Tahun (Proyek # 1)

Karena ini adalah proyek pertama kami, saya akan menjaga kompleksitasnya sangat rendah. Dalam proyek ini, kami akan menggunakan React untuk membuat daftar item data, yaitu ulang tahun beberapa orang.

Data ini akan dirender dari sumber data statis dan akan membantu Anda memahami cara mengimpor dan menggunakan / menghapus data di dalam suatu status. Kami akan bekerja di dalam ruang kelas yang saya buat dengan proyek saya Codedamn. Anda dapat memulai kelas ini di sini.

Saya sangat merekomendasikan menyelesaikan ini dan ruang kelas lainnya sebanyak yang Anda bisa sendiri. Anda dapat (dan harus) menggunakan entri blog ini sebagai panduan.

Inilah yang akan Anda pelajari di kelas ini:

  1. Tampilan dasar proyek React
  2. Cara memuat data dari file JS statis
  3. Cara menggunakan useState untuk menyimpan data
  4. Cara menghapus variabel status dan melihat yang tercermin di UI

Lab 1 - Pengantar proyek

Ini link ke lab ini.

Tantangan pertama ini memperkenalkan Anda pada proyek dan strukturnya. Luangkan waktu untuk menemukan semua bagian yang relevan dalam hal ini, dan setelah Anda selesai, cukup tekan "Jalankan Tes" untuk lulus tantangan ini. Tidak ada yang mewah di sini :)

Lab 2 - Cara membuat wadah tampilan ulang tahun

Berikut link ke lab praktik ini.

Anda juga dapat menemukan file setup lab di GitHub di sini.

Sekarang Anda telah melihat bagaimana struktur proyek dan file diatur, sekarang saatnya membuat beberapa tampilan statis.

Ingatlah bahwa Anda selalu dapat membuat pemegang data statis terlebih dahulu, kemudian mengisinya dengan data dinamis di lain waktu.

Ini adalah pendekatan yang sangat bersih untuk membangun komponen dinamis, karena ini memungkinkan Anda untuk menyiapkan komponen sebelum Anda mengisinya secara dinamis dengan data.

Di lab ini, Anda memiliki tantangan berikut untuk diselesaikan:

  • Di dalam file App.jsx Anda, buat hierarki HTML berikut:
main > section.container > h3 + List
  • Petunjuk: Singkatan di atas berarti struktur Anda akan terlihat seperti berikut:

  • Anda h3harus berisi teks:
0 birthdays today
  • Komponen Anda haruslah List.jsxkomponen yang diimpor di bagian atas.

Untuk lulus semua tes, pastikan Anda melakukan hal berikut:

  • Satu elemen 'h3' harus ada di file App.jsx Anda
  • Tag 'h3' Anda harus berisi "0 ulang tahun hari ini" (tanpa tanda kutip)
  • Komponen 'Daftar' Anda harus dirender

Inilah solusi untuk tantangan ini:

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

Lab 3 - Cara mengisi data daftar statis

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.