/Edu-React-PTT.G01

Building Web Applications with React and Redux

Primary LanguageJavaScriptMIT LicenseMIT

React-PTT

Building Web Applications with React and Redux

LESSON NOTES

// CREATE PROJECT npx create-react-app [projectName]

// KILL(STOP) TERMINAL => CTRL + C

// CLEAR TERMINAL => (Windows) CLS => (Others) Clear

// React Project run // Create NodeModules => npm i // Start => npm start

Live Share (Only in class) https://prod.liveshare.vsengsaas.visualstudio.com/join?65DDCAB7703F0F94A0D138CD70A012BDA3EA

// React Life Cycle Methods https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

REDUX REACT TEMPLATE

https://redux.js.org/tutorials/essentials/part-2-app-structure

npx create-react-app redux-essentials-example --template redux

REDUX SAMPLE FOLDER STRUCTURE

https://medium.com/@fdikmen/a-redux-toolkit-project-structure-guide-58093baa88a5

MOVIE APP CODES (PREVIOUS LESSONS)

// MOVIE APP = https://github.com/fdikmen/BA40FS_MERN/tree/main/Lesson14/movie-app

CONTENTS

DAY01

  1. Into
  2. React
  3. Hello World!
  4. npm
  5. Bug Fixed
  6. What is Component?
  7. Props
  8. Props - Key
  9. React Developer Tools
  10. Prop Types
  11. Summary

DAY02

  1. Summary
  2. Constructor
  3. Style
  4. Events
  5. State
  6. State App - Counter
  7. Class vs Function Component
  8. App- Phone Book with Events
  9. Class vs Function Component
  10. Phone Book Part-1
  11. Phone Book Part-2
  12. Life Cycle

DAY03

  1. Summary
  2. API? Fetch?
  3. Fetch in component
  4. Axios
  5. set interval/timeout
  6. Routing
  7. Routing-2
  8. Advanced Components - Higher Order Components - HOC
  9. Reusable HOC & Pure Components
  10. Hooks
  11. Redux

DAY04

  1. Summary
  2. Redux
  3. Redux Developer Tools
  4. MockAPI.io
  5. UI Libs
  6. Unit Test
  7. Movie App install redux & semanticUI
  8. Using a template
  9. Pages
  10. React Router
  11. Bug Fixed
  12. Create Slice
  13. Base Axios
  14. Fetch Movie

DAY05

  1. Summary
  2. Movie App with Redux
  3. Slide for previous Lesson
  4. ContextAPI
  5. Deploy
  6. NextJS
  7. Sample App with NextJS

DAY06

  1. Summary - Context API
  2. JS Promise
  3. Lazy & Suspense
  4. Isomorphic
  5. NextJS
  6. NextJS Codes
  7. Tailwind (UI Framework) & Flowbite (UI Library)
  8. Overview