Home

React Typescript Samples

React 19 update

Let's plan here a revamp taking into account that React 19 is going to be release soon.

Examples list:

• 00-boilerplate: explain here that this will be the starting point used on every project (but not for 01-creating-a-new-project).

• 01-create-project: here we create a project using npx and indicating that we are going to use the react typescript template and we just explain the project structure and how react works.

• 02-use-state: here we explain why we need something like useState and how it works (basics), start by adding a normal variable and a given input and check the differences.

• 03-properties: here we create a subcomponent and pass properties from the parent to the children, we could let the user add a name and show it in a card like? Maybe a good example could be to have a Header with client info and a card showing that info.

• 04-callback: we create a heading and subcomponent and we allow edition from the child componente, then we explain how callbacks in prop work and we can indicate that this can lead to callback prop hell.

• 05-lifecycle events: here we introduce useEffect and explain how it works.

• 06-interacting-with-api: here we can use the rick and morty api to display data (indicate that useEffect is not recommended), and show a possible use of useEffect for a search

• 07-use: same example as 06 but using use

• 08-react-router (spa), we can use rick and morty member api for instance (list and details, two pages).

• 09-Context: store filter in context and we can see how it works (beware react 19).

• 10-set-state-func

• 11-async-closure

• 12-useRef

• 10-react-query: Create a TODO example using react query and explain how it works.

• 13-forms-basics: we can add a simple login form (react 19)

• 14-foms-advanced: should we talk here about libs like formik or final hook form and yups or fonk?