Advanced React Patterns Ultrasimplified Save

Welcome to Advanced React Patterns Ultrasimplified!

Here, you'll be walked through advanced React Component Patterns in an intuitive fashion that models your day-to-day job as a Software Engineer - Pull requests!

Helpful Links

🖥 The demo site

👀 The udemy course?

What do you mean by 'Ultrasimplified'?

1. Real World Demos 🚀

You won't find basic hello world demos here. The demos have been intentionally designed to be actually helpful and relatable.

2. Mimics your day-to-day job as a developer 🖥

Each pattern is implemented and discussed via a pull request. View the PRs. Read the descriptions. Read the comments. Like you do at work!

Coming from my Udemy Course?

• The branch we start off from is branch clean-slate. See branch
• Every lesson starts off in a new "clean-slate" branch e.g. "clean-slate-01", "clean-slate-02", "clean-slate-03" etc.

• The development DEMO site lives here: https://dev-advanced-react-patterns-ultrasimplified.netlify.com/

But I'm just a beginner. Isn't this too advanced?

Ideally, you're not new to React. This is targetted more towards intermediate React engineers, but I'm sure a diligent beginner may work through these PRs as well.

Some comforting words: working through these patterns in a set of PRs allows you to focus on a bit at a time, with only new changes considered. Give it a try. It might turn out easier than you think.

How do I run the demos locally?

1. Clone this repo

git clone [email protected]:ohansemmanuel/advanced-react-patterns-ultrasimplified.git

2. Change directory

cd showcase

3. Install dependencies

npm install

or

yarn install

4. Run the app

npm run dev

or

yarn dev

The Patterns implemented (PRs)

1. The Medium Clap

• Initial implementation with class component
• Refactor to custom hooks

2. Compound Components

• Initial implementation
• With Callback

3. Reusable Styles

4. Control Props

5. Custom Hooks

6. Props Collection

7. Prop Getters

8. State Initializers

9. State Reducers

• Initial refactor to useReducer
• With user defined reducer
• With type and reducer export