Giter VIP home page Giter VIP logo

react-complete-guide's Introduction

react-complete-guide

05-rendering-lists-conditional-content

  • list.map()
  • list.filter()
  • conditional-content
  • conditional-styling

06-styling

  • dynamic inline style
  • dynamic inline class
  • styled-components
  • css module

07-debugging

  • react error message
  • browser error message
  • break point
  • react DevTools

08-practice-project

  • reusable UI component
  • user input state
  • user input validation
  • modal

09-fragments-portals-refs

  • Fragments
  • Portals
  • Refs
  • Controlled Component and Uncontrolled Component

10-side-effects-reducers-context-api

  • Side Effects
  • useEffect()
  • dependency array
  • Cleanup
  • object destructuring with useEffect
  • useReducer()
  • context API
  • useContext()
  • forwardRefs

11-practice-food-order-app

  • header and cart button
  • dummy food list
  • add food button
  • amount input
  • cart modal to order
  • cart Context
  • change quantity button
  • close, order button
  • cart animation

12-react-optimization-techniques

  • React.memo()
  • useCallback()
  • useMemo()

13-class-based-cmp

  • class based component
  • component lifecycle (componentDidMount, componentDidUpdate, componentWillUnmount)
  • class based component and context
  • error boundary (componentDidCatch)

14-sending-http-requests

  • http GET and POST
  • fetch / then
  • async / await
  • loading state
  • http error handling
  • http request in useEffect()

15-custom-hooks

  • custom hooks
  • http custom hooks

16-working-with-forms

  • form validation(onSubmit, lose focus, onChange)
  • input custom hooks

17-practice-food-order-http-forms

  • food list fetch (http request to firebase)
  • userData form
  • userData form validation
  • order (http request to firebase)
  • order state management(submitting, didSubmit)

18-diving-into-redux

  • redux
  • react-redux
  • redux toolkit

19-advanced-redux

  • asynchronous operation in redux
  • Thunk
  • http request in redux
  • redux DevTools

20-react-router

  • react router
  • Link
  • Dynamic Routing
  • Nested Routing
  • react router v6

22-authentication

  • react authentication
  • access token
  • expiration time
  • page protection

23-nextjs-introduction

  • File-based Routing
  • getStaticProps and getStaticPaths
  • getServerSideProps
  • MongoDB with Nextjs
  • Next Head
  • Deploying to Vercel

24-animations

  • css transition
  • css animation
  • react transition group

25-replacing-redux

  • custom hook store

27-react-typescript

  • basic typescript (type, type inference, union, type alias, generics)
  • typescript in react

react-complete-guide's People

Contributors

wantop1 avatar

Watchers

avatar

react-complete-guide's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.