dkapanidis/react-workshop

React Workshop

React Workshop

React Workshop going through a step-by-step process to build a production-ready React app from scratch.

Features

The final app has the following features:

Core

• Bootstrapp with create-react-app.
• Utility-first CSS framework with tailwindcss.
• UI component explorer with storybook.
• Hooks for fetching, caching and updating with react-query.

Extra

• Page navigation with react-router.
• React hooks with react-use.
• Promise based HTTP client with axios.
• Icons & Tooltips with material-ui.
• Resizable Pane with react-split-pane.
• Keyboard shortcuts with mousetrap.
• API mocking library with miragejs.

How to Use

The repo contains the final result of the app, but also the documentation to build it from scratch.

• If you're interested in learning, the recommended way is to follow the documentation and build your new app from scratch.
• If you're interested in using the repo as a starter you can simply clone it, execute yarn start and start developing.

Structure

The guide is separated in chapters and each chapter contains various steps.

Chapter 1

During this chapter we setup the react app, install tailwindcss, configure page navigation and prepare a side menu with tooltips and keyboard shortcuts. Once finished we prepare an ARCHITECTURE.md that describes in high-level the system.

1. Setup React App
2. Setup TailwindCSS
3. Add Page Navigation
4. Prevent Overscrolling
5. Add SideMenu
6. Add Tooltips
7. Add Keyboard Shortcuts
8. Add Architecture

Chapter 2

On chapter 2 we focus on visual components. We build the UI bottom-up starting with basic components then progressively combined to assemble screens, following component-driven development.

We'll install storybook and build UIs for buttons, headers, cards, tables, pages, form fields and a confirmation modal.

1. Add Storybook
2. Add UI Buttons
3. Add UI Header
4. Add UI Card
5. Add UI Table
6. Add UI Page
7. Add UI Form Fields
8. Add UI Confirmation Modal

Chapter 3

On chapter 3 we implement a full CRUDL for a model, as an example we use movies.

• We'll setup Suspense for loading and error states. We install react-query to handle fetch, cache and update data using hooks. We install miragejs to mock API calls on the browser.
• Next, we define the Movies model, the movies API actions and the movies hooks used in the pages.
• Lastly, we define each of the pages of CRUDL (Create, Read, Update, List).

1. Add Suspense Container
2. Add QueryClientProvider
3. Add MirageJS
4. Add Movies Model
5. Add Movies Actions
6. Add Movies Store
7. Add List Movies
8. Add Create Movie
9. Add View Movie
10. Add Edit Movie
11. Add Movies Pages