To start working with react you should

- Know frontend fundamentals
- Be familiar with [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) tags and syntacs
- Know [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) fundamentals
- Know how to use [npm](https://docs.npmjs.com/about-npm) or [yarn](https://yarnpkg.com) to manage packages

Prerequisites

I can create quickly new react app using [Create React App@Library@](https://create-react-app.dev)

Just one command in console to start coding
```bash
npx create-react-app my-app
```

Using Create React App

I can create react app using tools like [Vite](https://vitejs.dev) or use out of the box online solutions like [StackBlitz@SaaS@](https://stackblitz.com/) and [CodeSandbox@SaaS@](https://codesandbox.io/s/react-new)

React creators and tools

# Everyone has to start somewhere.
The best option is to use ready and out-of-the-box tool. That helps to jump into React without worrying about a module bundler and unnecessary configurations.

There are plenty available options but most popular is without a doubt [create-react-app@Library@](https://create-react-app.dev/) from the creators of React.

Fill free to check out other alternatives!

Hello React World

I can create a simple component that will contain some static HTML and text. I know how to use this component to render it

Basic structure

I know that JSX is a syntact extention similar to HTML that is used to combine components into more complicated structures.

I know how to render some parts of them conditionally and change the content based on variables

What is JSX

I understand that props is data pased into component from parent component while state is data kept inside the component

I know how to pass and utilize props inside components

Props vs state

I know that JSX is just a JavaScript sugar that is equivalent of React.createElement

I know the reason, why class can not be used as property of component and why it has been replaced with className

Deeper into JSX

# It is time to start composing
Your application will be build from multiple replacable and reusable components.

After learing basic syntax you will know how to properly build an app from blocks. Start with static components and components that render their children components.

Deeper knowledge into JSX syntaxt will anable you to understand that underneach its is just a pure JavaScript code written in more readable and developer friendly way.

Component & JSX

I understand that a standard JavaScript function that is responsible for returning content to render.

I know that it must not modify passed properties to remain a pure function.

Render process

I understand the difference between *Functional Components* and functions that return *JSX.Elements*.

I know how their usage affects components tree in a different way.

FC vs function

**Functional Components** are the core of the modern react codebase.

They are based on the idea of the functions that are responsible for returning content to render based on provided props and application's state.

All React components must act like *pure* functions with respect to their props.

Functional Component

I know that I can create more specialized version of the component utilizing componsition and providing better props interface

Compose!

React naturally encourages to use componsition over inheritance. The reusability of the components make the the ideal bricks that can build easly highly complicated applications.


Composition over inheritance

I know *UNSAFE__* lifecycle methods and their previous purpoise of existance. That way I can understand code that needs to be adjusted to modern react codebase

Old lifecycle methods

The react is an established JS framework that is still evolving. After introduction of the hooks the main weight of the status updating shifted from class components to functional components.

Lifecycle has been simplified for the class components but they are still present for some UI libraries and legacy projects.

It may be worth understanding old methods to be able to migrate the components the the newer one, as with **version 18.0** lots of them became marked as *UNSAFE__* and will be removed from future versions of react

Obsolete lifecycle methods

I know how to use popular browser extension like **React Developer Tools** and **Redux DevTools** to inspect my application with ease

Extensions

I know that rules make debugging of the stack trees easier. I know that it is adviced to avoid anonymous components which can be achieved using tools like *eslint rules*

Debugging made easier

React dev tools can **enrich** your experience during coding and debugging. The components tree visualization will also make lots of consent of react **easier** to understand during learning.

There are dedicated tools for libraries like *redux* and *react-query* which make the state of the application and request even easier to inspect.

Dev tools

I respect the principal rules of hooks:

They **must** be used only inside functional components

They **must not** be executed conditionally (no hooks inside if statements / arrays forEach looping etc.)

Rules of hooks

I know how to introduce state into the functional component

I know when to use plain values and when utilize callback functions as arguments

useState usage

I can add effects to react to the changes of the observed variables.

I understand the concept of dependency array, why it is important and should not usually contain all dependencies.

useEffect usage

I understand the importance of the cleanup functions for timeouts, intervals, async calls, event listereners and much more when introducing them inside useEffect hooks

useEffect cleanups

I can combining both useState and useEffect to create controlled components.

I know how I can update state after properties updates

Combining useState and useEffect

# Hello world of hooks
These are special functions (always starting with *use* for linting purposes) that can be used *only inside functional components*

**useState** introduces state management into functional components. We can keep local state of the component and render its content based on it.

**useEffect** allows us to execute code when some variables change between renders, so we can react to the changes and update based on them.

Usage of this two basic hooks is fundamental to advance further.

Base hooks

I use useCallback hook to create memoized version of functions that will only update when its dependencies will be altered

useCallback usage

I know how I can create memoized variables with useMemo and that this technique is really usefull when dealing with costly calculations

useMemo usage

I know that **memo** is completely different from useMemo hook and can be used to memoized version of **whole component** and prevent rerenders when data is not changed

React.memo

React [virtual DOM@Docs@](https://legacy.reactjs.org/docs/faq-internals.html) and hooks **dependency arrays** heavily relies on comparing of the properties.

We need to create function or complexed structure like array or object during rendering, each time the **new object** will be created.

To reduce number of rerenders and effect calls we can use memoization techniques. It is **Important** to remember that optimization is not always needed and should be used wisely

Memoization hooks

I know how to properly render list of children. I do not forget about providing **keys** to the children and I know that if possible, they should not rely on the index of the element in the array

Render lists

I know that I can use Fragment to group elements. I know that it can be used to return multiple elements from render function when no parent element is present.

I know that the difference between *Fragment* and its short version *<>* is ability to pass **key**

React.Fragment

I know the basic idea of the reconciliation algorythm to understand the update process of **virtual DOM** that is happening under the hood. That way I know why **key** keyword is so important from the performance and lifecycle point of view for both lists and optionally rendered children components

Reconciliation algorythm

I know that I can use props that are passed to the children components to update their content. I know that parent can control state and update its children

Update child from parent

I know that I can create callback function and pass them to child component. It can be then used to update parent's state. I understand that it can also influence props that the parent component will passed after update

Update parent from children

While interacting with more complexed applications, the user will update their state. The application then should adjust to the changes and show the updated UI.

To create working, more complexed applications, you need to be able to control data flow and rerendering using a few simple strategies.

Data flow and rerendering

I know how to implement complex state management using use reducer. I know idea of the action triggering specific state changes

I know differences and scenarios between **useState** and **useReducer**

useReducer usage

I know how to utilize useContext hook to get data from the context

This is strictly connected to context section from *Data flow and rendering* node

useContext usage

I know how to create and store **mutable** variables that will not be a part of rendering process.

I know common usecases like keeping DOM nodes references

useRef hook

I know how to use **useTransition** that lets you mark a state transition as non-blocking and **useDeferredValue** that lets you defer updating a non-critical part of the UI

Performance hooks

React offers list of build-in hooks that allow developers to extend application functionality.

They should be used for specific usecases like managening complicated state or application optimization

Advanced hooks

I can create custom hook that will contain reusable logic. That way I can share similar behaviour between multiple components and reduce boilerplait code

Custom hook

Custom hooks can extend rich pool of build-in react hooks and hooks provided from third party libraries. You can create your own hooks that can be reused through your codebase.

Hooks can be an another **brick** that lets you to compose application of **reusable logic**

Custom hooks

I can create a refference to the rendered DOM element to manipulate it. I can achieve this using **useRef** hook for the functional component for **React.createRef** for class components

Access rendered DOM

I can forward ref to the custom component using **React.forwardRef** HOC wrapper. I understand that **ref** is a reserved keyword for the props and is passed as second argument of functional component.

I know that I can pass refs using props as an alternative method for special usecases

Ref forwarding

I know that sometimes you need an access to the ref that is forwarded. I know I can combine different kind of refs using custom combineRef hook

Combining refs

Refs provide a way to access DOM nodes or React elements created in the render method.

They can be used to manage focus, trigger imperative behaviours like animations or integrate with third party code.

The main usecase of refs is to have a refference to the true DOM element that is rendered in the browser. It can be used f.e. to measure size of the element or to focus it.

Refs

I know I can use suspence for whole parts of the components tree. I am aware of the mechanizms like **deffered values** or **transitions** that must be wrapped with Suspence

Suspence stacking

I know how to chunk bundle into smaller pieces using Suspence and **lazy loading**. I know how to provide fallback components

React code splitting

Suspence lets you display a fallback until its children have finished loading. This mechanizm can be used for **code splitting** or **displaying loading** state of the screen

Suspence supports rendering fallback components that replace awaited content

Suspence

I can use react app that is rendering only part of the whole website and render parts of the UI **outside root** element's DOM

Outside root

I can create custom modals implementation using Portals that can be stacked and displayed parallelly

Custom modals

Portals allow you to render some children into a different part of the DOM. This means that you can create some part of the html that will not be placed inside the parents structure, but in a separate place.

This is especially useful to create elements like **modals** that typically are placed over whole content of the website. This mechanizm can be also used when react application is **only a part of the website** and your code needs to place some elements outside of the **root element** DOM tree

Portal

I know **HOC** pattern with which I create a wrapper that will be reused to extend functionality of existing components.

I am aware that HOC creates a new component, so it should not be used inside render function or functional component.

Higher Order Component

I know that I can use properties that will accept react nodes. That way I can create additional slots inside component beside default **children** prop.

React.Node as props

I know that using useEffect I can attach event listeners. I remember to **clean up** the listeners with callback function

Event listeners with useEffect

I know that I can create component that will accept function as a **children** that will be executed with some context data to return JSX.

I understand that this pattern is used f.e. in components like *Context.Consumer*

Render props pattern

There are a few usefull patterns that can be adopted for your react application. They are a standard that is reused in lots of codebase

Patterns

I know that I should create UI components so they extend standard DOM Elements props and pass them to main element.

I **combine className** property so the component can be extended with new class without overriding existing styles

I remember also to provide refs to the root element

Extendable components

I know how to create components that maintain their own state but can be controlled optionally from the parent component

(Un)controlled components

I remember to create my custom ui components based on [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/docs/#wcag-2-standard)

Accessability support

UI components are the **main blocks** that build your application views. They should be created so they can be easily composed and extended

UI components

I know and use the [Ant Design@Library@](https://ant.design/) components

Ant Design

I know and use [Material-UI@Library@](https://mui.com/core/) components

Material-UI

I know and use [Chakra UI@Library@](https://chakra-ui.com/)

I understand the concept of **theming** and styling using props on which Chakra UI is based on

Chakra UI

Sometimes creating a new design system can feel like reinventing of the wheel

There are multiple UI libraries that provide most commonly used components that support multiple browsers and are accessable for screen readers. Most of them allow customization of predefined components so you can adjust them to your application's design

Mastering each of the library is not needed but examine their approach can **inspire your own solutions** or show **proven and scalable approaches**

UI libraries

I can style components using simple css files imports or global styles.

I am fully aware this approach **is not scalable** and should be used only for a few global styles or POCs

I know that I can provide inline styles using **styles** props

Standard CSS

I know how to use a CSS modules that create a unique classnames that do not conflict between different components.

I know how to setup my application / bundler to support both CSS and modules imports

CSS modules

I know that I can create reusable CSS using preprocessors like **SCSS** (recommended) or **SASS**. I know how to setup my bundler to support additional preprocessor

CSS preprocessors

I know how to create styles using [styled-components@Library@](https://styled-components.com/) that creates classnames straight from styles in JS

Styled components

I know how to use [Tailwind's@Library@](https://tailwindcss.com/) with predefined sets of classes for various CSS properties

I know how advantages and disadvantages of this approach

Tailwind

I know some CSS frameworks like [Bootstrap](https://getbootstrap.com/) that provide predefines styles for some ui components

CSS frameworks

There are multiple ways to create styles for your components. Each of the solutions require some **bundling** configuration and different approach to writing code

You can choose the most convenient way to add styles but should also know alternative solutions

Styling / CSS

I can call external REST API using inbuild **fetch** mechanizm or use popular libraries like [axios@Library@](https://axios-http.com/docs/intro)

REST request

I can request GraphQL data using tools like [Apollo@Library@](https://www.apollographql.com/docs/react/)

GraphQL request

I can download and keep query data using libraries like [react-query@Library@](https://tanstack.com/query/latest/docs/react/overview), [rtk-query@Library@](https://redux-toolkit.js.org/rtk-query/overview) or own custom implementation

I know how to check the status of fetching and how to use dependency array to **retrigger** fetching each time the parameters would change

Queries handling

I know how to trigger and handle API requests that will update data provided by backend. I know how I can retrive fetching status and adapt the displayed screen for loading, success or error page.

I know how to **refetch** or **update** existing loaded data from queries that could be affected by mutation calls

Mutations handling

Your application will start to be really interactive when used with a **backend**. To handle external API requests, you need to implement a data fetching mechanizm into your codebase.

There are several popular tool that can make loading queries and mutating request much easier to mantain. You can also implement your own solution but be aware of multiple edge cases that you need to handle!

Data fetching

I know and use one of the multiple libraries like [react-router@Library@](https://reactrouter.com/en/main) to handle **SPA** routing

SPA routers

I know how I can display a desired screen based on the url provided into the browser. I know how to use **wildcard paths** to match multiple (sub)paths

I know the idea of **outlets** that enables to mount subpaths in the specific slot of the parent's screen

I remember to provide not found pages for paths that do not match

Route handling

I can retrive **ids** and **slugs** from the URL and routes to fetch and render proper data for each specific path that user provides

Retriving slugs

I know that each library has its own **custom navigation** that simulates the links. I know that I should use **libraries navigation tools** not to trigger unnecessary browser refreshing

Manual navigation

For **Single Page Application** the routing handling is a crucial part. It helps the app to adjust to the current url and extract data from it. Your application will probably contain multiple pages that users can navigate through, so the routing must be handled properly.

**Disclaimer** - the routing is depending on the meta framework. It will be different for NextJS app and different for Remix and dozens of other frameworks that support SSR. This skills are focusing on *Single Page Application usecases*

Routing

I know how to create unit tests for javascript code - not only limiting to react components. I know tools like [jest@Library@](https://jestjs.io/)

Basics of JS unit tests

I know how to setup [React Testing Library@Library@](https://testing-library.com/) and test a simple stateless component
   
 I alternatively use [Enzyme@Library@](https://enzymejs.github.io/enzyme/)

Setup of tests

I know how to test user interaction like clicks and hovers using tools like [user-event@Library@](https://testing-library.com/docs/ecosystem-user-event/)

User interactions testing

I know how I can mocking backend APIs without interfering existing code. I know the setup of [Mock Service Worker](https://mswjs.io/) (or similar tools) with existing tests setup

API mocking

I know how to test[Redux@Library@](https://react-redux.js.org/) state changes due to actions and selectors for components

Global state mocking

# Your code should always be maintainable
 Without automatic tests each bigger change or refactor will require tons of manual tests. This isn't an issue for small project. However when you source code grown it's becoming to be challanging task.
 
 The skill to write propper tests that will check **functionality** rather then implementation is crutial for Your testbase.
 
 In order to acquire this skill, You should be familiar with [Jest@Library@](https://jestjs.io/) in the first place.
 
 > All code is guilty, until proven innocent.
 >
 > *Anonymous*

React testing

I know the idea of the rehydration of the code passed from server on the users machine. I know how specific frameworks pass data during first rendering of the page

Rehydration idea

I know that optionally rendered part of the code on server will not be included into the prerendered HTML and will not be available for indexing for search engines.

I know that I can hide elements using CSS and provide responsive content using media queries

Optional rendering vs SEO

I know that I cannot use **window** object during SSR and should trigger every part of code that relays on the **window** or DOM elements inside **effects**

Server rendering limits

Server Side Rendering, as the name suggests, is the rendering of the react on the server. This particular feature of react is more connected to specific **meta** frameworks like [NextJS@Framework@](https://nextjs.org/).

It allows to **serve** prerendered HTML structure of our website. This has many advantages, mainly in the **Search Engine Optimization** area, as our code is rendered before user will load all of react's scripts.

There are some generic rules when it comes to **SSR** that will be covered here, but **more specific** parts are a part of specific framework's roadmaps, not generic react's one

I know how to integrate [Storybook@Library@](https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/) with my react app and create stories containing components and whole views that can be quickly inspected

Storybook stories

I can adapt my react application to create screenshots based on stories or unit tests using tools like [Chromatic@Freemium@](https://www.chromatic.com/features/test) or [Jest@Library@](https://jestjs.io/docs/snapshot-testing)

Screenshots regression tests

Your code can run underneath without any bugs but the users can still face strange looking UI when you introduce changes to the CSS styles

To **avoid manual work** you can implement **visual regression** tools into your projects to ensure that application looks in a proper way

Visual regression

After years of SPA the web development is going back to pages served from on server. Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful tooling for the fastest builds.

It is the **meta framework** that introduces backend part of the modern web app. At its core its using React for frontend rendering. It is an industry standard and logical next step to extend your React knowledge

NextJS

React Native brings React's declarative UI framework to **iOS and Android**. With React Native, you use native UI controls and have full access to the native platform. React Native utilizes the base abstraction of React. It can be an option to go into mobile apps world with some previous experience gained from React.

React native

I can create an error boundary that will catch unexpected errors inside react code

Create error boundary

Sometimes some **unexpected errors** and bugs can appear inside our react code. Even when they appear we should **prevent** our whole application from **crashing**.

The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like how server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.

This mechanizm should not be used to handle exceptions that can be caught in a standard way, but is rather a safety fallback

Error boundaries

I know the full lifecycle of the react's class component and the predefined methods from lifecycle.

I understand how there methods correspond with the concepts from the **useEffect** hook.

Component's lifecycle

I know how the state management is handled for class components. I understand how I can update the state using setState method

setState

**Class Components** are the more old school way of creating react components. Since version *16.8* their usage is less popular. Still, they provide more control over rendering process and can be met inside older codebases.

Class components are the right tool for highly render heavy components as they allow the programmer to determine when the rerenders will happen.

They can be also useful for integration of external rendering libraries when standard functional components do not provide enough control.

React - Styling / CSS

Standard CSS

CSS modules

CSS preprocessors

Styled components

Tailwind

CSS frameworks