Learn how to handle FormData in React when submitting it with a (Server) Action to the server ...

Freelance Developers have to rate their services by time or by value. Here I, as a freelance React developer, want to argue in favor of charging by time ...

Learn how not to reset a form after a erroneous server action in React. In other words, how to opt-out of the default form reset behavior in React ...

Freelance React Developer for React and Next.js in JavaScript/TypeScript from Berlin (German/English). Consulting & Freelancing for Web Development: Full-Stack Applications, Code Audits & Reviews, Workshops, Training, MVPs ...

Learn how to roll your own authentication in JavaScript & TypeScript ...

Learn how to roll your own authentication in Next.js ...

Learn the fundamentals about data fetching in client-side React with React Hooks ...

React Folder Structure in 2024 for large React projects. The guide walks you through a file structure from small to large project ...

A tutorial about using Drag and Drop in React by example for a vertical list (later horizontal list) with @hello-pangea/dnd as DnD library ...

How create a React Dropdown component by example. The HTML select element displays a menu ...

There are many types of React Components that make it difficult for React beginners. This tutorial goes through each React Component Type by example ...

There are different ways to fetch data in React from a remote API. In this guide we want to explore all the options available for data fetching in React ...

How to use Search Params in Next with useSearchParams und SearchParams from React Server Components and Client Components for URL state ...

React with Server Components and Server Actions is becoming a full-stack framework. This article reflects on the evolution of React and its impact on full-stack development ...

Can I fetch data with Server Actions in Next.js? There are different ways to fetch data. Normally Server Actions are used to mutate data, but ...

Learn how to trigger a server action with a form button without using a Client Component in React ...

Learn how to pass extra arguments to server actions in React forms (or Next.js forms) using hidden form fields or binding the arguments to the server action ...

Learn about rounding errors in JavaScript and how to avoid them in financial applications. Why is 0.1 + 0.2 not equal to 0.3 in JavaScript when working with floating-point numbers?

Learn how to add a loading state to React forms when using actions. Show a loading spinner while the form is submitting ...

Learn how to use Server Actions in Next.js in React Server Components to create a full-stack application ...

Learn how to seed a database with Prisma in a TypeScript application ...

Learn how to use Prisma with SQLite in a Next.js application ...

How to use Forms in Next.js with React Server Components (RSC), Server Actions in Next's App Router by using useFormState and useFormStatus. Learn about form validation, form reset, form feedback (field errors and toast messages) while using progressive enhancement and caching ...

React Trends in 2024 which should be on your watchlist. A walkthrough of the state of React ...

How I set up my new M1 MacBook Pro as a web developer in 2024 for web development ...

A list of React starter kits (Vite, Next, Astro) which help developers to start a React project in 2024 ...

Discover the essential React libraries for 2024! Navigate the vast ecosystem effortlessly with this curated list. Empower your React projects with these powerful tools for seamless development of large-scale applications ...

A minimal web developmment setup for beginners who want to start their career as web developers ...

How to learn React, Vue, Angular or any other framework? For many developers this question pops up every day. The article should give actionable guidance on how to escape the analysis paralysis and how to get from consuming to producing by following a simple learning framework ...

A step by step guide on how to setup React.js on MacOS. You will install Visual Studio Code, Node.js, NPM, Git, Prettier and create-react-app for building React applications with Mac OS ...

A step by step guide on how to setup React.js on Windows for your PC. You will install Visual Studio Code, Node.js, NPM, Git, Prettier and create-react-app for building React applications with Windows ...

Freelance React Developer for React and Next.js in JavaScript/TypeScript from Berlin (German/English). Consulting & Freelancing for Web Development: Full-Stack Applications, Code Audits & Reviews, Workshops, Training, MVPs ...

How to upgrade Vite to TypeScript from JavaScript ...

How to learn React and how to become a React developer. A step by step guide on how to learn React, on how to get started, and how to commit yourself every day ...

Learning React in 2024 as a library or framework is not an easy decision. Whether to learn React with Next.js as a framework ...

How to migrate to Vite from Create React App (CRA) with environment variables, testing, SVG, ESLint, TypeScript ...

How to use tRPC with React for full-stack type safety with TypeScript ...

How to use ESLint in Vite with vite-plugin-eslint for a better code style linting ...

Web Development Trends in 2023 which should be on your watchlist. A walkthrough of the state of JS ...

A React Cross Fade component for Material UI (MUI) ...

Learn how to use React Testing Library in this tutorial. You will learn how to test your React components step by step with unit and integration tests ...

Learn how to use TypeScript for a React component by example for type safe props and a type safe render ...

A TypeScript with Node.js setup which helps you with tsc (TypeScript compiler), ts-node (on the fly compilation), @types/node, and nodemon ...

A React Dropdown component for Material UI (MUI) with a nested menu ...

A React Dropdown component for Material UI (MUI) ...

How create a React Select component by example. The HTML select element displays a menu ...

How to use type guards in TypeScript. You will learn how to check for types (and interfaces) by using user defined type guards ...

Learn how to use React Testing Library with Vitest in Vite. React Testing Library is a popular testing library for writing tests in React applications ...

How to use generics in TypeScript. You will learn how to create a arrow function which uses a generic type to infer the type for the parameter from the passed argument ...

How to use Forms in React by example. You will learn how to create a form template in a React functional component with validation to submit data ...

How to use React's useState Hook with TypeScript by automatically inferring the type or by manually using type assertion ...

How to use React's useRef Hook with TypeScript for using a ref ...

Embrace the grind is about the intersection of entrepeneurship and gaming ...

What are React Elements, Components, and Instances? A step by step explanation for a better ...

A tutorial how to use a monorepo architecture in frontend JavaScript and TypeScript with tools like npm/yarn/pnpm workspaces, Turborepo/NX/Lerna, Git Submodules, ...

Everything you need to know about web applications in modern web development. You will learn about traditional websites, full-stack web applications, client-side and server-side rendering/routing, single-page applications, code splitting, APIs, microservices, static site generation ...

Using the "as" prop in React, also called "component" or "variant" prop, enables React developers to combine semantics with aesthetics in a flexible way ...

Learn about batching in React. Batching means that multiple state updates are batched as one update + render operation for an improved performance ...

How to: React Router 6 Lazy Loading: code-splitting at route level helps you lazy-load just the things that are needed by the user, which dramatically improves the performance ...

A comprehensive tutorial about Higher-Order Components in React. Higher-Order Components, known as HOCs, are often a difficult to understand pattern in React.js. The article gives you a gentle introduction, how to use HOCs in an elegant way, how to abstract reusable logic and how to use recompose ...

How create a React Button component by example. The HTML button element uses onClick ...

How to create a custom hook in React. A step by step tutorial which walks you through an example ...

Learn how to use the local storage in React to store state by using a React Hook called useLocalStorage ...

A custom React hook by example to get the width of the scrollbar ...

How to store state in local storage in React by using a custom useLocalStorage hook ...

How to detect a click outside of a React component by creating a custom hook for it ...

A React hook by example that checks the scroll direction -- in a vertical direction, but potentially also in a horizontal direction ...

Everything you need to know about props in React. How to pass props to components, how to set default props, how to know the difference between props and state, and how to pass components or functions as props, ...

How to use React Table Library with a fixed column. Also called a sticky column, can be enabled in React Table with ...

A Node.js with Express and PostgreSQL tutorial to learn step by step how to create a REST API for CRUD operations which can be consumed by a client application ...

A tutorial on how to setup PostgreSQL for Express.js in a Node.js application. It comes with the database installation and how to connect it to Express with Sequelize as ORM. You can choose to use another ORM, if you want to ...

How to combine Prettier and ESLint for VSCode, Sublime, or any other IDE/editor. You will get to know the ESLint Prettier Rules that are needed to get you started ...

How to install ESLint for VS Code (Visual Studio Code). Install ESLint, configure it per project, and use a local .prettierrc file ...

How to install Prettier for VS Code (Visual Studio Code). Install Prettier, configure it globally to format on save, add further Prettier configuration on a global level, and use a local .prettierrc file ...

How to: Descendant Routes in React Router 6. A step by step example on Descendant Routes with React Router ...

How to use Private Routes in React Router 6 (alias Protected Routes) by using conditions (e.g. authentication, permissions, roles) to authorize users for guarded pages ...

A brief React Router 6 example to get you started ...

How to: Redirect in React Router 6 by using the delcarative Navigate component or the programmatic useNavigate Hook ...

You will learn how to use authentication in React Router 6 by authenticating a user by login (sign in) and logout (sign out) ...

Event bubbling in React explained with examples. You will learn how to prevent events from bubbling, how to capture events before the bubbling, and how to access the target and currentTarget ...

A React hook by example that checks if an element's content has overflow (scroll) ...

How to: Search Params in React Router 6. A example on Search Params (also called Query Params) with React Router ...

How to: Nested Routes in React Router 6. A step by step example on Nested Routes with React Router ...

React Router 6 tutorial: setup, hooks, nested routes, dynamic routes, programmatic navigation, active links, layout routes, index routes and more. A step by step React tutorial for beginners ...

How to use a radio button in React by example and how to create a React Radio Component ...

A reusable higher-order component to redirect with React Router ...

How to generate an image from a React component by extracting it as JPG or PNG ...

How to print a PDF from a React component and download it as PDF by generating ...

How to use conditional classnames in React with JSX and the HTML class attribute (clsx) ...

How to create a React Tree, a React Tree View, or a React Tree List by using React Table Library ...

How to use React Table Library with Select by using its useRowSelect plugin for selecting single or multiple rows in a table by checkbox or row click ...

How to use React Table Library with a double click on a row ...

Is it possible to use conditional React Hooks in React components? Technically no. However, in this example I want to show you how to use a Hook ...

How do I start freelancing as a React developer? This checklist helps freelancers and companies hiring freelancers to negotiate the details of the project ...

How to use React Table Library with search. If you want to search your table data ...

How to use React Table Library with Pagination by using its usePagination plugin for pages in a table ...

A tutorial about React's useContext hook by example for React's Context. The useReducer helps you to access React's Context in any function component below your Context Provider ...

How to use React Table Library with Theme to style your table ...

How to use React Table Library with a fixed header. Also called a sticky header, can be enabled in React Table with ...

How to use React Table Library with Sort by using its useSort plugin for sorting columns in a table by column header click. A table sort ...

React Table with server-side data with examples for pagination (paging), search (searching), sort (sorting), filter (filtering), ...

How to use React Table Library with column resizing. On a column, use the resize property with optional min width configuration ...

Context Injection in React is a useful pattern for reusing shared UI components on different pages but with page specific information ...

A step by step tutorial on how to create a React table component with React Table Library ...

How to create an indeterminate checkbox in React with hooks, also known under the name tri state checkbox. By example you will learn how to use the indeterminate state ...

How to use a checkbox in React by example, how to create a React Checkbox component, and how to change its value with the onChange event handler ...

How to use React Table Library with filter. If you want to filter your table data ...

On how to create an asynchronous tree table in React with lots of data and its API decisions I had to make along the way ...

A comprehensive list of Styled Components Best Practices for React developers ...

Are React class components going away in favor of React Hooks? Modern React with Hooks kinda deprecated React class components ...

Learn how to use React's useReducer Hook with a middleware (and afterware) by using a custom hook for the reducer ...

A tutorial about React's useEffect hook by example for side-effects and lifecycle management in React function components ...

Large components in React drive developers mad. By using so-called mediator components in React, you can simplify complex React component

How to use React's useEffect Hook only on update. Learn about a custom hook to run useEffect only on update and not on mount (first render) ...

How to use React's useEffect Hook only Once. Learn about a custom hook to run useEffect only once if it meets a condition and afterward never again ...

A React with Webpack 5 and Babel tutorial for beginners where you will learn step by step how to set up a React project with Webpack from scratch ...

A walkthrough on how to use SVG Icons in React applications. SVGR + Webpack are the perfect fit to make it happen...

A step by step tutorial on how to set up an advanced Webpack 5 application. It comes with Babel 7, development and production build, automations, and source maps ...

The tutorial walks you through a Webpack with Images setup to load an image as local asset to your JavaScript applications ...

The tutorial walks you through a Webpack with Fonts setup to load a font as local asset to your JavaScript applications ...

The tutorial walks you through a Webpack with ESLint setup to improve the code style of your JavaScript applications ...

A step by step tutorial on how to integrate Babel into Webpack to access powerful JavaScript features (ES6, ES7, ES8, ES9) from the future ...

Learn how to use CSS in a Webpack powered JavaScript application ...

Learn how to use SASS in a Webpack powered JavaScript application ...

Learn how to use PostCSS in a Webpack powered JavaScript application ...

Learn how to use React Router in a Webpack powered JavaScript application ...

A Webpack 5 tutorial that walks you through your first JavaScript application setup with Webpack. Bonus: You will add Babel to enable advanced JavaScript features ...

A JavaScript tutorial that walks you through your first JavaScript project's setup. Afterward, you can decide whether you want to continue with it as backend or frontend application ...

There are advantages of using React Hooks over Higher-Order Components (HOC) which I want to show you by example ...

Learn how to mock data for your React application with a fake API which mocks REST APIs (or other kinds of asynchronous calls) if there is no backend yet and you need to fake it till you make it ...

Learn how to mock data with a fake API in JavaScript for mocking REST APIs (or other kinds of asynchronous calls) if there is no backend yet and you need to fake it till you make it ...

A tutorial about navigation in React Native. Teaches you about how to navigate from page to page, how to use drawer, switch, and tab navigations, and how to apply it for authentication ...

A comprehensive tutorial about React Hooks, why React uses Hooks, what Hooks are available, and how to use Hooks in React for state management and side-effects in React function components ...

If you have used setState before, you may be missing a callback function for the useState hook. This tutorial explains how to implement it with useEffect ...

A tutorial about how to get started with React Native using Expo ...

A tutorial about React's useMemo hook by example for performance optimizations in React function components ...

A tutorial about React's useCallback hook by example for performance optimizations in React function components ...

A comprehensive Oak with Deno tutorial for REST APIs. Learn how to set up a REST API with Oak's Router in Deno to manage RESTful resources with CRUD operations ...

A comprehensive Oak with Deno tutorial for beginners. Learn what makes Oak unique with its context, middleware, and routes with Oak's Router ...

Learn about error handling in Express applications with Express middleware to handle errors ...

Learn how to use React memo for performance optimizations of your React components ...

Learn how to use environment variables in Deno with .env and dotenv for sensitive data (e.g. API keys, credentials) which shouldn't be visible in version control (e.g. Git) ...

A comprehensive Deno tutorial for beginners. Learn what makes Deno unique in comparison to Node.js ...

Learn how to countBy in JavaScript without Lodash but just using vanilla JavaScript to count objects by property ...

Learn how to groupBy in JavaScript without Lodash but just using vanilla JavaScript to group objects by property ...

Learn how to replace all occurrences of a string in JavaScript with replaceAll and replace with a regular expression and a global flag ...

Learn about callback functions in JavaScript, how to use callback functions and how to create a callback functions yourself ...

Learn how to use async await without a try catch block in JavaScript ...

Learn about custom errors in JavaScript, how to create a new custom error and how to extend errors from third party libraries and APIs ...

There are no computed properties in React. However, deriving values from state is a common implementation in React too ...

Learn how to initialize state from props and how to update state from props for rare edge cases where your state of a component depends on its incoming props ...

Learn how to manipulate arrays in React state by using JavaScript array methods such as concat, map and filter. Whereas vanilla JavaScript is used for the arrays, React is only used to set the new state in the end ...

Learn how to work with GraphQL in Gatsby more efficient with these tips about creating dynamic pages, GraphQL fragments, and static vs page queries ...

Learn how to update an item in a list in React with React's state. It's a common task to change an item in an array in ...

Learn how to add an item to a list in React with React's state. It's a common task to add an item to an array in ...

Learn how to remove an item from a list in React with React's state. It's a common task to delete an item from an array in ...

Learn styling in React with CSS, CSS Modules (CSS-in-CSS), Styled Components (CSS-in-JS), Tailwind CSS (Utility first CSS), and inline styles ...

A Node.js with Express and MongoDB tutorial to learn step by step how to create a REST API for CRUD operations which can be consumed by a client application ...

A tutorial on how to setup MongoDB for Express.js in a Node.js application. It comes with the database installation and how to connect it to Express with Mongoose as ORM. You can choose to use another ORM, if you want to ...

A installation guide for a MongoDB on MacOS setup for having a NoSQL database available on your OS. It comes with everything that's needed to connect a Node.js application to your database in JavaScript ...

Learn everything about React refs and JSX's ref attribute with React's useRef Hook and the infamous callback refs for DOM operations and instance variables ...

A installation guide for a PostgreSQL on MacOS setup for having a SQL database available on your OS. It comes with everything that's needed to connect a Node.js application to your database in JavaScript ...

A Node.js with Express tutorial to learn how to create a REST API for CRUD operations which can be consumed by a client application ...

A Node.js with Express tutorial to learn how to setup a Node.js application step by step from scratch ...

A common sense minimal Node.js setup guide which uses Babel and Nodemon: Whereas Babel with the Babel Cli is used for enabling recent JavaScript language features, Nodemon is used for keeping your node process up and running ...

As a solo developer working on my side-projects, I used Microservices for my last project. It didn't turn out well and here is why ...

This tutorial shows an example how to create a micro frontend architecture for React with Webpack ...

Learn how to test GraphQL resolvers with Jest. More advanced resolvers will have authorization and permission checks which may return errors, so make sure to test these too ...

Learn how to set up a GraphQL middleware with resolvers handling authorization and permissions ...

The Road to React book is your way to learn React.js by building a real world application. It's a huge tutorial where you will learn all the fundamentals in plain React before you dive into more advanced topics in React with Redux. Along the way, you will learn everything about JavaScript ES6 ...

How to get started with testing in Node.js with Jest. This setup tutorial shows you how to use Jest as test runner and assertion library for Node.js projects ...

Everything I have learned about Docker Compose for creating Docker images and multiple Docker containers as services with various purposes for one application ...

All the Docker commands I am using for developing applications with Docker: list all Docker images, list all Docker containers, stop Docker container or remove all Docker containers ...

A short walkthrough on how to use Docker with React in a development environment. We will cover how to dockerize your first React app ...

A short walkthrough on how to use Docker with create-react-app in a development environment. We will cover how to dockerize your first React app ...

A short walkthrough on how to use Docker with Node.js in a development environment. We will cover how to dockerize your first Node.js application ...

A short walkthrough on how to install a Docker setup on Mac / MacOS. When I had to install Docker myself, I wrote everything down that's needed for the setup ...

How to set up Postgres inside of Docker with docker-compose by example ...

A React tutorial about internationalization in React with i18n for translating texts to many languages for your React application ...

Learn how to test Firebase functions from database and authentication with Jest. Jest allows you to mock Firebase and its functions for integration and unit testing ...

How to use Jest with Babel Module Resolver for aliases that are defined in your .babelrc file ...

How to use TypeScript with Babel Module Resolver for aliases that are defined in your .babelrc file ...

Everything you need to know about conditional rendering in React. Learn about ternary operators, switch case, and if else statements in JSX to conditionally render elements in React ...

Learn about event handler in React and how to use them for onClick (button), onChange (input) events ...

What's the difference between var, let and const in JavaScript? A walkthrough by example on the drawbacks of var and how let and const are used in modern JavaScript ...

JavaScript import and export are used to share code across folders and files. This walkthrough shows common use cases and how to apply import and export statements ...

A crash course for using npm on the command line. You will learn how to initialize a npm project, how to install and uninstall node packages, and which files are associated with npm in your project ...

Everything you need to know about JavaScript variables if you are just starting out with JavaScript ...

In this React component tutorial, we will build a React Range Component that can be used horizontally as example, but can be extended to be used vertically too ...

In this React component tutorial, we will build a React Slider Component with a Range that can be used horizontally as example, but can be extended to be used vertically too ...

A walkthrough on how to use code splitting for your library to reduce your bundle size by giving multiple entry points to your JavaScript library ...

How to mock Axios in Jest by example for mocking get and post requests, for mocking network errors like a 404, and for testing Axios in React and Enzyme ...

How to set up CSS Modules in React with Webpack or Create React App. Everything you need to know to get started with CSS Modules in React ...

React Context is a powerful feature for passing props down the component tree without the need to tell components in between about them. React Context creates a Provider and Consumer component for tunnelling React components ...

Everything you need to know about React State. From simple state to complex state, local state to global state, State in React Components to State with Hooks, over to external state management solutions like Redux ...

Introduction to JavaScript Naming Conventions for differen data types and data structures in JS. Learn more about how to name private methods, global vairbales, or a constant variable ...

The question mark after a JavaScript variable declaration is used as shorthand conditional operator to assign a variable conditionally. It's called ternary operator ...

Redux greatly shaped how we develop modern JavaScript applications nowadays. Here I want to give a walkthrough on all the mindset changes we went through as JavaScript developers ...

By Example: How to deploy a GitHub Webhook to DigitalOcean for an automatic deployment of websites/web application ...

By Example: You will learn how to use Babel Module Resolver for your JavaScript application to convert absolute/relative paths to aliases. We will also cover ESLint ...

By Example: How to unit test React-Redux connected components? By getting full control over your Redux store, testing whether every dispatched action from a React component reaches the Redux isn't too difficult ...

Learn how to establish a Git Team Workflow with branching techniques, pull/push strategies, and common sense git commands to make your team more productive ...

Learn how to snapshot test the difference in changing snapshot tests with Jest after user interactions or other side-effects ...

Learn how to shallow render components for Jest snapshot tests. This way, you will avoid too large snapshot test outputs and too much setup for child components ...

Learn how to test React components by setting up unit, integration and end-to-end tests for React with Jest, Enzyme and other testing libraries ...

By Example: How to set up Redux Persist in Next.js to persist your Redux store's state in the React client application's local storage ...

Learn how to test your React application with Mocha, Chai & Enzyme. Mocha will be used as a test runner, Chai as testing library, and Enzyme for your actual React component tests ...

Learn how to set up test coverage with Coveralls for your JavaScript project. In this tutorial, we will use Travis CI to set up testing coverage with Coveralls.io ...

Learn how to set up Continuous Integration for your JavaScript project. In this tutorial, we will use Travis CI as example for covering the build and tests on your JavaScript application ...

Learn how to run end to end tests for React with Cypress. E2E tests will give you more confidence in your overall React application ...

Learn how to test your React application with Jest & Enzyme. Jest will be used as a test runner & testing library while Enzyme will be used for your actual React component tests ...

Learn how to test your React application with Jest. Jest will be used as a test runner & testing library for unit, integration, and Snapshot Tests in a React with Webpack application ...

A brief JavaScript Closure Example to get you to know closures in JavaScript, why we need them, how to implement them, how to use them, and what JavaScript patterns they can be used for ...

All the fundamentals in JavaScript for learning React. Often React beginners realize that most of the learnings are JavaScript, because React has only a small API ...

I find it's the best time to become a JavaScript Developer ...

Are you considering to use Gatsby.js as static side generator for your website or web application? Learn about all the benefits of using Gatsby.js with React ...

You want to setup ESLint in your React application? Your project is set up with Babel and Webpack? This tutorial will guide you through the ESLint in React setup ...

A tutorial on how to use Web Components in React. It comes with a library as a wrapper to use a custom element within your React component for passing props as attributes and event listeners ...

In this Web Components tutorial, you will learn how to implement your first web component (custom elements) with HTML, CSS, and JavaScript. It is aimed at beginners who haven't used web components before ...

A tutorial about React's useState hook by example for state management in React function components ...

A brief explanation why we need to call event.preventDefault() on button, form, or submit events ...

A tutorial about reusable components in React by example. By extracting a component from another one in React, you may create a reusable component ...

A walkthrough by example on how to lift state up and down in React. You will see two examples that illustrate the problem and solution ...

React's useContext and useReducer hooks can be used to mimic Redux for managing one global state container in React applications. This tutorial shows it step by step ...

Do React Hooks with useReducer and useContext replace Redux? Since React Hooks were released in React, developers are wondering whether they still need Redux for their React application ...

A tutorial on how to publish a npm package to the npm registry with Node, Babel and Webpack for getting started as an open source contributor ...

A brief tutorial which shows how to scroll to an item in a React List Component. The scroll event can be triggered from within or outside the component ...

How to get started with testing in Node.js with Mocha, Chai, Sinon. This setup tutorial shows you how to use Mocha as test runner and Chai as assertion library for Node.js projects ...

A tutorial about React's useReducer hook by example for state management in React function components. It uses a reducer function to map action types to state transitions ...

A tutorial about the reducer pattern in JavaScript for beginners ..to manage state transition with functions ...

Comparing useState and useReducer in React, when to use them for different use cases, and their benefits in a growing React application ...

How to display a list in React with JSX is one of the bigger challenges for React beginners. This tutorial walks you through different list view examples ...

A brief explanation for uncontrolled vs controlled components in React. The example shows an input field which we will transition from a uncontrolled to controlled input field ...

React list components need a mandatory key attribute if the list items can be changed by order or size. Here you will see a use case why a key attribute is needed ...

An elaborate walkthrough for React state management example with useState, useReducer, and useContext which mimics Redux's state management philosophy ...

A beginner friendly tutorial for CSS-in-JS with Styled Components in React. While learning about it, you will build an Instagram Clone ...

React Hooks change how we will write React applications in the future. This tutorial shows how to convert from React class components to React Function components with React Hooks ...

Everything you need to know about React Function Components -- also known as React Functional Components. Here you will learn React Function Components by example with step by step ...

An extensive walkthrough for JavaScript developers who want to get to know the Array's Map Method to transform data. You will learn about the Callback Function's Arguments, usages of Map with other Array Methods, and ...

The tutorial shows you how to migrate a React with Firebase application, which uses only React's local state, to MobX for its state management. Also React's Context API is replaced with MobX ...

The tutorial shows you how to migrate a React with Firebase application, which uses only React's local state, to Redux for its state management. Also React's Context API is replaced with Redux ...

React Component Composition step by step explained with examples. Learn the React Composition Pattern by example which helps you to render components within each other ...

The free React with Firebase book takes you on a journey to master a minimal tech stack with React and Firebase in JavaScript. You will learn how both technologies help you to realize your business idea. Grab your free PDF, EPUB, or MOBI and get free updates for new releases ...

A beginners tutorial to learn Firestore in React for business application with authentication, authorization and a real-time database. The tutorial gives you the perfect React Firestore boilerplate project ...

A installation guide for a MongoDB on Windows setup for having a NoSQL database available on your OS. It comes with everything that's needed to connect a Node.js application to your database in JavaScript ...

The tutorial shows you how to deploy a React.js application to Firebase Hosting. You will use Firebase CLI to perform the deployment for a create-react-app app ...

A React with Firebase tutorial on how to work with Firebase's realtime database in React. Learn about the get, create, update and remove operations, how to enable pagination and how to order your list of data, and how fo associate items with each other ...

A installation guide for a PostgreSQL on Windows setup for having a SQL database available on your OS. It comes with everything that's needed to connect a Node.js application to your database in JavaScript ...

A tutorial to guide you through styling your React application with Semantic UI. The UI library enables you to build websites with fast and concise HTML, along with a complete mobile responsive experience ...

A React tutorial on how to combine React Router and Firebase to navigate a user through the application while fetching data from the Firebase database or even passing data through React Router ...

A Firebase React tutorial on how to enable email verification. Only users that confirmed their email address with a email confirmation have access to your application. Every other user who is using a fake email is not authorized ...

A complete React Redux tutorial for beginners: Learn how to build React Redux applications from scratch by following this step by step implementation of an example application ...

A tutorial on how to activate Facebook login for Firebase or Firestore where no email is required. After enabling the sign in method in Firebase, you have to create a Facebook App ...

A short visual Firebase tutorial should help you to create your first Firebase application that can be used with any web framework/library such as React, Angular or Vue ...

A tutorial on how to activate Twitter login for Firebase or Firestore where no email is required. After enabling the sign in method in Firebase, you have to create a Twitter App ...

A Firebase React tutorial on how to link social logins with each other under one account. The example covers linking Google, Facebook, Twitter and email/password sign-in methods ...

A tutorial on how to use social a login with Firebase in React. The example covers Google, Facebook and Twitter logins for user authentication ...

Learn how to build a Reason React application with this tutorial. You will use the GitHub API to fetch real data, render forms and data, and style your ReasonReact application with inline style and bs-css ...

A tutorial on how to use local storage for auth state persistence for a Firebase in React application. When reloading the browser, the user should stay authenticated without a flicker ...

A tutorial on how to use authorization with roles and permissions when using Firebase in React. Learn how to protect routes with authorization rules and how to set properties to Firebase user ...

A beginners tutorial to learn Firebase in React for business application with authentication, authorization and a real-time database. The tutorial gives you the perfect React Firebase boilerplate project ...

The free GraphQL book takes you on a journey to master GraphQL in JavaScript the pragmatic way with React, Node, and Apollo. Grab your free PDF, EPUB, or MOBI and get free updates for new releases. On the road to GraphQL you will learn how to build GraphQL server and client-side applications ...

This GraphQL tutorial for beginners takes you on a journey to learn GraphQL. You will explore GraphQL with GitHub's GraphQL API and later learn how to build fullstack web applications with it ...

This tutorial shows you how to use Apollo Client for GraphQL without any other third-party library. Then you'll learn how to use Apollo Client in React ...

The article gives advice on how to implement visual regression testing in React and UI components with React Storybook. You will get to know React Storybook and all its testing capabilities ...

A tutorial on how to use RxJS in React for state management. It shows how to implement a Rx.js higher-order component (hoc) that takes over the observable streams ...

How to avoid the React warning: Can only update a mounted or mounting component. It usually means you have called setState on an unmounted component ...

The tutorial builds up on a mocked GraphQL API enabling you to write tests for your Apollo Client queries and mutations in React. It answers the question: How to test Apollo Client in React ...

The article is a short how to use CSS Modules in your create-react-app application. It shows you how to setup CSS Modules, but also how to use it in your components ...

A short guide on how to add Sass support to your create-react-app application which shows you how to setup Sass, but also how to use it in your React components ...

A tutorial to showcase how to use React global state without Redux. There are React patterns that can be used to have an application wide state in React without a state management library ...

A tutorial on how to have state in React without a constructor in a class component and how to have state in React without a class at all ...

A React performance optimization tutorial which shows you React's shouldComponentUpdate lifecycle method and React's PureComponent API to prevent the rerendering of (child) components ...

A tutorial to learn about the Intersection Observer API in React. You will use React's ref API with createRef() to observe elements in your React application in context of the viewport ...

Learn how to build a GraphQL server with Apollo Server and Express with authentication, authorization, pagination, subscription, database access, tests ...

The concept of children as a function or child as a function, also called render prop in general, is one of the advanced patterns in React. This tutorial goes through a real world example ...

Learn the fundamentals about data fetching in client-side React with React Class Components ...

Overview about the advantages and disadvantages of using Apollo and its ecosystem for JavaScript applications. It mentions also Apollo alternatives such as Urql and Relay for React applications ...

An overview about the advantages and disadvantages of using GraphQL instead of REST for JavaScript applications. It answers the question: 'What is GraphQL' and 'Why you should use GraphQL' for your next JavaScript application ...

When having a GraphQL server, Apollo Client can be a valid option for your remote data. How fits Redux into the equation? This tutorial shows you an example on how Redux and Apollo Client can be used together in a React application. Whereas Redux is used for local data, Apollo Client is used for remote data ...

In this article, I want to give you the essentials about Git and GitHub. Afterward, I want to show you my essential commands for Git that enabled me to do web development in the recent years. It's no magic...

A tutorial on how to build a GraphQL client library for React applications. It has three parts: the GraphQL client, connecting the GraphQL client to React, and offering Query and Mutation components for GraphQL operations ...

Everything you need to get started with GitHub's GraphQL API for learning GraphQL in JavaScript. This walkthrough demonstrates you how to set up your data on GitHub, how to create a personal access token, and how to consume their API without any source code with GraphiQL or GitHub's GraphQL Explorer ...

The tutorial guides you through building a minimal Apollo Client in React example application where Apollo Client is used for remote data and React's local state for local data. After all, it's a minimal boilerplate project to get you started with GraphQL in React ...

The tutorial shows you how to mock your GraphQL server for your GraphQL client for testing or other purposes. Either you can reconstruct a GraphQL client-side schema or introspect the GraphQL server schema. Both ways use client-side resolvers to mock the data...

A tutorial about how to use Apollo Link State as local state management solution in a React application when having a GraphQL powered server in the first place. The example shows you how to use Apollo Link State instead of React's Local State, but also instead of Redux or MobX to manage global state ...

This React with Apollo and GraphQL tutorial shows you how to use GraphQL in your React application by consuming GitHub's GraphQL API. You will use Apollo for your query and mutation implementations on the client-side of your React application. This Apollo in React tutorial attempts to teach you using Apollo in React from zero to one ...

This React with GraphQL tutorial shows you how to use GraphQL in your React application by consuming GitHub's GraphQL API. You will not use any clever framework such as Apollo or Relay for your query or mutation. Instead this tutorial focuses on plain GraphQL with only HTTP requests in JS ...

Newcomers to web development often start out with React, Vue or Angular far too early after they have learned vanilla JavaScript. There is not always the chance to experience the struggle why libraries like React were implemented in the first place ...

This guide helps you to setup React with Parcel from 0 to 1. Learn how to use Parcel in React.js with zero-configuration. Setup your own boilerplate application ...

Ever wondered how to integrate Paypal in your React application? This tutorial guides you through the setup process from using a Paypal checkout form in your React application. Afterward you are ready to receive Paypal payments in your React.js application ...

An extensive walkthrough for machine learning in JavaScript. The machine learning libraries in JavaScript are striving. As I started to learn about AI, deep learning (DL) and machine learning (ML) ...

An extensive guide of tips, tricks and resources to learn React.js and Redux in 2018. The tutorial covers various topics in React, JavaScript ES6 and Redux to give you a great start in those topics. In addition, you will find courses for React and Redux to learn more about those topics in depth ...

An extensive tutorial on how to implement a neural network in JavaScript with deeplearn.js to perform machine learning in JavaScript. You can bring neural networks to your browser by using the performance benefits of WebGL. Deeplearn.js makes it possible to implement a WebGL powered neural network ...

Logistic regression with gradient descent in JavaScript with implementation of the cost function and logistic regression model (hypothesis) ...

Explaining and implementing normal equation in JavaScript and discussing it as alternative for gradient descent ...

How to use multivariate linear regression with gradient descent (vectorized) in JavaScript and feature scaling to solve a regression problem ...

An article guiding through the vectorized implementation of gradient descent in JavaScript by using matrix operations in a univariate regression problem ...

Strategies to optimize / improve gradient descent: learning rate, feature scaling, vectorization, parameter initialization ...

The article guides you through the setup of an automated Slack invitation for a JavaScript and/or React applications. Why would you want a Slack invitation in the first place? My personal motivation was it to create a like minded community of people learning React, but the idea about a Slack Channel started out on Twitter ...

An extensive walkthrough on how to host your application on Digital Ocean. It showcases how multiple static websites can be hosted in one Droplet by using server blocks and how to deploy multiple APIs or node.js applications side by side in one Droplet with Dokku ...

How to fit your data with model selection and polynomial regression and how to avoid over-fitting to keep your model parsimonious ...

From having the idea to launching your own product: The article is a case study on how I built my own course platform in React, Stripe, Firebase to give other people a platform to learn React. It came with lots of challenges but also learnings beyond the implementation ...

How to use matrix operations from linear algebra in JavaScript. What are inverse, transpose and identity matrices and how can they help in machine learning ...

Implementing a (univariate) linear regression with gradient descent, cost function and hypothesis in JavaScript ...

Everything you need to know about using MobX in a create-react-app with React. The article shows you all the different edge cases on how to activate JavaScript decorators, how to use MobX without decorators, and as bonus how to use MobX in Next.js. Afterward, you are prepared to setup your application with MobX and React.js ...

All React 16 changes in one article. It tells you about the new return types with fragments and strings, portals in React, componentDidCatch and error boundaries for a robust error handling in React, setState with returning null and custom DOM attributes in React.js ...

A full blown React with Redux and MobX course to learn state management in React. It comes with an extensive 250 pages book which teaches Redux from zero to one. Additionally it comes with a lot of Redux and MobX source code and several screencasts to supplement the course experience ...

Wondering how you can use SVG in React? This article gives you a walkthrough of different SVG in React options. It showcases it with an implementation of using SVG as backgrounds in React with stylish patterns from svg-patterns or Hero Patterns. Even though you are not a designer, you can make your applications look pretty with these SVGs ...

Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux but only if you need it. There are various techniques in React.js for scaling your local state management. Only if these are not sufficient, use a library like Redux ...

Legal Notice, Terms and Privacy Policy

A couple of basic setup steps to use Redux combined with Redux Saga in Next.js. Whereas Next.js enables you to build server-side rendered React applications, Redux and Redux Saga make sure to handle your state not only on the client-side, but also on the server-side. The sagas are used for asynchronous actions and side-effects ...

Ever wondered how to integrate Stripe in your React application? This tutorial guides you through the whole setup process from using a Stripe checkout form on the client-side to setting up an Express payment server. Afterward you are ready to receive secure credit card payments via Stripe in your React.js application ...

The series of React tutorials focuses on building a complex yet elegant and powerful React component. It attempts to go beyond the fundamentals in React.js. This part introduces an advanced list in React that will enable you to opt-in infinite scrolling and pagination ...

The series of React tutorials focuses on building a complex yet elegant and powerful React component. It attempts to go beyond the fundamentals in React.js. This part introduces infinite scroll in React in an elegant way by using higher order components. You will implement an infinite scrolling higher order component ...

The series of React tutorials focuses on building a complex yet elegant and powerful React component. It attempts to go beyond the fundamentals in React.js. This part introduces a paginated list in React where you can fetch sublists from a third party API in React. You will implement it in an elegant higher order component ...

A storytelling approach to learn about the term API. There is a knowledge gap when it comes to APIs. People assume that the knowledge about APIs is common ground, but it isn't. This article takes you on a journey to explore APIs and their empowering effects...

Adam Grant dives deep into the spectrum of altruistic to selfish personalities. Anyone might be able to identify his or her own personal traits. Adam Grant shows that you can apply the principles of giving and taking even in companies or communities...

Self-reflection as a privileged developer who travels South East Asia. An attempt to give something back, by learning React, to contribute solving the diversity problem in software development...

Using Redux or MobX in your React application? The article shows you all the differences between both state management libraries that can be used in React. It gives you guidance to learn MobX vs Redux in React.js applications, their strengths and weaknesses and when to use them ...

What about the ref attribute in React.js? This article gives you clarification around the ref attribute to access DOM nodes in React. It shows you how you can use it, when you should use it and where it can be used and where it shouldn't be used ...

The following article summarizes my lessons learned from the books Deep Work and Flow. It can be the way to achieve a fulfilled life. Cal Newport and Mihaly Csikszentmihalyi have written outstanding books in their ...

The article should help people to understand the benefits of React and Angular for making an educated decision to choose between Angular or React. It tells my story why I moved from Angular to React after using both libraries for years. It's not just another click-bait article, but an article with lots of experiences ...

The article is a summary of my lessons learned from On Writing Well by William Zinsser. By providing a summary I hope to help other developers to improve their writing. Apart from that it helps me to memorize my lessons learned.

Technical cheatsheet to create and host your own website in five days. You will learn how to use Hugo and DigitalOcean to publish your website online. Hugo is a static website generator to...

Redux state keys enable a dynamically allocated yet predictable substate. In a rapid development environment it happens quite often: There is no time to plan state structure...

The Redux Observable RxJS: Going Epic tutorial will show you how to reactive programming in Redux. The middleware can be used in Redux applications. The example shows it in a React JS app...

Refactor your React application from Redux to MobX. Use MobX instead of Redux for state management in React JS. Get to know actions, reactions and derivations in MobX and best practices...

The Redux Normalizr: Improve your State Management tutorial will teach you how to use normalizr. Avoid deep nested data structures ...

Redux Ducks: Restructure your Redux App with Ducks will teach you how to bundle action creators, action types and reducers side by side in your Redux app.

The Flow: Type Checking with Flow in React + Redux tutorial will teach you how to use Flow in a React JS + Redux environment. JavaScript as dynamically typed..

Build a React + Redux SoundCloud Client. It is a huge tutorial where you build an example real world application. Learn React JS and Redux along the way. Consume the SoundCloud API, login and interact...

Components become more important these days. In the future you will get to hear more and more about Web Components, which get available in Angular 2.0...

This article shows how you can achieve Small Multiples with D3 using Angular.js. According to Edward Tufte (1983) Small Multiples are a concept to...

Last year Apple released their new collection of iPhones. One innovation of Apple which caught my eyes is the new health app. The dashboard with its...