Skip to content

Latest commit

 

History

History
72 lines (53 loc) · 2.24 KB

README.md

File metadata and controls

72 lines (53 loc) · 2.24 KB
Raw

Running the Vite Frontend App

Navigate inside of my-react-app by using the change directory command: cd my-react-app

Then, you can start the Vite development server by running: npm run dev

This will start the Vite development server.

You can view this solutions app at http://localhost:3501.

NOTICE THAT FOR THIS SOLUTION REPO, IT WILL RUN ON PORT 3501, NOT PORT 5501.

The project structure should look like this: my-react-app/ ├── index.html ├── package.json ├── src/ │ ├── App.jsx │ ├── main.jsx │ └── index.css ├── vite.config.js └── node_modules/

Exercise instructions are in the file named EXERCISE-INSTRUCTIONS.txt inside of the my-react-app directory.

Individual exercise solution files are in the folder exerciseSolutions inside of the my-react-app directory.

Summary of React Concepts Covered in These Exercises

  1. React Components:

    • Building functional components.
    • Using JSX to describe the UI structure.

  2. React State Management:

    • Managing state with useState.
    • Handling derived state.
    • Using useEffect for side effects, such as fetching data.
    • Custom hooks to streamline code.
    • Error boundaries for catching and displaying errors gracefully.

  3. Routing with React Router:

    • Setting up routing using react-router-dom.
    • Declaring routes with Route and using Link for navigation.
    • Using URL parameters with useParams.
    • Handling 404 pages with custom components.
    • Using useNavigate for programmatic navigation.

  4. Event Handling:

    • Handling events such as form submissions and button clicks.
    • Using React's synthetic event system for consistent event handling.

  5. Fetching Data and Error Handling:

    • Fetching data using async/await and promises.
    • Handling loading states and errors effectively.
    • Using a mock API to simulate real-world data fetching.

  6. Performance Optimization:

    • Using hooks like useCallback and useMemo for optimization.
    • Techniques to avoid unnecessary re-renders.

  7. Custom Hooks:

    • Creating and using custom hooks to simplify repetitive logic.
    • Centralizing data-fetching logic.