Objective:
This course is designed to help junior developers and self-learners build a strong foundation in React by focusing on key concepts such as React Hooks, state management, and full-stack integration. While the course emphasizes frontend development, students will also work with a simple Node.js backend to gain a full-stack perspective, better preparing them for the job market. By the end of the course, students will be able to independently build complete projects using React and related technologies.
Remark:
Although this course aims to improve technical skills and understanding, it is focused on skill enhancement and does not guarantee immediate job placement, especially given the current economic challenges.
Duration: 6 weeks (one class per week, 3 hours per class)
Class Size: 4 to 8 students
Schedule: Weekend evenings (1 session per week)
Target Audience: Junior developers or self-learners with some React experience but lacking solid understanding of core concepts.
Level: Intermediate
Reinforce Core React Concepts: Focus on lifecycle, hooks, state management, and shared state across multiple components and pages.
Introduction to Advanced Patterns: Context API, Redux, caching, and performance optimization.
Frontend-Backend Integration: Build a complete project that uses both React on the frontend and Node.js on the backend.
Skill Enhancement (Not Job Guarantee): While the course will improve students' technical skills, it is not designed to directly help them find a job. Instead, it focuses on making them more confident and capable developers, which will help them in the job market.
Each class is designed to be interactive and hands-on, consisting of the following components:
Lecture with Demo: The instructor will explain key concepts and demonstrate practical examples through live coding. Students are encouraged to ask questions throughout the lecture and demo to ensure understanding.
Hands-on Project Practice: Students will apply the concepts learned by working on the E-commerce project during the class. This practice helps reinforce the material and provides immediate feedback through real-world application.
Q&A Session: Dedicated time for students to ask additional questions about the material, project work, or any challenges encountered during the practice.
Peer Review: Students will review each other's project code to provide constructive feedback, helping to identify areas for improvement and learn from peers.
Instructor Code Review: The instructor will provide detailed feedback on student submissions, highlighting best practices, addressing mistakes, and offering suggestions for improvement.
You can view this section after agreeing the terms and conditions.
We understand that everyone’s financial situation is different, especially in the current economic climate. To make this group-based React Mastery Workshop accessible while maintaining a high-quality learning experience, we offer a tiered pricing structure based on your employment status.
This course is designed to provide valuable, hands-on learning in a small group format (4–8 students), making it more affordable than 1-on-1 teaching, without compromising on the quality of instruction.
For Students with Full-Time Jobs:
For Students with Part-Time Jobs:
For Unemployed Students:
Pay Per Class:
You can choose to pay on a per-class basis, according to your employment status. This option gives you the flexibility to pay as you go, with no upfront full-pay.
Pay for Full Course Upfront:
If you pay for all 6 classes upfront, you will receive bonus 1-on-1 support hours valued at $1050 to $500, depending on your pricing tier.
More Affordable: Whether you are employed full-time, part-time, or currently unemployed, we have pricing options that fit your budget.
More Effective Group Learning: The group learning model reduces the cost for each individual while ensuring personalized attention and peer interaction, making the course both effective and engaging.
Flexible Payment Options: You can choose to pay per class, or pay the full amount upfront and receive free 1-on-1 support hours. This makes learning more affordable for more people while providing tailored technical boosting.
For registration, please contact Beeno Tung
course/small-group-react-mastery-workshop.tsximport { o } from '../../jsx/jsx.js'
import { Routes } from '../../routes.js'
import { title } from '../../../config.js'
import Style from '../../components/style.js'
import { Context } from '../../context.js'
import { Link } from '../../components/router.js'
import { getAuthUser } from '../../auth/user.js'
import { Locale, isPreferZh } from '../../components/locale.js'
import { readFileSync } from 'fs'
import { markdownToHtml } from '../../format/markdown.js'
import { Raw } from '../../components/raw.js'
import { nodeToHTML } from '../../jsx/html.js'
import { toRouteUrl } from '../../../url.js'
import terms from '../terms.js'
import SourceCode from '../../components/source-code.js'let pageTitleEn = 'React Mastery Workshop'
let pageTitleZh = 'React 精進工作坊'
let style = Style(/* css */ `
#SmallGroupReactMasteryWorkshop hr {
border-color: rgba(0,0,0,0.2);
}
`)
async function loadNote(file: string) {
let markdown = readFileSync(file).toString()
let html = await markdownToHtml(markdown)
return html
}
let courseEn = await loadNote('notes/react-course-en.md')
let courseZh = await loadNote('notes/react-course-zh-hk.md')
let outlineEn = await loadNote('notes/react-course-outline-en.md')
let outlineZh = await loadNote('notes/react-course-outline-zh-hk.md')
let loginMessageEn = nodeToHTML(
<>
<h3>Course Outline</h3>
<p>
You can view this section after agreeing the{' '}
<Link href={toRouteUrl(terms.routes, '/terms')}>
terms and conditions
</Link>
.
</p>
</>,
{ type: 'static' },
)
let loginMessageZh = nodeToHTML(
<>
<h3>課程大綱</h3>
<p>
同意
<Link href={toRouteUrl(terms.routes, '/terms')}>條款及細則</Link>
後，便可以查看此部分。
</p>
</>,
{ type: 'static' },
)
let hasAgreeLocale = (
<Locale
en={Raw(courseEn.replaceAll('[[outline.md]]', outlineEn))}
zh={Raw(courseZh.replaceAll('[[outline.md]]', outlineZh))}
/>
)
let notAgreeLocale = (
<Locale
en={Raw(courseEn.replaceAll('[[outline.md]]', loginMessageEn))}
zh={Raw(courseZh.replaceAll('[[outline.md]]', loginMessageZh))}
/>
)
function Main(attrs: {}, context: Context) {
let user = getAuthUser(context)
let hasAgree = user?.agree_time
return (
<>
{style}
<div id="SmallGroupReactMasteryWorkshop">
<h1>
<Locale en={pageTitleEn} zh={pageTitleZh} />
</h1>
{hasAgree ? hasAgreeLocale : notAgreeLocale}
<p style="font-weight: bold">
<Locale en="For registration, please contact" zh="報名請聯絡" />{' '}
<a target="_blank" href="https://beeno-tung.surge.sh/">
Beeno Tung
</a>
</p>
</div>
<SourceCode page="course/small-group-react-mastery-workshop.tsx" />
</>
)
}
let routes = {
'/course/small-group-react-mastery-workshop': {
menuText: <Locale en={pageTitleEn} zh={pageTitleZh} />,
resolve(context) {
let zh = isPreferZh(context)
return {
title: title(zh ? pageTitleZh : pageTitleEn),
description: zh
? '為期6週的小組React精通工作坊，專為初級開發者及自學者設計。學習React Hooks、狀態管理及全棧集成，並通過實操項目掌握技能。課程設有按工作狀況而定的多層次收費結構，並提供免費的一對一支援。'
: '6-week Small Group React Mastery Workshop designed for junior developers and self-learners. Learn React Hooks, state management, and full-stack integration with hands-on projects in a small group setting. Affordable tiered pricing based on employment status, with options for free 1-on-1 support.',
node: <Main />,
}
},
},
} satisfies Routes
export default { routes }