01 - Introduction
001 Web development nowadays.mp4
002 What you are going to learn in this course.mp4
003 Prerequisites.mp4
004 How to get the most out of this course.mp4
02 - Development Environment Setup
001 Intro.mp4
002 Install WSL2 - for Windows developer only.mp4
003 Install VS Code.mp4
004 Install nvm and node.mp4
005 Intro to node, npm, and npx.mp4
006 First React app.mp4
007 Shell crash course (optional).mp4
04 - Programming with JavaScript
001 Intro to JavaScript.mp4
002 What's programming.mp4
003 Dimensions of programming.mp4
004 JavaScript vs TypeScript.mp4
005 History of JavaScript.mp4
006 Comments.mp4
007 Variable and literal.mp4
008 Scope.mp4
009 Function.mp4
010 Number.mp4
011 String.mp4
012 Boolean.mp4
013 Undefined and null.mp4
014 Intro to complex data types.mp4
015 Object.mp4
016 Array.mp4
017 Map.mp4
018 Variables in memory.mp4
019 Branch.mp4
020 For loop.mp4
021 While loop.mp4
022 Intro to functional programming.mp4
023 Map-Reduce - Part I.mp4
024 Map-Reduce - Part II.mp4
025 Intro to asynchronous programming.mp4
026 Asynchronous function - Gen 1 callback.mp4
027 Asynchronous function - Gen 2 promise.mp4
028 Asynchronous function - Gen 3 asyncawait.mp4
029 JSON.mp4
06 - Intro to React
001 Single Page Application (SPA).mp4
002 What's React.mp4
003 Your first React app.mp4
07 - React Components
001 What's a component.mp4
002 Create a component.mp4
003 Component rendering.mp4
004 Create a Card component.mp4
005 Component with CSS framework.mp4
006 Component props.mp4
007 Decouple data from a component.mp4
008 Apply custom CSS to your component.mp4
009 Intro to SASS.mp4
010 CSS modules.mp4
08 - Interact with Users
001 Intro.mp4
002 Create a thumbs-up component.mp4
003 How rendering works.mp4
004 Intro to React state.mp4
005 State in a functional component.mp4
006 State in a class component.mp4
007 How re-rendering works.mp4
008 Re-render thumbs-up component.mp4
009 React developer tools.mp4
010 Hooks.mp4
011 React synthetic events.mp4
09 - Forms
001 Intro.mp4
002 Create Editor component.mp4
003 Text input.mp4
004 Controlled input vs uncontrolled input.mp4
005 Radio.mp4
006 Select-options.mp4
007 Textarea.mp4
008 Checkbox.mp4
009 Add props to Editor.mp4
010 How key properties are used in re-rendering.mp4
011 Revise TodoItem UI.mp4
012 Switch to Editor and back.mp4
013 Update todo item.mp4
014 Delete todo item.mp4
015 Refactor Editor.mp4
016 Create todo item.mp4
11 - Programming Practice - Color Picker
001 Intro.mp4
002 Palette component.mp4
003 Add value tag.mp4
004 HSL component.mp4
005 Color preview.mp4
006 Batching of state updates.mp4
007 useEffect().mp4
008 memo() and useCallback().mp4
009 useMemo().mp4
010 Bottom line.mp4
12 - Navigating between Pages
001 User experience matters.mp4
002 Intro to React Router.mp4
003 Add a router.mp4
004 Nested routes.mp4
005 Programmatic navigation.mp4
006 Parameters from URL.mp4
007 Add an index page.mp4
008 Add a navigation bar.mp4
009 Data router (a new way to create a router).mp4
010 Data loading with synchronous loader.mp4
011 Data loading with asynchronous loader.mp4
012 Handle routing errors.mp4
013 Deferred data loading.mp4
13 - Communicate with the Backend
001 Intro to RESTful API.mp4
002 Set up Firebase real-time database.mp4
003 Verify availability of the RESTful APIs.mp4
004 RESTful requests with fetch().mp4
005 RESTful requests with AXIOS.mp4
006 fetch() vs AXIOS.mp4
007 Build an API utility.mp4
008 Persist TODO items in Firebase real-time database.mp4
009 Load data with useEffect().mp4
010 Load data with React Router data loader.mp4
011 Update TODO items.mp4
012 12. Separate Dev env and Prod env for better maintainability.mp4
14 - Auth
001 Authentication vs authorization.mp4
002 Session-based vs token-based authentication.mp4
003 JWT.mp4
004 Digital signature by symmetric encryption - HMAC-SHA256.mp4
005 Digital signature by asymmetric encryption - RSA-SHA256.mp4
006 Symmetric-key vs asymmetric-key signature.mp4
007 Social login - OAuth and OpenID Connect.mp4
008 Signup and login with Firebase Auth SDK.mp4
009 Signup and login with Firebase AuthUI.mp4
010 Firebase admin SDK.mp4
011 Keep user auth info in a state.mp4
012 Add social login.mp4
013 useContext().mp4
014 Loginlogout status.mp4
015 Intro to Role-Based Access Control (RBAC).mp4
016 Grant users permissions with RBAC.mp4
017 Authorized RESTful API calls.mp4
018 Redirect user to login page and back.mp4
019 Protect client-side routes with RBAC.mp4
15 - Linting, Testing, and Deployment
001 What's linting.mp4
002 Linting with ESLint.mp4
003 What's testing.mp4
004 Set up testing environment.mp4
005 Test a form.mp4
006 Measure the completeness of your tests - code coverage.mp4
007 Mocking.mp4
008 Test from developer's perspective.mp4
009 Intro to deployment.mp4
010 Deploy assets to Firebase Hosting.mp4
011 Lazy loading.mp4
012 Chunking.mp4
專業知識教學
