React 19 & Next.js 15 & MySql- Full-Stack Social Media App Tutorial

throughout this tutorial, we'll learn how to build a full-stack social media application similar to Facebook with the latest cutting-edge technologies including the latest version of Next.js which Next.js 15 alongside React 19 for frontend and Prisma for database access.

23 Jun 2024

Build a Portfolio Website Using Next.js 14 and Tailwind

A portfolio is an essential tool for every developer.

23 Jun 2024

Next.js 14 eCommerce App with Shadcn, Tailwind, Zod, Stripe & MongoDB: Build and Deploy a Fullstack App

Welcome to our tutorial on building and deploying a Fullstack ecommerce Next.js 14 application! This comprehensive tutorial is crafted for developers eager to enhance their skills and leverage cutting-edge technologies.

23 Jun 2024

Getting the Current URL in Next.js

In this tutorial, we'll see how to get the current URL in a Next.js 14 application.

16 May 2024

Using NextAuth v5 with a middleware

In this post, we'll see how to set up NextAuth v5 with middleware to protect specific pages in our application.

16 May 2024

Using NextAuth v5 credentials provider with database

In this post we'll be detailing the setup of NextAuth v5 for user authentication with email and password using Prisma for database operations and the credentials provider. We'll also see how to access the session and allow sign out

16 May 2024

Working with Zod

Throughout this tutorial, we'll be learning about the required steps of implementing schema validation in our web development projects with TypeScript and Zod. Zod is TypeScript library that helps you define schemas and run validations against objects that need to adhere to the schemas. We'll see why Zod is the chosen language for schema validation then we'll look at hands-on examples to understand how this works.

13 May 2024

Using NextAuth v5, Prisma, Zod and Shadcn with Next.js 14 for building an authentication app

By following this tutorial, you'll create a modern authentication application with Next.js 14 server actions, NextAuth.js v5, Zod for form validation, and Prisma for the database. This stack provides a powerful combination of tools for building secure and scalable web applications with robust authentication features.

12 May 2024

Building a Password Strength Meter in React

Building a Password Strength Meter in React: A Step-by-Step Guide

30 Jan 2024

Creating a React Password Input with Eye Icon

Creating a Show/Hide Password Input Field in React

30 Jan 2024

React Show/Hide Password Input Field with Tailwind CSS

Creating a Show/Hide Password Input Field in React with Tailwind CSS

29 Jan 2024

Angular 15 vs React

Angular 15 and React are two of the most popular JavaScript frameworks for building web applications. Both frameworks have their own unique features and benefits, and choosing the right one for your project can be a difficult decision. In this article, we will compare Angular 15 and React to help you make an informed decision.

05 Jan 2023

How to use React-use-form

To reverse a string in a React component, you can use the split, reverse, and join methods. Here's an example of a function that takes a string as input and returns the reversed string

04 Jan 2023

How to reverse a string in React

To reverse a string in a React component, you can use the split, reverse, and join methods. Here's an example of a function that takes a string as input and returns the reversed string

02 Jan 2023

Vanilla JS vs. React JS – A Feature-based Comparison!

As web applications become too complex to develop, developers are often uncertain about the framework to choose. So, how to decide between Vanilla and React?

29 Aug 2022

Reset file input with React

In this quick example, we will see how to reset the file input in React using a ref.

28 Jun 2022

Get an element by ID in React

In this quick example, we will see how to get an element by ID in React using useRef and useEffect.

28 Jun 2022

Using the substring method with React

The substring method is a method in JavaScript that allows you to get a substring of a string. We can use this method in React either in the class code or in the JSX markup. Let's look at a quick example.

09 Jun 2022

Understanding React 18 root API: ReactDOM.createRoot

The introduction of the new root API, ReactDOM.createRoot, is one of the most significant improvements in React 18.

09 Jun 2022

React 18 useEffect runs twice

If you have just made a new project using Create React App or updated to React version 18, you will notice that the useEffect hook is called twice in development mode. This is the case whether you used Create React App or upgraded to React version 18.

23 May 2022

React 18 refs: the useRef hook & createRef

In this article, we will explore how to utilize React refs to access DOM elements using both the class-based approach via the createRef method or the functional-based approach via the useRef hook which is the recommended way in React 18.

08 May 2022

React 18 tutorial

Learn React 18 quickly with this tutorial

05 May 2022

React 18 hooks tutorial with examples

React hooks are a new feature that is recently released by the React team. In this tutorial, you will learn the basics of hooks and how to migrate a React app to use functional components and hooks instead of classes

05 May 2022

Handling Arrays with React 18 useState

30 Apr 2022

Upgrade to React Router 6

The objective of this article is to get you started with react-router-dom v6 (also referred to as React Router 6) by explaining how to upgrade an existing react project to the newest version of the official routing library.

26 Apr 2022

React setState not merging nested state as expected

When you update your state improperly, you run the risk of changing its original shape, which is frequent. Assume your state variable includes a nested object, and you want to change one of the nested object's properties. You'd think React would update the target property while keeping the original state's form, but that's not the case.

26 Apr 2022

React Router 6 tutorial with examples

Version 6 of React Router adds a slew of useful new features and improves compatibility with React's most recent releases. Breaking changes from version 5 are also introduced in this release. Upgrade your app from version v4 or v5 all the way to version 6 with the help of this tutorial.

26 Apr 2022

Remove an element from a useState Array in React 18

When we are working with React and array state, we may need to remove an item from a React component's state array. JavaScript's React UI library is solely responsible for rendering the user interface. No helper libraries for arrays are provided, but JavaScript already has a number of methods to work with arrays and other data types.

25 Apr 2022

Update Arrays with React useState Hook Without Push

In this article, we'll see by example how to update arrays via the React hook useState() using the push() method of the Array object

24 Apr 2022

React state array: get length example

In this short article, we'll look at how to get the length of an array or state array in React. Because React is a JavaScript library for rendering user interfaces, it focuses solely on rendering the UI and does not provide additional utilities for working with arrays or other similar tasks. As a consequence, you must rely primarily on JavaScript's built-in methods and APIs.

24 Apr 2022

React 18 upgrade guide and new features

React 18 has a number of new features that we will go over briefly in this tutorial, including the principles of concurrent rendering, batching, and transitions then we’ll also learn how to upgrade to React 18.

24 Apr 2022

How to Build a React Dapp with Hardhat and MetaMask

This article is a detailed walkthrough of how to build/run a minimal React Dapp that deploys and interacts with a simple Solidity smart contract using Hardhat and MetaMask as part of one’s development workflow.

21 Aug 2021

Frontity Tutorial: The React framework for WordPress

In this tutorial, we'll learn about Frontity, The React framework for WordPress

31 Aug 2020

Convert String To Number/Array In JavaScript with React Hooks/Vue.JS Examples

In this tutorial, we'll learn by example how to convert a string to the corresponding integer or float number or array of numbers using the built-in JavaScript methods with simple React and Vue.js examples

09 May 2020

React Hooks & GraphQL Apollo Tutorial: Build a First Example App in 4 Easy Steps

In this tutorial, we'll learn how to build a React application in four easy steps with React Hooks and GraphQL Apollo for consuming a third-party API

05 May 2020

React, Axios and Redux: Asynchronously Fetch and Save Data to Local Storage

In this tutorial, we'll learn about many of Redux concepts by creating a simple React application from scratch using React, Redux and Axios to asynchronously fetch and save data to Local Storage.

25 Apr 2020

React Router 5.1+ Hooks

In this tutorial, you will learn about routing in React using React Router 5.1+ hooks

13 Mar 2020

Ionic 5 React Tutorial: Build a Mobile App with Ionic 5, Axios and React

In this tutorial we'll look at how to use React with Ionic 5 and Axios to build a mobile application

14 Feb 2020

JavaScript Fetch Tutorial: Send HTTP Requests With React.JS and Async-Await Example

In this tutorial and example, we'll see how to use Fetch to send GET requests inside a Reacts.js example application. We'll also see how to use the Async/Await syntax to avoid using JavaScript Promises in your code

09 Dec 2019

React Apollo Hooks & Testing: useQuery with refetch and MockedProvider example

In this example, we'll see how to use the new useQuery hook available from the apollo react-hooks package to send GraphQL queries and receive response with fetched data from APIs. We'll also see how to test a React component that makes use of Apollo React hooks using MockedProvider available from @apollo/react-testing

16 Nov 2019

Consuming GraphQL APIs with React Hooks (useQuery) & Apollo Client

Throughout this tutorial, we'll see by example how to consume and fetch a GraphQL API with React Hooks and Apollo Client

15 Nov 2019

React Native for Beginners Book [2019]

Get the React Native for Beginners Book [2019]

05 Sep 2019

React native tutorial & example

Throughout this tutorial, you’ll learn to create your first React Native app step by step by emphasizing basic theory and practice. We'll use the latest 0.6 version released in 2019

03 Sep 2019

Saving data in local databases with AsyncStorage & React Native

In this tutorial, we'll learn how to use AsyncStorage in React Native to save data in a database.

11 Aug 2019

Adding Navigation using React Navigation & Switch Navigator

In this tutorial, we'll learn how to add navigation using React navigation and the switch navigator

11 Aug 2019

Adding stack navigation with Stack Navigator

In this tutorial, we'll learn how to add navigation using React navigation and the switch navigator

11 Aug 2019

Adding item separators and header to FlatList

In this tutorial, we’ll see how we can customize our FlatList component using a header and item separators

11 Aug 2019

Opening external links with Linking in React Native

In this tutorial, we'll see how to use Linking in React Native to open external links and URLs

11 Aug 2019

Creating your first React Native project

In this tutorial, we’ll teach you to build your first React Native mobile app from scratch going through the essential concepts

11 Aug 2019

ES6 Modules - Import, Export & Default for React Native Devs

In this article, we'll focus on understanding the import, export and default keywords used in ES6 modules

08 Aug 2019

ES6 Spread Operator in React by Example: Props and setState

In this post, you will learn about using the JavaScript Spread operator in React.

11 Jun 2019

React Props Tutorial: Children Example

In this tutorial, you'll learn about React props

29 Apr 2019

React Fragment Tutorial

React Fragment Tutorial

29 Apr 2019

React & Axios FormData: PHP File Upload Example with Multi-Form Data

In this tutorial, you'll learn how to handle multi-part Form Data in React by implementing a simple file upload example.

28 Apr 2019

React & Axios JWT Authentication Tutorial with PHP & MySQL Server: Signup, Login and Logout

In this tutorial, you'll learn to create an example React application that implements JWT authentication using a PHP REST API server on top of a MySQL database.

28 Apr 2019

How to Pass, Access & Update Parent State from Child Components in React

In this tutorial, you'll learn to access and update the state of a parent component from a child component in React

11 Apr 2019

React 16.3 New Context API Tutorial

In this is quick tutorial you'll learn how to use the new Context API in React 16.3+

10 Apr 2019

PHP, MySQL & React REST API Tutorial with Example Form

In this tutorial you will learn how to build a RESTful CRUD React app with PHP and MySQL.

10 Apr 2019

Understanding React setState() (Callback, Async-Await and Promises)

In this tutorial we'll look at how to use React setState()

09 Apr 2019

Consume a JSON REST API with React and Axios

Throughout this tutorial, we'll build a simple React application that consumes JSON data from third-part RESTful API using the Axios library. We are also going to style the user interface of our app with Bootstrap 4 components such as the Container and Card components.

08 Apr 2019

React Bootstrap Tutorial: Integrating Bootstrap 4 with React

In this tutorial we'll see how to integrate Bootstrap 4 with a React application without using jQuery

04 Apr 2019

React Tutorial: Consume a JSON REST API with Fetch and Styling UI with Bootstrap 4

In this tutorial we'll learn how to build a React application that consumes a third-party JSON REST API using the fetch() method. We'll also use Bootstrap 4 to style the UI.

03 Apr 2019

Redux Tutorial

In this tutorial, you'll learn to use Reudx to manage state in your React application

01 Dec 2018

Ethereum Dapps with Truffle,Ganache, Metamask, OppenZippelin and React

In this tutorial you'll learn how to create a Dapp (Distributed application) that can be hosted on the Ethereum blockchain by using popular libraries like Truffle, OpenZeppelin and React.

19 Nov 2018

React useState by example

useState() is an example built-in React hook that lets you use states in your functional components.

02 Nov 2018

React 16.6 New Features: React.memo() and Suspense/React.lazy()

We'll learn about important new features of React such as React.memo() and React.lazy()

30 Oct 2018

React Router Redux Tutorial

In this tutorial we'll look at how to use react-router-redux (previously known as redux-simple-router) to control the URL as a part of the application state.

29 May 2018

Adding the Django CSRF Protection to React Forms

In this tutorial you'll see how you can handle the Django CSRF token in React when using the Axios client or the fetch API. We'll also see how you can add CSRF in forms rendered dynamically with React

16 Jan 2018

Django React Tutorial with Example Demo

In this tutorial we'll look at how to build a modern CRUD web application using Django and React. We'll use Django REST Framework to build an example API, react-router-dom for routing the front-end app, Axios for making HTTP calls to the Rest API endpoints, Redux for managing the app's global state and finally Webpack to bundle the assets

20 Dec 2017

Making AJAX API Calls in React: Axios vs jQuery vs Fetch API with Example GET & POST

In this tutorial we will cover different ways to use AJAX in React: Axios vs Fetch API and where to make AJAX calls? componentDidMount() vs componentWillMount() vs the ES6 class constructor.

21 Nov 2017

Building Universal Server Rendered Apps with React and Next.js 3.0

How to build server rendered apps with Angular Universal Starter

29 Jul 2017

Building Web Apps with Django ,Webpack and React

How to build modern web apps with Django , Webpack and React

15 Jul 2017

Building a Modern App with Django and React

How to build modern web apps with React, Django and Django Rest Framework

15 Jul 2017