Component-based frontend with Storybook and React

Index

1. Course Title
2. Training Objective
3. Duration
4. Mode of Delivery
5. Cost
6. Technical Requirements
7. Syllabus

1. Course Title

Component-based Frontend with Storybook and React

2. Training Objective

In this training course, you will learn how to develop modern frontend applications using a component-based approach with reusable, scalable, and maintainable components. Using React, the leading library for building user interfaces, and Storybook, the standard tool for documenting, testing, and visualizing components in isolation, you will master the techniques used by professional teams in real-world projects.

We will cover everything from React fundamentals to creating robust design systems, applying best practices in component architecture, state management, props handling, and live documentation. Throughout the course, we will build a library of visual components, powered by Storybook, which will accelerate application development and improve collaboration between designers and developers.

During the course, we will build the component repository https://kelly-storybook.julditec.com using the design components created in the Figma Training (no prior design course required) which are used to build the website https://kelly.julditec.com in the Liferay "Content Management" training course.

3. Duration

24 hours of instruction

4. Mode of Delivery

Online (recommended) or in-person.

1. In the online mode, no more than 3.5 hours per day is recommended.
2. In the in-person mode, additional costs for transportation and accommodation may apply if necessary.

5. Cost

Consult. Go to the contact form.

Please indicate the number of participants, the location for the in-person course, and whether you require any syllabus modifications to meet your company’s needs.

6. Technical Requirements

The course will be taught with a company license.

Hardware Requirements

• One computer per participant.

Software Requirements

• Web browser (Chrome).

Classroom Requirements (In-person mode)

• Wi-Fi connection with internet access.
• Projector and cable with HDMI or VGA connection (or Chromecast).
• Whiteboard

7. Syllabus (Subject to last-minute changes)

Block 0 - Introduction

• Course presentation and objectives.
• Overview: Figma → Storybook → Liferay.

Block I - Getting Started with Storybook

• What is Storybook and why use it?
• Installation and initial setup in a React project.
• Creating the first components in Storybook.
• Project organization for future integration in Liferay.
• Practice: Set up Storybook + React development environment.

Block II - Creating Reusable Components

• Designing modular and configurable components.
• Using props and types (PropTypes or TypeScript).
• Creating Variants and States.
• Dynamic controls (Controls Panel).
• Practice: Develop buttons, inputs, and cards.

Block III - Documentation in Storybook

• Using the @storybook/addon-docs addon.
• Automatic component documentation.
• Introduction to MDX: Customizing documentation.
• Best practices for documenting components.
• Practice: Document a set of components.

Block IV - Themes, Styles, and Design Tokens

• Using design tokens (colors, typography, spacing).
• Customizing themes in Storybook (light/dark).
• Integration with TailwindCSS or SCSS if applicable.
• Practice: Create and apply a custom theme to all components.

Block V - Visual Testing and Accessibility

• Introduction to visual and regression testing.
• Accessibility tests with @storybook/addon-a11y.
• Interaction tests with Play Function.
• Practice: Add visual and accessible tests to existing components.

Block VI - Design Integration: Figma and Collaborative Tools

• Connecting Figma and Storybook.
• Using Figma addons in Storybook.
• Design-implementation comparison.
• Exporting assets from Figma to Storybook.
• Practice: Integrate a Figma design into a Storybook component.

Block VII - Preparing and Exporting Components for Liferay

• Adapting Storybook components for Liferay fragments and templates.
• Converting JSX to clean HTML/CSS (Liferay-compatible).
• Separation of logic and presentation.
• Best practices for fragments.
• Practice: Export a component and convert it into a Liferay fragment.

Block VIII - Final Project: Complete Figma → Storybook → Liferay Workflow

• Selecting a real design from Figma.
• Developing components in Storybook.
• Documentation and testing.
• Adapting and exporting for Liferay.
• Final project presentation.