Skip to content

oleksandrorel/react_people-table-basics

 
 

Repository files navigation

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. Implement HomePage available at / with just a title Home page
  3. Implement PeoplePage available at /people with a title Peope page
  4. Redirect to / from /home
  5. Implement NotFoundPage with a title Page not found that is shown for all the other URLs
  6. Add a Header visible everywhere with navigation links to both pages
  7. 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
  8. 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">
        <thead>...</thead>
        <tbody>...</tbody>
      </table>
    • add border-collapse: collapse style to the table
  9. Implement PersonRow component accepting a person and displaying all the data described above
    <tr class="Person">
      <td></td>
      ...
      <td></td>
    </tr>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 39.5%
  • HTML 31.0%
  • JavaScript 27.2%
  • SCSS 2.3%