[major=SE | course_id=FER202 | syllabus_id=12580 | semester=5 | combo=SE_COM4.1 | title=Front-End web development with React]
Course ID: FER202
Title EN: Front-End web development with React
Title VI: Phát triển web Front-End với React
Credits: 3.0
Prerequisites: WED201c
Description: Learn front-end web development for implementing a multi-platform solution:

- Overview of client-side web UI frameworks, focusing on Bootstrap. Students will explore grids, responsive design, Bootstrap CSS, and JavaScript components.
- Basics of Node.js, npm
- JavaScript-based front-end development with the React library: ES6 for React applications, Reactstrap for Bootstrap-based responsive UI, React components, React Router for single-page applications, and designing controlled forms.
- Hooks to leverage React features like state and lifecycle in functional components, reducing reliance on class components.
- Flux architecture and Redux, covering Redux principles and building React-Redux powered applications.
Fetch for client-server communication, integrating REST APIs on the server side.
- Modern syntax and patterns for ReactJS development, paired with foundational knowledge to ensure long-term relevance.
- AI Integration: Use of AI tools (e.g., code generation with GenAI) to enhance development efficiency, with emphasis on transparency and ethical usage.
- Assessment Methods: Evaluation through practical labs, assignments, and reviews using stratified sampling, scored via Likert scales (1-5) for syntax, logic, customization, and transparency, converted to a 10-point scale.
Student tasks: - Students must attend at least 80% of contact slots to be eligible for the final examination.
- Students are responsible for completing all exercises assigned by the instructor in class or at home and submitting them on time.
- Regularly check announcements on FU FLM at https://flm.fpt.edu.vn/ for the latest course updates, including assignment submission deadlines and feedback on assignments and project work.
- AI-Related Task: Utilize AI tools (e.g., GenAI for code generation or debugging) responsibly in assignments and projects, and clearly document their usage (e.g., prompts, outputs) in submissions to ensure transparency and ethical application.
Tools: - Visual Studio Code (https://code.visualstudio.com)
- Internet
- Git (Bitbucket/Github source management)
- Node.js

AI tools
- Gemini (https://gemini.google.com/app)
- Grok (https://grok.com/)
- ChatGPT (https://chatgpt.com/)
Course type: traditional
Decision: 359/QĐ-ĐHFPT dated 04/09/2025
Approved date: 2025-04-09
CLO1: Describe Front-end Web UI Frameworks overview
[1] category=Assignment; type=on-going; weight=15.0; duration=Guided in tutorials (Sessions 1), cont. at home; question_type=CLO1-CLO9; grading_guide=Full-stack app using React, AI tools, covering CLO1-CLO9; completion_criteria=; clos=>0
[2] category=Labs; type=on-going; weight=20.0; duration=Guided and reviewed in tutorial sesions;
Cont. at home; question_type=Lab 1: CLO1, CLO2, CLO3
Lab 2: CLO4
Lab 3: CLO2, CLO6
Lab 4: CLO6, CLO9
Lab 5: CLO5, CLO7
Lab 6: CLO7, CLO9; grading_guide=Lab 1: React setup, JSX
Lab 2: Bootstrap UI
Lab 3: Components, Events
Lab 4: Hooks
Lab 5: Routes, Lazy Loading
Lab 6: Fetching data; completion_criteria=; clos=>0
[3] category=Practical Exam; type=on-going; weight=20.0; duration=85'; question_type=CLO1-CLO9; grading_guide=Build React app with AI integration, covering CLO1-CLO9; completion_criteria=; clos=4
[4] category=Progress test; type=on-going; weight=15.0; duration=30' each; question_type=PT 1
CLO1 - CLO6
PT 2
CLO7 - CLO8; grading_guide=PT 1: Fundamentals, Components, Hooks
PT 2: Client-Server, Redux; completion_criteria=; clos=>0
[5] category=Final exam; type=Final exam; weight=30.0; duration=60'; question_type=CLO1-CLO9; grading_guide=all topics;
more than 70% new questions (for the current semester);; completion_criteria=; clos=4
[1] desc=https://getbootstrap.com/docs/5.3/getting-started/introduction/; author=; publisher=; edition=; isbn=; main=True; online=True; note=
[2] desc=https://react.dev/learn; author=; publisher=; edition=; isbn=; main=True; online=True; note=
[3] desc=https://react.dev/learn/start-a-new-react-project#nextjs; author=; publisher=; edition=; isbn=; main=; online=True; note=
Session 1: Assignment Introduction with AI Integration
Topic: Offline; Teaching type: CLO1-CLO9; LO: I, T
ITU: Assignment brief
Materials: FER202
Download: Study assignment brief, brainstorm app idea with AI, note CLO1-CLO9 requirements

Session 2: Course Introduction
1.1 Full Stack Web Development: The Big Picture
1.2 React 19 Introduction
Topic: Offline; Teaching type: CLO1; LO: I
ITU: Slides
Materials: Outline course structure, discuss full-stack roles, highlight React 19 updates
Download: Study slides, note key concepts of full-stack and React 19

Session 3: 1.3 Git
- Setting up Git
- Basic Git Commands
- Setting up an Online Git repository
1.4 Node.js and npm
- Setting up Node.js and npm
- Basics of Node.js and npm
Topic: Offline; Teaching type: CLO1; LO: I, T, U
ITU: Slides
Materials: Explain Git purpose, demo git init/add/commit on terminal, troubleshoot install issues Show GitHub signup, demo git push, guide Node.js/npm install with version check
Download: https://flm.fpt.edu.vn/gui/role/student/Install Git, practice basic commands (init, add, commit), study slidesCreate GitHub account, push repo, install Node.js/npm, study slides

Session 4: Rendering with JSX + ES 6
2.1 ES6
Topic: Offline; Teaching type: CLO3; LO: I, T
ITU: Slides
Materials: Present ES6 syntax (e.g., () =>), demo in browser console, assign practice tasks
Download: Study ES6 features (arrow functions, destructuring), practice examples
CLO2: Install React application and Understand React component
Session 1: 2.2 ES6 (cont'd)
- Using AI to generate ES6 code snippets
Topic: Offline; Teaching type: CLO3, CLO9; LO: T, U
ITU: Slides, exercises, AI tool
Materials: Show AI Prompt (e.g., “Generate ES6 map”), explain output, check student snippets
Download: https://flm.fpt.edu.vn/gui/role/student/Use GenAI (e.g., ChatGPT) to generate ES6 snippets, compare with slides, do exercises

Session 2: 2.3 ES6 (cont'd)
Topic: Offline; Teaching type: CLO3; LO: U
ITU: Slides, exercises
Materials: Answer questions, review exercise submissions, suggest improvements
Download: Complete ES6 exercises, apply to simple React components

Session 3: 3.1 Rendering HTML
3.2 Creating your own JSX elements
Topic: Offline; Teaching type: CLO3; LO: T, U
ITU: Slides
Materials: Explain JSX vs HTML, demo <div>{variable}</div>, guide JSX element creation
Download: Study JSX syntax, create basic JSX elements, practice rendering

Session 4: 3.3 Using JavaScript expressions
Topic: Offline; Teaching type: CLO3; LO: U
ITU: Slides
Materials: Review expression syntax (e.g., {count + 1}), assist with practice, provide examples
Download: Use JS expressions in JSX, practice with examples
CLO3: Explain JSX and ES6
Session 1: 3.4 Building fragments of JSX
LAB 1: Install React + JSX Basics
Topic: Offline; Teaching type: CLO1, CLO2, CLO3; LO: T, U
ITU: Slides, lab questions
Materials: Explain Lab 1 goals, demo CRA setup, troubleshoot JSX issues
Download: Install React app with CRA, build JSX fragments, complete Lab 1

Session 2: Review Lab 1
Topic: Offline; Teaching type: CLO1, CLO2, CLO3, CLO9; LO: U
ITU: Lab submissions
Materials: Run AI on submissions (e.g., syntax check), review 10 students (13.5 min each), discuss
Download: Submit Lab 1, use AI to debug code, prepare questions for review

Session 3: Review Lab 1 (td)
Topic: Offline; Teaching type: CLO1, CLO2, CLO3, CLO9; LO: U
ITU: Lab submissions
Materials: Run AI on submissions (e.g., syntax check), review 10 students (13.5 min each), discuss
Download: Submit Lab 1, use AI to debug code, prepare questions for review

Session 4: Bootstrap and React-bootstrap
4.1 Bootstrap & React-Bootstrap Introduction
- Set up a project with Bootstrap & React-Bootstrap
- Configure a web project to use Bootstrap and React-Bootstrap
Topic: Offline; Teaching type: CLO4; LO: I, T
ITU: Slides
Materials: Present BS5 features, demo npm install bootstrap, guide React-BS integration
Download: https://flm.fpt.edu.vn/gui/role/student/Study Bootstrap/React-Bootstrap, set up project with both
CLO4: Explain the Bootstrap, React-boostrap
Session 1: 4.2 Bootstrap Grid System
Topic: Offline; Teaching type: CLO4; LO: T, U
ITU: Slides
Materials: Show grid classes (e.g., col-md-6), demo responsive layout, assist with exercises
Download: Practice grid system layouts, apply to sample UI

Session 2: 4.3 Bootstrap and React-Bootstrap CSS Components
- Navigation and Navigation Bar
- Icon and Fonts
- User Input: Buttons and Forms
- Tabular data (Table)
Topic: Offline; Teaching type: CLO4; LO: T, U
ITU: Slides, exercises
Materials: Demo <Navbar> and <Button>, explain props, review student UI builds
Download: Build UI with BS components (nav, buttons), do exercises

Session 3: 5.1 Bootstrap JavaScript Components
- Tabs, Pills and Tabbed Navigation
Topic: Offline; Teaching type: CLO4; LO: T, U
ITU: Slides, exercises
Materials: Show <Tabs> usage, demo interactivity, guide testing
Download: https://flm.fpt.edu.vn/gui/role/student/Implement JS components (tabs/pills), test functionality

Session 4: 5.2 Hide and Seek: Collapse and Accordion
Topic: Offline; Teaching type: CLO4; LO: U
ITU: Slides, exercises
Materials: Explain <Collapse>, review student implementations, suggest enhancements
Download: https://flm.fpt.edu.vn/gui/role/student/Add collapse/accordion to UI, practice interactivity
CLO5: Discuss the React Component Life Cycle, Forms and Routes
Session 1: 5.3 Compare betweent Bootstrap and React-Bootstrap
Topic: Offline; Teaching type: CLO4; LO: T, U
ITU: Slides, exercises
Materials: Discuss BS vs React-BS pros/cons
Download: https://flm.fpt.edu.vn/gui/role/student/Build UI with BS/React-BS

Session 2: LAB 2: Bootstrap and React-Bootstrap UI
Topic: Offline; Teaching type: CLO4; LO: T, U
ITU: Slides, lab questions
Materials: Explain Lab 2 goals, troubleshoot UI issues
Download: Compare in Lab 2, submit work

Session 3: Review Lab 2
Topic: Offline; Teaching type: CLO4, CLO9; LO: U
ITU: Lab submissions
Materials: Analyze submissions with AI (e.g., CSS efficiency), review 10 students, give feedback
Download: Submit Lab 2, use AI to optimize UI code, prepare for review

Session 4: Review Lab 2 (td)
Topic: Offline; Teaching type: CLO4, CLO9; LO: U
ITU: Lab submissions
Materials: Analyze submissions with AI (e.g., CSS efficiency), review 10 students, give feedback
Download: Submit Lab 2, use AI to optimize UI code, prepare for review
CLO6: Discuss Hook, Event Handling and crafting reusable component in React
Session 1: React Component
6.1 What's react component? How to build it?
6.2 Component Properties
Topic: Offline; Teaching type: CLO2; LO: I, T, U
ITU: Slides
Materials: Explain component structure, demo <Comp prop="value" />, guide initial build
Download: Study component basics, build a simple component with props

Session 2: 6.3 Component State
- Setting initial component state
- Creating component state
- Merging component state
Topic: Offline; Teaching type: CLO2; LO: I, T
ITU: Slides, exercises
Materials: Show state = {} in class, demo useState, assign state exercises Demo setState merging, guide functional state updates, review student work
Download: https://flm.fpt.edu.vn/gui/role/student/Practice setting initial state in components, do exercisesBuild components with state (Class/Functional), merge state, practice

Session 3: Event Handling
7.1 Declaring event handlers
- Binding handlers to elements
- Using synthetic event objects
- Understanding event pooling
Topic: Offline; Teaching type: CLO6; LO: I, T, U
ITU: Slides, exercises
Materials: Explain onClick, demo binding in class/functional, guide event setup Show event.target, discuss pooling, assist with exercises
Download: Study event handling, bind handlers to elements, practice

Practice synthetic events, explore pooling, do exercises

Session 4: 7.2 Using event handler context and parameters
- Declaring inline event handlers
LAB 3: Class vs Functional Components
Topic: Offline; Teaching type: CLO2, CLO6; LO: T, U
ITU: Slides, exercises, lab questions
Materials: Demo inline onClick={() => ...}, explain Lab 3 goals, assist with comparison
Download: https://flm.fpt.edu.vn/gui/role/student/Add inline handlers, compare Class/Functional in Lab 3, submit work
CLO7: Discuss fetch and catching data in Client-Server Communication and Code Splitting Using Lazy Components and Suspense
Session 1: Review Lab 3
Topic: Offline; Teaching type: CLO2, CLO6, CLO9; LO: U
ITU: Lab submissions
Materials: Check submissions with AI (e.g., refactor suggestions), review 10 students, discuss
Download: Submit Lab 3, use AI to refactor code, prepare for review

Session 2: Review Lab 3 (td)
Topic: Offline; Teaching type: CLO2, CLO6, CLO9; LO: U
ITU: Lab submissions
Materials: Check submissions with AI (e.g., refactor suggestions), review 10 students, discuss
Download: Submit Lab 3, use AI to refactor code, prepare for review

Session 3: 8.1 Passing property values
8.2 Stateless Components
Topic: Offline; Teaching type: CLO5; LO: T, U
ITU: Slides
Materials: Demo <Comp prop={value} />, explain stateless benefits, guide practice
Download: Build stateless components, pass props, practice

Session 4: Container components
8.3 Providing and consuming contex
Topic: Offline; Teaching type: CLO5; LO: T, U
ITU: Slides
Materials: Show Context.Provider, demo data sharing, assist with implementation
Download: Implement context in components, test data sharing, practice
CLO8: Discuss Flow Architecture and Redux
Session 1: 8.4 Render props
8.5 Refactoring class components using hooks
Topic: Offline; Teaching type: CLO6; LO: T, U
ITU: Slides
Materials: Demo <Comp render={() => ...} />, show Hook conversion, assist with exercises
Download: Refactor class components with Hooks, practice render props

Session 2: Getting Started with Hooks
9.1 Maintaining state using Hooks
Topic: Offline; Teaching type: CLO6; LO: I, T
ITU: Slides
Materials: Explain useState syntax, demo counter example, assign practice tasks
Download: Study useState, implement in a component, practice

Session 3: 9.2 Performing initialization and cleanup actions
Topic: Offline; Teaching type: CLO6; LO: T, U
ITU: Slides, exercises
Materials: Show useEffect(() => {}, []), demo cleanup, review exercises
Download: Use useEffect for lifecycle tasks, do exercises

Session 4: 9.3 Sharing Data with Context Hooks
Topic: Offline; Teaching type: CLO5, CLO6; LO: T, U
ITU: Slides
Materials: Demo useContext, show data flow, guide multi-component sharing
Download: Implement context Hooks, share data across components, practice
CLO9: Apply AI tools in React development and evaluate their ethical use and transparency
Session 1: 9.4 Using Reducer Hooks for State Management
LAB 4: Hooks & Events
Topic: Offline; Teaching type: CLO6; LO: T, U
ITU: Slides, lab questions
Materials: Explain useReducer vs useState, demo Lab 4 setup, troubleshoot event issues
Download: Use useReducer for complex state, complete Lab 4 with events

Session 2: Review Lab 4
Topic: Offline; Teaching type: CLO6, CLO9; LO: U
ITU: Lab submissions
Materials: Analyze event logic with AI, review 10 students (stratified), suggest improvements
Download: Submit Lab 4, use AI to enhance event logic, prepare for review

Session 3: Review Lab 4 (td)
Topic: Offline; Teaching type: CLO6, CLO9; LO: U
ITU: Lab submissions
Materials: Analyze event logic with AI, review 10 students (stratified), suggest improvements
Download: Submit Lab 4, use AI to enhance event logic, prepare for review

Session 4: Progress Test - 01
Topic: Offline; Teaching type: CLO1-CLO6; LO: T, U
ITU: Test questions
Materials: Upload test to Exam website, monitor testing, collect submissions
Download: Study materials, complete Progress Test 1
Session 1: Handling Navigation with Routes
10.1 Declaring routes
- Decoupling route declaration
Topic: Offline; Teaching type: CLO5; LO: I, T
ITU: Slides
Materials: Explain <Route>, demo basic routing, guide setup
Download: Study React Router, set up basic routes, practice

Session 2: 10.2 Handling route parameters
- Resource IDs in routes
- Optional parameters
Topic: Offline; Teaching type: CLO5; LO: T, U
ITU: Slides
Materials: Show /:id, demo parameter access, assist with exercises
Download: Add route parameters, test navigation, practice

Session 3: 10.3 Using link components
- Basic linking
- URL and query parameters
Topic: Offline; Teaching type: CLO5, CLO7; LO: T, U
ITU: Slides
Materials: Demo <Link to="/">, explain Lab 5 goals, troubleshoot lazy loading
Download: Build routed app with <Link> and lazy loading, complete Lab 5

Session 4: Code Splitting Using Lazy Components and Suspense
11.1 Using Lazy API
11.2 Using the Suspense component
-Simulating latency
Topic: Offline; Teaching type: CLO7; LO: T, U
ITU: Slides
Materials: Demo React.lazy(() => import()), show <Suspense>, guide latency practice
Download: https://flm.fpt.edu.vn/gui/role/student/Use React.lazy and Suspense, simulate latency, do exercises
Session 1: 11.3 Avoiding lazy components
11.4 Exploring lazy pages and routes
Topic: Offline; Teaching type: CLO7; LO: T, U
ITU: Slides, exercises
Materials: Discuss lazy pitfalls, demo route splitting
Download: Apply lazy loading to routes, test performance

Session 2: Client - Server Communication
12.1 Set up a simple server that makes data available for clients
LAB 5: Routes & Lazy Loading
Topic: Offline; Teaching type: CLO7; LO: I, T
ITU: Slides, lab questions
Materials: Explain JSON server, demo json-server --watch, guide setup Assist with Lab 5 completion
Download: Set up JSON server, study client-server basics, complete Lab 5

Session 3: Review Lab 5
Topic: Offline; Teaching type: CLO5, CLO7, CLO9; LO: U
ITU: Lab submissions
Materials: Analyze routing with AI, review 10 students, provide optimization feedback
Download: Submit Lab 5, use AI to optimize routing, prepare for review

Session 4: Review Lab 5 (td)
Topic: Offline; Teaching type: CLO5, CLO7, CLO9; LO: U
ITU: Lab submissions
Materials: Analyze routing with AI, review 10 students, provide optimization feedback
Download: Submit Lab 5, use AI to optimize routing, prepare for review
Session 1: 12.2 Access the data from the server using a browser
12.3 Use the json-server as a simple static web server
Topic: Offline; Teaching type: CLO7; LO: T, U
ITU: Slides
Materials: Demo browser fetch, guide data display, troubleshoot server issues
Download: Fetch data from server, display in app, practice

Session 2: Fetching and Catching Data with React
13.1 When to fetch and store data in React.
How to use window.fetch.
Topic: Offline; Teaching type: CLO7; LO: I, T
ITU: Slides
Materials: Explain fetch timing, demo fetch(url), guide implementation
Download: Study fetch, implement in app, practice

Session 3: 13.2 What promises are.
How async/await works.
Topic: Offline; Teaching type: CLO7; LO: T, U
ITU: Slides, exercises
Materials: Show async () => await fetch(), assist with exercises, explain promises
Download: https://flm.fpt.edu.vn/gui/role/student/Use async/await with fetch, practice exercises

Session 4: 13.3 Getting Data with Axios
How to simplify network requests with Axios.
LAB 6: Fetching Data
Topic: Offline; Teaching type: CLO7; LO: T, U
ITU: Slides, lab questions
Materials: Demo axios.get(), explain migration steps, assist with Lab 6 tasks
Download: Replace fetch with Axios, complete Lab 6
Session 1: Review Lab 6
Topic: Offline; Teaching type: CLO7, CLO9; LO: U
ITU: Lab submissions
Materials: Check fetch logic with AI, review 10 students, suggest data handling improvements
Download: Submit Lab 6, use AI to refine fetch logic, prepare for review

Session 2: Review Lab 6 (td)
Topic: Offline; Teaching type: CLO7, CLO9; LO: U
ITU: Lab submissions
Materials: Check fetch logic with AI, review 10 students, suggest data handling improvements
Download: Submit Lab 6, use AI to refine fetch logic, prepare for review

Session 3: Flow Architecture and Intrduction to Redux
14.1 Explain the Redux approach to implementing a variant of the Flow architecture.
Topic: Offline; Teaching type: CLO8; LO: I, T
ITU: Slides
Materials: Present Redux flow, demo store setup, guide initial practice
Download: Study Redux principles, set up basic store, practice

Session 4: 14.2 Install and Configure Redux.
Topic: Offline; Teaching type: CLO8; LO: I, T
ITU: Slides
Materials: Show npm install redux, demo store config, assist with setup
Download: Install Redux, configure store, practice
Session 1: 14.3 Define Redux Toolkit
Topic: Offline; Teaching type: CLO8, CLO9; LO: T, U
ITU: Slides, AI tool
Materials: Show AI Prompt for Toolkit, demo configureStore, review student integrations
Download: Use GenAI to generate Redux Toolkit code, integrate into app, practice

Session 2: Redux architecture
15.1 Split the reducer function into multiple simpler functions and combine the reducer functions
15.2 Use Redux Thunk middleware to return a function instead of an action
Topic: Offline; Teaching type: CLO8; LO: T, U
ITU: Slides
Materials: Demo combineReducers, show Thunk async action, assist with exercises
Download: Split reducers, implement Redux Thunk for async, practice

Session 3: 15.3 Use a logger middleware to print a log of actions initiated on the Redux store
Topic: Offline; Teaching type: CLO8; LO: T, U
ITU: Slides
Materials: Demo redux-logger, explain log output, guide middleware integration
Download: Add logger middleware, monitor actions, practice

Session 4: Progress Test - 02
Topic: Offline; Teaching type: CLO7-CLO8
CLO1-CLO8; LO: T, U
ITU: Test questions
Materials: Upload test to Exam website, monitor testing, grade submissions
Download: Study materials, complete Progress Test 2
Session 1: Assignment Evaluate
Topic: Offline; Teaching type: CLO1-CLO9; LO: U
ITU: Assignment submissions
Download: Submit assignment, prepare for review with AI-optimized code

Session 2: Assignment Evaluate
Topic: Offline; Teaching type: CLO1-CLO9; LO: U
ITU: Assignment submissions
Download: Submit assignment, prepare for review with AI-optimized code

Session 3: Assignment Evaluate
Topic: Offline; Teaching type: CLO1-CLO9; LO: U
ITU: Assignment submissions
Download: Submit assignment, prepare for review with AI-optimized code

Session 4: Assignment Evaluate
Topic: Offline; Teaching type: CLO1-CLO9; LO: U
ITU: Assignment submissions
Download: Submit assignment, prepare for review with AI-optimized code