All the React tutorials ⤵️
-
How to fix the `dangerouslySetInnerHTML` did not match error in React
Find out how I solved the error "`dangerouslySetInnerHTML` did not match", in a React application
-
How to render HTML in React
Find out how to render an HTML string in the DOM without escaping, using React
-
How to debug a React application
Some tools you can use to debug your React app when you run into problems
-
How to learn React
Find out the optimal path to go from zero to being a React master
-
How to use the React Developer Tools
Learn this very useful tool we absolutely need to install when building a React application.
-
The Reach Router Tutorial
A quickstart to using Reach Router in your React app
-
How to connect your React app to a backend on the same origin
How to serve a React and a server-side backend app from the same origin, without having to use CORS on the server and worrying about ports
-
How to use the useReducer React hook
Find out what the useReducer React hook is useful for, and how to work with it!
-
How to use the useContext React hook
Find out what the useContext React hook is useful for, and how to work with it!
-
How to use the useRef React hook
Find out what the useRef React hook is useful for, and how to work with it!
-
How to use the useMemo React hook
Find out what the useMemo React hook is useful for, and how to work with it!
-
How to use the useEffect React hook
Find out what the useEffect React hook is useful for, and how to work with it!
-
How to use the useCallback React hook
Find out what the useCallback React hook is useful for, and how to work with it!
-
How to use the useState React hook
Find out what the useState React hook is useful for, and how to work with it!
-
How to get the value of an input element in React
Given a form, how do you get the value of one of the form fields?
-
React, how to transfer props to child components
How to pass all props a components gets from its parent, to its own children, in React
-
Conditional rendering in React
How to dynamically output something vs something else in React
-
How to return multiple elements in JSX
How to workaround that the limitation that JSX has when having to return multiple elements from a component
-
How to handle errors in React
Best practices to handle errors in React using error boundaries
-
How to pass a parameter to event handlers in React
Find out how to pass a parameter to onClick events for example, without invoking the method on mount
-
Testing React components
Test your first React component using Jest and `react-testing-library`
-
React Render Props
Learn how Render Props can help you build a React application
-
React Portals
Find out how to use React Portals
-
React StrictMode
What is React StrictMode and how to use it
-
Handling Forms in React
How to handle forms in a React application
-
Using SASS in React
How to use SASS to style a React application
-
CSS in React
How to use CSS to style a React application
-
How to install React
How to install React on your development computer
-
Server Side Rendering with React
What is Server Side Rendering? How to do it with React?
-
Code Splitting in React
What is Code Splitting and how to introduce it in a React app
-
React: Presentational vs Container Components
The difference between Presentational and Container Components in React
-
React Concept: Composition
What is composition and why is it a key concept in your React apps
-
Introduction to create-react-app
create-react-app is the easiest way to start up a React application
-
Introduction to React Hooks
Learn how Hooks can help you build a React application
-
React Concept: Purity
What is purity, a pure function and a pure component
-
React Concept: Immutability
What is immutability? And how does it fit in the React world?
-
React Lifecycle Events
Find out the React Lifecycle events and how you can use them
-
React Higher Order Components
Find out what Higher Order Components are and how they are useful when programming a React application
-
Unidirectional Data Flow in React
Working with React you might encounter the term Unidirectional Data Flow. What does it mean?
-
How to reference a DOM element in React
Find out how to ref a DOM element in React
-
Introduction to Gatsby
Gatsby is a platform for building apps and websites using React
-
How much JavaScript you need to know to use React?
Find out if you have to learn something before diving into learning React
-
Should you use jQuery or React?
The tl;dr is, it depends!
-
Props vs State in React
What's the difference between state and props in React?
-
How to loop inside React JSX
How to loop in a React component JSX
-
React: How to show a different component on click
Toggle the visibility of components by telling React to display another component when you click something
-
React concepts: declarative
What does it mean when you read that React is declarative
-
React PropTypes
How to use PropTypes to set the required type of a prop
-
The React Context API
The Context API is a neat way to pass state across the app without having to use props
-
The React Fragment
How to use React.Fragment to create invisible HTML tags
-
React Props
How to use props to pass data around your React components
-
The React State
How to interact with the state of your components
-
React Events
Learn how to interact with events in a React application
-
The Virtual DOM
The Virtual DOM is a technique that React uses to optimize interacting with the browser
-
React Components
A brief introduction to React Components
-
Introduction to React
An introduction to the React view library
-
Introduction to React Router
React Router 4 is the perfect tool to link together the URL and your React app. React Router is the de-facto React routing library, and it's one of the most popular projects built on top of React.
-
Getting started with Next.js
Next.js is a very popular Node.js framework which enables an easy server-side React rendering, and provides many other amazing features
-
Introduction to Redux Saga
Redux Saga is a library used to handle side effects in Redux. When you fire an action something changes in the state of the app and you might need to do something that derives from this state change
-
Styled Components
Styled Components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page
-
Getting started with JSX
JSX is a technology that was introduced by React. Let's dive into it
-
Learn how to use Redux
Redux is a state manager that's usually used along with React, but it's not tied to that library. Learn Redux by reading this simple and easy to follow guide
-
The roadmap to learn React
React is a JavaScript library that aims to simplify development of visual interfaces. Learn why it's so popular and what problems does it solve.
-
Tutorial: create a Spreadsheet using React
How to build a simple Google Sheets or Excel clone using React
-
Create an app with Electron and React
How to create an Electron Node.js desktop application using `create-react-app`
-
How to pass props to a child component via React Router
This short tutorial explains how to pass props to a child component via React Router
-
A React simple app example: fetch GitHub users information via API
Very simple example of a form that accepts a GitHub username and once it receives a `submit` event, it asks the GitHub API for the user information, and prints them.
-
Build a simple counter
A very simple example of building a counter in React
-
VS Code setup for React development
Simple steps to get a nice VS Code setup with linting hints and format on save