React User Challenge

This is a solution to John Smilga's User Challenge from his React 18 Tutorial and Projects Course (2023).

Table of contents

• React User Challenge
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author
  • Acknowledgments

Overview

The challenge

Users should be able to:

• Display the users from the data array
• Add new person to the list when the user submits the form
• Remove the person on the list when the user click on the delete button

Screenshot

Links

• Solution URL: https://github.com/ereljapco/react-user-challenge
• Live Site URL: https://react-user-challenge-erj.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• vite-plugin-svgr - Vite plugin to transform SVGs into React components.
• uuid - For the creation of RFC4122 UUIDs

What I learned

• Creating a folder for each component made it easier for me to navigate and arrange my thoughts since everything for that component is in just one location

• Use of controlled inputs instead of targetting an element's value

const [name, setName] = useState('');

function handleNameChange(e) {
  setName(e.target.value);
}
// more code here

return (
  <section className="add-user">
    <h1 className="add-user__title">Add User</h1>
    <Form name={name} handleNameChange={handleNameChange} onSubmit={onSubmit} />
    <List users={users} deleteUser={deleteUser} />
  </section>
);

Useful resources

• Rosé Pine - palette used for the project

Author

• Frontend Mentor - @ereljapco
• LinkedIn - /in/ereljapco

Acknowledgments