React Playground

Learn and practice React by creating some interesting programs

1. animations

   Create animations by using react-transition-group API in React project.

2. base-syntax-assignment

   Assignment of practice basic React syntax session.

3. burger-builder-authentication

   Added user authentication on burger-builder project.

4. burger-builder-basic

   Completed basic function of burger-builder project. Such as add ingredients, Calculate the price, checkout, etc.

5. burger-builder-convert-to-hooks

   Converted burger project to use functional components and React hooks only (single type state)

6. burger-builder-convert-to-hooks-multiple-slices

   Converted burger project to use functional components and React hooks only (multiple type state)

7. burger-builder-redux

   Centralize state management through redux.

8. burger-builder-redux-saga

   Fetching and storing data from the server by using asynchronous methods ( react-saga ) in redux.

9. burger-builder-redux-thunk

   Fetching and storing data from the server by using asynchronous methods ( react-chunk ) in redux.

10. burger-builder-testing

    Test local functions of react component through Jest and Enzyme

11. lists-conditionals-assignment

    Assignment of practice basic React syntax session ( handle lists ).

12. nextjs-practice

    A glimpse of NEXT.js, which has page-based routing system and pre-rendering on the server site.

13. react-hook

    React hook demo, useState, useEffect, useRef, useCallback, useMemo, useContext and custom hook.

14. react-lifecycle

    Lifecycle demo.

15. react-routing

    Routing demo.

16. react-routing-LazyLoading

    LazyLoading demo.

17. redux-assignment

    Assignment of practice redux.

18. redux-practice

    Redux demo.

19. replacing-redux-with-react-hooks

    Demo to show how to replacing redux with react hooks.

20. routing-assignment

    Assignment of practice React routing.

21. webpack-workflow

    Webpack project configuration.