/react_people-table-basics

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

React - People table

If you don't use Typescript

  1. Rename .tsx files to .jsx
  2. use eslint-config-react in .eslintrs.js

Basic tasks

  1. Install all the NPM packages you need and types for them.
  2. Use HashRouter on src/index.tsx
  3. Implement HomePage available at / with just a title Home page
  4. Implement PeoplePage available at /people with a title Peope page
  5. Redirect to / from /home (use Navigate)
  6. Implement NotFoundPage with a title Page not found that is shown for all the other URLs
  7. Add a Header visible everywhere with navigation links to both pages
  8. Create getPeople method fetching people from API when PeoplePage is opened
    • Find a mother and a father by motherName and fatherName and add them to the person for future use
  9. Implement PeopleTable component accepting an array of people as a param and rendering them in a table It should show these columns:
    • name
    • sex
    • born
    • died
    • mother
    • father
      <PeopleTable people={people} />
      <table className="PeopleTable">
        <th>...</th>
        <tbody>...</tbody>
      </table>
    • add border-collapse: collapse style to the table
  10. Implement PersonRow component accepting a person and displaying all the data described above
    <tr class="Person">
      <td></td>
      ...
      <td></td>
    </tr>