Skip to main content

React Architecture & Predictive Development

This training is designed for developers who want to move beyond building React applications and learn how to design, scale, and evolve modern front-end systems. Starting with React fundamentals, participants gain a solid understanding of component-based development, and the React mental model, participants gain a solid understanding of component-based development, state management, and application structure.

From there, the course explores advanced architectural concepts used in large-scale applications. Topics include Atomic Design, Domain-Driven Design (DDD), layered architecture, event-driven communication, modularity, and strategies for managing complex state and team collaboration. The focus is on creating maintainable, scalable, and future-proof front-end architectures that align with business domains and organizational growth.

The final part of the training introduces Predictive Development with AI. Participants learn how tools such as GitHub Copilot can evolve from simple code assistants into deterministic engineering partners. Using SKILLS.md, reusable engineering skills, and structured workflows, teams can define standards, generate consistent code, validate outcomes, and continuously refine their systems. The result is a development approach where architecture, conventions, and implementation are aligned, enabling faster delivery, higher consistency, and greater scalability across teams and projects.

Requirements​

To get the most out of this training, participants should have:

  • Basic programming experience
  • Working knowledge of HTML, CSS, and modern JavaScript
  • A laptop with Node.js and npm or Yarn installed
  • A code editor such as Visual Studio Code
  • Git installed locally
  • A GitHub account
  • Access to GitHub Copilot for the Predictive Development with AI section
  • Copilot CLI or Desktop app for code generation exercises

Create a new React App with Vite​

npm create vite@latest <APP NAME> -- --template react-ts

Download the predefined course app​

In the course we will be using a predefined React application where all features we will be addressing in this course are already enabled. There is an elaborate README in that repo which describes in detail which features are installed and how they are configured.

You can find the course app in my GitHub Repo: https://github.com/ReneKrewinkel/react-course-app.git

This React TypeScript Vite project includes:

  • Storybook for component documentation and browser-based story tests.
  • Atomic Bomb for generating project scaffolding and atomic components.
  • Atomic Resources for shared design tokens, fonts, SCSS resources, and generated CSS.
  • Vitest for colocated unit tests and Storybook test integration.

You can clone it from my GitHub Repo and remove the .git folder afterwards.


cd <YOUR PROJECT DIR>
git clone https://github.com/ReneKrewinkel/react-course-app.git
# or with ssh:
git clone git@github.com:ReneKrewinkel/react-course-app.git
cd react-course-app
rm -Rf .git
npm install
# or
yarn
# or
pnmp install

Or, to get a fully clean version, you can use degit

npm install -g degit
cd <YOUR PROJECT DIR>
mkdir react-course-app
degit https://github.com/ReneKrewinkel/react-course-app.git
npm install
# or
yarn
# or
pnmp install

Run​

# to run:
yarn dev
# or
npm run dev
# or
pnpm run dev