React

React posts, videos, courses, and more

Reed Barger

3 days ago

View Post

What Is "Lifting State Up" in React?

Here is a simple, practical example of what the React concept of "lifting state up" is and how it can help you in building your applications. Lifting state up is a common pattern that is essential for React developers to know, because it helps us avoid more complex (and often unnecessary) patterns for managing our stat...
What Is "Lifting State Up" in React?
2
Select One:

Savio Martin

4 days ago

View Post

Set Up Tailwind In React - The fastest way! πŸš€

Hello Folks πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'll show you the easiest and the fastest way to set up Tailwind CSS in your React App. So, be with me! Lets code something...
Set Up Tailwind In React - The fastest way! πŸš€
5
Select One:

Reed Barger

5 days ago

View Post

5 Ways to Fetch Data in React from a GraphQL API

Let's go through the five best ways that you can fetch data with React from a GraphQL API. While there are a couple of popular libraries which are made to interact with GraphQL APIs from a React application, there are many different ways to fetch data with GraphQL. I've included code samples that show you how to fetch or "q...
5 Ways to Fetch Data in React from a GraphQL API
3
Select One:

Yogesh Chavan

1 week ago

View Post

Speed Up Your Coding in React By Making These Changes in Visual Studio Code

In this article, we will see some of the settings you can do in Visual studio code to improve your productivity a lot when working with React. So let's get started. Enable emmet for React If you are HTML/CSS developer, then you might already be aware of the emmet plugin. It provides autocompletion for HTML and CSS code by reduci...
Speed Up Your Coding in React By Making These Changes in Visual Studio Code
3
Select One:

Rahul

1 week ago

View Post

Getting started with React Router

React Router is the standard routing library for React. It has a simple API with all the powerful features like lazy code loading, dynamic route matching and location transition handling built-in. It allows us to create a multi-page feel in a single page application. Let's see an example to understand the basic usage of React ro...
Getting started with React Router
3
Select One:

Savio Martin

1 week ago

View Post

34 Ultimate VS Code Extensions to Increase Productivity! πŸ’ͺ

Hello Folks πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'm gonna show you 34 ultimate VS Code extensions to improve your productivity. I'm pretty sure you'll enjoy this huge list...
34 Ultimate VS Code Extensions to Increase Productivity! πŸ’ͺ
5
Select One:

Raunaq

2 weeks ago

View Post

Understanding the React useEffect() Hook

Introduction In the previous post, we looked at the useState() Hook that adds state to a functional component. We learned how to initialize, update and access state variables in a functional component using useState() Hook. In this post, we'll focus on the useEffect() Hook that let us perform side effects in functional component...
Understanding the React useEffect() Hook
7
Select One:

Savio Martin

2 weeks ago

View Post

Creating a super productive REST API in 30 seconds πŸ’ͺ

Hello Folks πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'm super excited to share how you can build a super productive REST API in less than 30 seconds. It is good enough to have...
Creating a super productive REST API in 30 seconds πŸ’ͺ
8
Select One:

Reed Barger

2 weeks ago

View Post

How to Auto-Deploy Your React Apps with Cloudflare Pages

In this article, I'm going to show you how to very quickly deploy any React application with the help of Cloudflare pages. You'll see how to not only build and deploy your app within minutes using just a few tools, but also how to auto-deploy any future changes you make through your Github account. Want to make your own amazing...
How to Auto-Deploy Your React Apps with Cloudflare Pages
6
Select One:

Reed Barger

3 weeks ago

View Post

The React Router Cheatsheet: Everything You Should Know

If you're building React applications for the web, you're going to need to use a dedicated router to display pages and navigate your user around them. That's why today we're going to go over the most popular and most powerful router for React applications--React Router. We're going to go over 11 of the essential features you nee...
The React Router Cheatsheet: Everything You Should Know
8
Select One:

Reed Barger

3 weeks ago

View Post

5 Things Every React Developer Should Know About State

One of the most important concepts for every React developer is state--what it is, how to properly use it, and to avoid common pitfalls as your build your applications. Let's cover five of the most essential parts of state that you need to know, each of which build upon each other to aid your overall understanding of a somewhat...
5 Things Every React Developer Should Know About State
5
Select One:

Raunaq

3 weeks ago

View Post

Understanding the React useState() Hook

Introduction Hooks were introduced in React v16.8.0. Prior to that, if we had written a functional component and wanted to add state or make use of lifecycle methods to perform operations such as data fetching and manual DOM manipulation, the functional component had to be converted into class based component. However, introduct...
Understanding the React useState() Hook
6
Select One:

Savio Martin

3 weeks ago

View Post

25 Marvelous Resources to satisfy your image needs πŸ™Œ

Hello Devs πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'm gonna share 25 Marvelous Resources to satisfy your image needs πŸ™Œ Free Illustration Resources. Open Peeps The library w...
25 Marvelous Resources to satisfy your image needs πŸ™Œ
10
Select One:

Reed Barger

3 weeks ago

View Post

5 Key Lessons React Tutorials Don't Teach

There are many essential concepts and lessons that React developers need to know that simply aren't covered in most tutorials. I have handpicked the topics I believe are some of the most important for you to know, but few articles have dedicated the time to cover in detail. Let's take a look at five key React lessons worth knowi...
5 Key Lessons React Tutorials Don't Teach
6
Select One:

Reed Barger

4 weeks ago

View Post

Is React a Library or a Framework? Why It Matters

Developers have spent a great deal of time what React is, but have left out why this topic matters so greatly for anyone who builds React applications. The answer to this question is essential for any React developer, regardless of their skill level, because it indicates what they must know and how they must work in developing a...
Is React a Library or a Framework? Why It Matters
8
Select One:

Reed Barger

1 month ago

View Post

The React Tutorial for 2021: A Complete Guide

Welcome to a tutorial made to help you become effective with React as quickly as possible as you build a complete application along the way. As compared to many tutorials you might have gone through before, this one is meant to be thoroughly practical from start to finish. You will learn how to create an entire React application...
The React Tutorial for 2021: A Complete Guide
8
Select One:

Reed Barger

1 month ago

View Course

Build a Shopping Cart App with React, Node, and Stripe

Learn how to build a complete online store and shopping cart using React, Node and Stripe!The shopping cart app you build will feature:- A complete gallery of products that users can pick from- An attractive and responsive, mobile-first app design, ideal for all devices- Dedicated pages for each product, with several user a...
Build a Shopping Cart App with React, Node, and Stripe
2
Select One:

Reed Barger

1 month ago

View Post

The React Roadmap 🏁 10 Steps to Become a React Developer in 2021

Learning how to become a confident React developer takes hard work, but not knowing the right way to become one can make it much harder. Learning React doesn't have to be a chore. Let's break down the 10 steps that will make your time and effort becoming a React developer easier and more fun. All while delivering consistent, car...
The React Roadmap 🏁 10 Steps to Become a React Developer in 2021
9
Select One:

Savio Martin

1 month ago

View Post

Creating an Image search app using Unsplash API with infinite scrolling πŸ“Έ

Hello Folks πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'm super pumped to build an amazing Image search app using Unsplash API with infinite scrolling. So, let's get started ✌...
Creating an Image search app using Unsplash API with infinite scrolling πŸ“Έ
11
Select One:

Savio Martin

1 month ago

View Post

40 Amazing Chrome Extensions for Web Developers and Designers

Hello Devs πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'm gonna share 34 Must have chrome extensions for developers. These extensions are really helpful to developers and fasten...
40 Amazing Chrome Extensions for Web Developers and Designers
12
Select One:

Savio Martin

1 month ago

View Post

Use Local Storage in React - The fastest way! πŸš€

Hello Devs πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'm gonna share how you can use local storage in your React app. βš› Last week, I published an npm package that will make th...
Use Local Storage in React - The fastest way! πŸš€
9
Select One:

Sunil Joshi

1 month ago

View Post

6 Best React Dashboard Templates that you can Use in 2021

If you are looking for the best react dashboard template then either you’re building it for your own or you have a client to build a full-stack application for him. But, you don’t want to waste time, actually coding the HTML, CSS for the admin's section. Then you are at the right place, my Friend. Here in this article, we’ll pro...
6 Best React Dashboard Templates that you can Use in 2021
4
Select One:

Savio Martin

1 month ago

View Post

Lets Build Live Markdown Editor in 5 minutes with React JS. βš‘πŸš€

Hello Geeks πŸ‘‹ This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Let's Build The Live Markdown Editor with React Js. Let's get Started ✌️πŸ”₯ Stuffs Required for making the project NPM (Node Packa...
Lets Build Live Markdown Editor in 5 minutes with React JS. βš‘πŸš€
9
Select One:

Tony Lea

2 months ago

View Post

My first Reaction of React

In this tutorial, I want to show you the basics of how a React application works. I also wanted the chance to try it out myself πŸ€“. I consider myself more of a PHP/Laravel/VueJS developer; however, I thought I would give React a try and let you know my first impressions of this popular javascript framework. Simple React Example O...
My first Reaction of React
8
Select One:

Sam

2 months ago

View Post

Some techniques to optimize react application

Optimization is the selection of the best element from some set of available alternatives. React allows us to build encapsulated components that manage their own state, then composes them to make complex UIs. These components make up small parts of our UI. This means a lot of times we unintentionally create redundant components...
Some techniques to optimize react application
4
Select One:

krissanawat101

2 months ago

View Post

Submit Data to FakestoreAPI With React Form

In previous tutorial articles, we learned about adding React Table with multiple functionalities, adding React Modal, and React Form to React ecosystem. Now, this tutorial article will feature the combination of all three tutorials. The main goal of this article is to bring all of the previous stuff that we have learned together...
Submit Data to FakestoreAPI With React Form
4
Select One:

Bello Noah

2 months ago

View Post

What is React?

This article is sponsored by Flutterwave - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free! React happens to be the most popular JavaScript framework sourced from Stack Overflow Developer Survey (2020). It is the best alternative to...
What is React?
4
Select One:

krissanawat101

2 months ago

View Post

Getting a Start in React Hook Form

We know that forms are an essential component in web apps. They are specially used to interact with the end-users. It helps to collect data from the end-users and perform operations accordingly. They are widely used in Sign-up and Sign-in processes or registering any query. It is a primary component that enables text-based inter...
Getting a Start in React Hook Form
2
Select One:

krissanawat101

2 months ago

View Post

Getting Started With React Table With Fakestore API #5 : View Single Product With Modal

In our previous tutorials, we learned how to implement React table with multiple functionality using the react-table package. We also learned how to add modal to the React app using the react-modal package. Now, we are going to combine what we learned in those tutorials and apply it in this tutorial. We are going to display the...
Getting Started With React Table With Fakestore API #5 : View Single Product With Modal
1
Select One:

krissanawat101

2 months ago

View Post

Getting Started with React Modal

If you want to display any additional information or feature that does not require to take any extra space in the web/mobile UI screen then what better to use than Modals. Modals are the dialog that helps us with any extra information or feature without having to navigate to another screen. Modals pop up over the same screen whi...
Getting Started with React Modal
1
Select One:

Loading More Content

Back to DevDojo