Front-End web development with React (FER202)
Vietnamese title: Phát triển web Front-End với React
Credits: 3
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.

Learning outcomes:
Describe Front-end Web UI Frameworks overview
Install React application and Understand React component
Explain JSX and ES6
Explain the Bootstrap, React-boostrap
Discuss the React Component Life Cycle, Forms and Routes
Discuss Hook, Event Handling and crafting reusable component in React
Discuss fetch and catching data in Client-Server Communication and Code Splitting Using Lazy Components and Suspense
Discuss Flow Architecture and Redux
Apply AI tools in React development and evaluate their ethical use and transparency

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/)

Materials:
description: https://getbootstrap.com/docs/5.3/getting-started/introduction/
description: https://react.dev/learn
description: https://react.dev/learn/start-a-new-react-project#nextjs

Assessments:
category: Assignment
type: on-going
weight: 15.0
duration: Guided in tutorials (Sessions 1), cont. at home
question_type: CLO1-CLO9
no_question: AI prompt, Likert review
grading_guide: Full-stack app using React, AI tools, covering CLO1-CLO9
note: Individual or team work, guided by instructor, submission by deadline
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
no_question: Practical exercises using AI prompt, Likert review
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
note: Teachers support tutorials, students complete independently, 1-1 review for 10 students per Lab
category: Practical Exam
type: on-going
weight: 20.0
duration: 85'
question_type: CLO1-CLO9
no_question: Preferable to be marked by scripts
grading_guide: Build React app with AI integration, covering CLO1-CLO9
note: Supervised by proctor(s) sent by exam board
category: Progress test
type: on-going
weight: 15.0
duration: 30' each
question_type: PT 1
CLO1 - CLO6
PT 2
CLO7 - CLO8
no_question: Multiple choice or essay
knowledge_and_skill: 20-25 (MCQ) or 5-8 (essay) per PT
grading_guide: PT 1: Fundamentals, Components, Hooks
PT 2: Client-Server, Redux
note: Supervised by instructor, online or in-class
category: Final exam
type: Final exam
weight: 30.0
duration: 60'
question_type: CLO1-CLO9
no_question: multiple choice
knowledge_and_skill: 50
grading_guide: all topics;
more than 70% new questions (for the current semester);
note: supervised by proctor(s) sent by exam board

Schedule:
session: Assignment Introduction with AI Integration
learning_outcomes: I
T
materials: FER202
session: Course Introduction
1.1 Full Stack Web Development: The Big Picture
1.2 React 19 Introduction
learning_outcomes: I
materials: Outline course structure, discuss full-stack roles, highlight React 19 updates
session: 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
learning_outcomes: I
T
U
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
session: Rendering with JSX + ES 6
2.1 ES6
learning_outcomes: I
T
materials: Present ES6 syntax (e.g., () =>), demo in browser console, assign practice tasks
session: 2.2 ES6 (cont'd)
- Using AI to generate ES6 code snippets
learning_outcomes: T
U
materials: Show AI Prompt (e.g., “Generate ES6 map”), explain output, check student snippets
session: 2.3 ES6 (cont'd)
learning_outcomes: U
materials: Answer questions, review exercise submissions, suggest improvements
session: 3.1 Rendering HTML
3.2 Creating your own JSX elements
learning_outcomes: T
U
materials: Explain JSX vs HTML, demo <div>{variable}</div>, guide JSX element creation
session: 3.3 Using JavaScript expressions
learning_outcomes: U
materials: Review expression syntax (e.g., {count + 1}), assist with practice, provide examples
session: 3.4 Building fragments of JSX
LAB 1: Install React + JSX Basics
learning_outcomes: T
U
materials: Explain Lab 1 goals, demo CRA setup, troubleshoot JSX issues
session: Review Lab 1
learning_outcomes: U
materials: Run AI on submissions (e.g., syntax check), review 10 students (13.5 min each), discuss
session: Review Lab 1 (td)
learning_outcomes: U
materials: Run AI on submissions (e.g., syntax check), review 10 students (13.5 min each), discuss
session: 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
learning_outcomes: I
T
materials: Present BS5 features, demo npm install bootstrap, guide React-BS integration
session: 4.2 Bootstrap Grid System
learning_outcomes: T
U
materials: Show grid classes (e.g., col-md-6), demo responsive layout, assist with exercises
session: 4.3 Bootstrap and React-Bootstrap CSS Components
- Navigation and Navigation Bar
- Icon and Fonts
- User Input: Buttons and Forms
- Tabular data (Table)
learning_outcomes: T
U
materials: Demo <Navbar> and <Button>, explain props, review student UI builds
session: 5.1 Bootstrap JavaScript Components
- Tabs, Pills and Tabbed Navigation
learning_outcomes: T
U
materials: Show <Tabs> usage, demo interactivity, guide testing
session: 5.2 Hide and Seek: Collapse and Accordion
learning_outcomes: U
materials: Explain <Collapse>, review student implementations, suggest enhancements
session: 5.3 Compare betweent Bootstrap and React-Bootstrap
learning_outcomes: T
U
materials: Discuss BS vs React-BS pros/cons
session: LAB 2: Bootstrap and React-Bootstrap UI
learning_outcomes: T
U
materials: Explain Lab 2 goals, troubleshoot UI issues
session: Review Lab 2
learning_outcomes: U
materials: Analyze submissions with AI (e.g., CSS efficiency), review 10 students, give feedback
session: Review Lab 2 (td)
learning_outcomes: U
materials: Analyze submissions with AI (e.g., CSS efficiency), review 10 students, give feedback
session: React Component
6.1 What's react component? How to build it?
6.2 Component Properties
learning_outcomes: I
T
U
materials: Explain component structure, demo <Comp prop="value" />, guide initial build
session: 6.3 Component State
- Setting initial component state
- Creating component state
- Merging component state
learning_outcomes: I
T
materials: Show state = {} in class, demo useState, assign state exercises Demo setState merging, guide functional state updates, review student work
session: Event Handling
7.1 Declaring event handlers
- Binding handlers to elements
- Using synthetic event objects
- Understanding event pooling
learning_outcomes: I
T
U
materials: Explain onClick, demo binding in class/functional, guide event setup Show event.target, discuss pooling, assist with exercises
session: 7.2 Using event handler context and parameters
- Declaring inline event handlers
LAB 3: Class vs Functional Components
learning_outcomes: T
U
materials: Demo inline onClick={() => ...}, explain Lab 3 goals, assist with comparison
session: Review Lab 3
learning_outcomes: U
materials: Check submissions with AI (e.g., refactor suggestions), review 10 students, discuss
session: Review Lab 3 (td)
learning_outcomes: U
materials: Check submissions with AI (e.g., refactor suggestions), review 10 students, discuss
session: 8.1 Passing property values
8.2 Stateless Components
learning_outcomes: T
U
materials: Demo <Comp prop={value} />, explain stateless benefits, guide practice
session: Container components
8.3 Providing and consuming contex
learning_outcomes: T
U
materials: Show Context.Provider, demo data sharing, assist with implementation
session: 8.4 Render props
8.5 Refactoring class components using hooks
learning_outcomes: T
U
materials: Demo <Comp render={() => ...} />, show Hook conversion, assist with exercises
session: Getting Started with Hooks
9.1 Maintaining state using Hooks
learning_outcomes: I
T
materials: Explain useState syntax, demo counter example, assign practice tasks
session: 9.2 Performing initialization and cleanup actions
learning_outcomes: T
U
materials: Show useEffect(() => {}, []), demo cleanup, review exercises
session: 9.3 Sharing Data with Context Hooks
learning_outcomes: T
U
materials: Demo useContext, show data flow, guide multi-component sharing
session: 9.4 Using Reducer Hooks for State Management
LAB 4: Hooks & Events
learning_outcomes: T
U
materials: Explain useReducer vs useState, demo Lab 4 setup, troubleshoot event issues
session: Review Lab 4
learning_outcomes: U
materials: Analyze event logic with AI, review 10 students (stratified), suggest improvements
session: Review Lab 4 (td)
learning_outcomes: U
materials: Analyze event logic with AI, review 10 students (stratified), suggest improvements
session: Progress Test - 01
learning_outcomes: T
U
materials: Upload test to Exam website, monitor testing, collect submissions
session: Handling Navigation with Routes
10.1 Declaring routes
- Decoupling route declaration
learning_outcomes: I
T
materials: Explain <Route>, demo basic routing, guide setup
session: 10.2 Handling route parameters
- Resource IDs in routes
- Optional parameters
learning_outcomes: T
U
materials: Show /:id, demo parameter access, assist with exercises
session: 10.3 Using link components
- Basic linking
- URL and query parameters
learning_outcomes: T
U
materials: Demo <Link to="/">, explain Lab 5 goals, troubleshoot lazy loading
session: Code Splitting Using Lazy Components and Suspense
11.1 Using Lazy API
11.2 Using the Suspense component
-Simulating latency
learning_outcomes: T
U
materials: Demo React.lazy(() => import()), show <Suspense>, guide latency practice
session: 11.3 Avoiding lazy components
11.4 Exploring lazy pages and routes
learning_outcomes: T
U
materials: Discuss lazy pitfalls, demo route splitting
session: Client - Server Communication
12.1 Set up a simple server that makes data available for clients
LAB 5: Routes & Lazy Loading
learning_outcomes: I
T
materials: Explain JSON server, demo json-server --watch, guide setup Assist with Lab 5 completion
session: Review Lab 5
learning_outcomes: U
materials: Analyze routing with AI, review 10 students, provide optimization feedback
session: Review Lab 5 (td)
learning_outcomes: U
materials: Analyze routing with AI, review 10 students, provide optimization feedback
session: 12.2 Access the data from the server using a browser
12.3 Use the json-server as a simple static web server
learning_outcomes: T
U
materials: Demo browser fetch, guide data display, troubleshoot server issues
session: Fetching and Catching Data with React
13.1 When to fetch and store data in React.
How to use window.fetch.
learning_outcomes: I
T
materials: Explain fetch timing, demo fetch(url), guide implementation
session: 13.2 What promises are.
How async/await works.
learning_outcomes: T
U
materials: Show async () => await fetch(), assist with exercises, explain promises
session: 13.3 Getting Data with Axios
How to simplify network requests with Axios.
LAB 6: Fetching Data
learning_outcomes: T
U
materials: Demo axios.get(), explain migration steps, assist with Lab 6 tasks
session: Review Lab 6
learning_outcomes: U
materials: Check fetch logic with AI, review 10 students, suggest data handling improvements
session: Review Lab 6 (td)
learning_outcomes: U
materials: Check fetch logic with AI, review 10 students, suggest data handling improvements
session: Flow Architecture and Intrduction to Redux
14.1 Explain the Redux approach to implementing a variant of the Flow architecture.
learning_outcomes: I
T
materials: Present Redux flow, demo store setup, guide initial practice
session: 14.2 Install and Configure Redux.
learning_outcomes: I
T
materials: Show npm install redux, demo store config, assist with setup
session: 14.3 Define Redux Toolkit
learning_outcomes: T
U
materials: Show AI Prompt for Toolkit, demo configureStore, review student integrations
session: 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
learning_outcomes: T
U
materials: Demo combineReducers, show Thunk async action, assist with exercises
session: 15.3 Use a logger middleware to print a log of actions initiated on the Redux store
learning_outcomes: T
U
materials: Demo redux-logger, explain log output, guide middleware integration
session: Progress Test - 02
learning_outcomes: T
U
materials: Upload test to Exam website, monitor testing, grade submissions
session: Assignment Evaluate
learning_outcomes: U
session: Assignment Evaluate
learning_outcomes: U
session: Assignment Evaluate
learning_outcomes: U
session: Assignment Evaluate
learning_outcomes: U