Learn React with 4 mini projects

Topic Collections

Explore our curated collection of articles

Next.js
React.js
JavaScript
Node.js
React.js Challenges
Styled Components

Latest Articles

Read our latest expertly crafted articles

Stop Hardcoding Routes in Next.js: Use This Scalable Pattern Instead

Learn the best way to manage routes in Next.js by using a central routes file. Avoid hardcoding paths, reduce errors, and keep your project easy to update.

next.js
tips
4 min read

Build Your Own Tiny Ad Network in Next.js

Learn how to build your own tiny ad network in Next.js to show custom or affiliate ads on your site. Perfect for small websites with low ad revenue. Easy to follow, no third-party platforms needed.

next.js
script
5 min read

Smart Ways to Handle Conditional Rendering in React (6 Code Examples)

Study about 3 practical approaches to conditional rendering in React. Learn how to show/hide components, toggle views, and render multiple screens, with real examples and clean code.

reactjs
frontend
tips
7 min read

Build Scalable React Forms Using a Custom Hook (No Libraries Needed)

Learn modern React form handling without external libraries. Discover best practices using a custom useForm hook and reusable components to write cleaner, scalable forms.

reactjs
form
hooks
8 min read

5 Free ReactJS Coding Challenges For Beginner Developer

In these free Reactjs Coding Challenges you are given a responsive UI built with Reactjs, and your job is to make them functional by writing business logic

challenges
reactjs
7 min read

Convert Array to Object in JavaScript [5 Methods + Exercise]

In this article we will learn how to convert arrays to objects in Javascript using 5 different methods! Discover new techniques for handling data conversions in your front-end projects.

snippets
functions
7 min read

Learn How To Use TypeScript Enum in ReactJS With Examples

I will explain how to use the Typescript enum in ReactJS application with an example component. We will also discuss enums best practices and benefits in react application.

reactjs
typescript
5 min read

How To Check And Resolve Broken Images In React JS

We can fix broken images by just adding a ternary operator in the image. The img tag in React takes a prop onError function that runs when the image URL is broken.

reactjs
javascript
frontend
5 min read

Build a Progress Steps Component in ReactJS from Scratch Using CSS

Build a responsive progress steps component in ReactJS from scratch. This tutorial uses vanilla CSS and guides you step by step—perfect for multi-step forms and onboarding UIs.

reactjs
frontend
11 min read

Quick and Fun React Challenges with Codepen Templates to Improve Business Logic

Being a Frontend developer, I often come across tasks that are bit tricky and require some time to build logic. Here I am going to list the ReactJS mini UI challenges.

challenges
reactjs
3 min read

Convert HTML to Reusable React Components: A Beginner’s Challenge

Convert a static HTML blog layout into reusable, efficient React components. Improve your coding skills and learn best practices

challenges
reactjs
4 min read

Reusable Input Component in React Typescript [with useInput hook and error]

Today, we shall explore constructing a reusable input component in React using Typescript, we will also learn how to show errors and how to make it modular via useInput hook

reactjs
components
8 min read

ReactJS Challenge #1: Online Word and Sentences Counter

Word and Sentences Counter tool is not some random online ReactJS coding challenge. It is a complete real-world tool that you can showcase on your portfolio or launch as a micro-SASS

challenges
reactjs
6 min read

6 Steps to Create a Quiz App in ReactJS

One of any language's most fundamental projects is to create a quiz app. You can learn so many concepts while building quiz app in Reactjs step by step.

reactjs
app
13 min read

An Easy Way to Create a Responsive Navbar in ReactJS

The Navbar will look perfect in all screen sizes, from larger desktops to 400px mobile screens. Can be used in your projects by doing little customization.

reactjs
components
9 min read

5 Best ReactJS Projects for Beginners in 2024 [Source Code Included]

If you want to build project in Reactjs as beginner, you need to focus on two skills, I will guide you about both skills in this article by giving you useful resources.

reactjs
components
12 min read

Build Sleek Custom Radio Buttons for Your React App

Sometimes we are given a design of a Radio button that is different from the default one. So we have to build a custom radio button to mimic the design.

reactjs
components
8 min read

Update Object in Array Without Mutation in Javascript

To update an object property inside an array we will be using javascript higher-order map method, which returns a new array and doesn't mutate the original array.

snippets
tips
4 min read

Create an Editable Text Field in a Table Using ReactJS [Learn the Trick]

Tables with editable text fields enhance user experience. Building editable text fields might seem difficult, but it becomes easy with the tricks.

react-table
components
7 min read

React Password Generator [ReactJS Challenge #2]

In the React Password Challenge, you will write logic for a strong and random React password generator tool. We have already created the UI so you only focus on logic.

challenges
reactjs
4 min read

React Memory Game [ReactJS Challenge #5]

Do you wonder how Memory Game logic works or want to write your own using ReactJS? This challenge is specially designed to test your JavaScript and React logics

challenges
reactjs
4 min read

How I Learned TypeScript for React in 4 Days?

Discover how a React developer learned and implemented TypeScript in just 4 days. Find answers to common questions including whether it's necessary to learn and how long it takes.

typescript
react
8 min read

A Quick Guide to Create a Loading Spinner Button in ReactJS

Adding a loading spinner button to your app design can prominently get you better results in terms of user engagement. You can keep your users hooked to the app.

reactjs
components
9 min read

Barrel Pattern and Direct File Naming Approach: Two Popular React Folder Structures

We'll explore two popular React folder structures and naming patterns. Both have their pros and cons, which we will discuss one by one. We will also discuss and provide solutions to the drawbacks of these patterns

reactjs
patterns
4 min read

React Styled Components Folder Structure Best Practices for Scalable Application

I am going to share how I personally like to organize styled components in Reactjs projects so that you can use them in your web apps and personalize them.

style
react
8 min read

Styled Components Media Queries - A Better Approach to Responsive Styling

Learn how to write media queries in styled components for a production application. Never hard-code media queries; create variables for them instead. Improve code readability and maintainability.

style
react
4 min read

Exploring the Benefits and Advantages of Styled Components in React Development

Unlock the power of styled components in React development, once you have started using it you won't like to go back to SCSS or other CSS frameworks. Explore the potential of reusable, manageable, and clean code

style
react
4 min read

Creating a Reusable Flex Component with Styled Components for Faster UI Development

Creating a new styled component every time for layout and positioning is time-consuming, and all I want is to create a reusable flex component for faster development that manages layout, positioning, and gap via props.

style
react
3 min read

How To Learn Nodejs Faster [5 Best Ways, Tips and Resources]

Besides building APIs, Nodejs helps to automate things, in this article, we have discussed how to learn Nodejs in 5 best ways, a roadmap to learn Nodejs, and resources

nodejs
guide
7 min read

How To Import JSON File To Mongodb Atlas Using NodeJS

We used the NodeJS built-in fs module's readFileSync method to read the file synchronously. To upload the file we need a function that will import data to server.

nodejs
snippets
6 min read

ReactJS Challenge #4: CRUD Typescript Tasklist App

This React Typescript Tasklist/Todo challenge will help you master CRUD operations, improve your React development skills, and get hired as an intern/junior React developer.

challenges
reactjs
5 min read

Simple JavaScript Function To Convert Seconds to Hours and Minutes

Imagine you are given the time in seconds and need to display it in hours, minutes and seconds format. I have divided the process into four steps so you can understand it with ease.

snippets
functions
7 min read

ReactJS Challenge #3: Create a Motivating Quote Generator with React

Challenge yourself to build a random quote generator using ReactJS and showcase your front-end development skills. Flourish your creativity with this fun code challenge!

challenges
reactjs
5 min read

How To Best Reuse Styles in Styled Components? (2 Ways)

In this article, we are going to talk about the power of styled components. Reusable styles make our project code clean, maintainable, and easier to refactor

style
react
4 min read

How to use Styled-Components .attrs Method with Reactjs img Tag

In this tutorial, you will learn how to use locally downloaded images with styled-components. We will use the img tag with the .attrs method of styled-components.

style
react
3 min read

How To Fix Styled Components Prop Types Issue In Typescript

Styled components take props and based on props we can define styling. In typescript, we have to define the types of each prop. Lets learn how to tackle this.

style
react
typescript
2 min read

ReactJS Challenges

Get a ReactJS UI and write business logic to enhance your frontend skills

5 Free ReactJS Coding Challenges For Beginner Developer

In these free Reactjs Coding Challenges you are given a responsive UI built with Reactjs, and your job is to make them functional by writing business logic

challenges
reactjs
7 min read

Quick and Fun React Challenges with Codepen Templates to Improve Business Logic

Being a Frontend developer, I often come across tasks that are bit tricky and require some time to build logic. Here I am going to list the ReactJS mini UI challenges.

challenges
reactjs
3 min read

Convert HTML to Reusable React Components: A Beginner’s Challenge

Convert a static HTML blog layout into reusable, efficient React components. Improve your coding skills and learn best practices

challenges
reactjs
4 min read

ReactJS Challenge #1: Online Word and Sentences Counter

Word and Sentences Counter tool is not some random online ReactJS coding challenge. It is a complete real-world tool that you can showcase on your portfolio or launch as a micro-SASS

challenges
reactjs
6 min read

React Password Generator [ReactJS Challenge #2]

In the React Password Challenge, you will write logic for a strong and random React password generator tool. We have already created the UI so you only focus on logic.

challenges
reactjs
4 min read

React Memory Game [ReactJS Challenge #5]

Do you wonder how Memory Game logic works or want to write your own using ReactJS? This challenge is specially designed to test your JavaScript and React logics

challenges
reactjs
4 min read

ReactJS Challenge #4: CRUD Typescript Tasklist App

This React Typescript Tasklist/Todo challenge will help you master CRUD operations, improve your React development skills, and get hired as an intern/junior React developer.

challenges
reactjs
5 min read

ReactJS Challenge #3: Create a Motivating Quote Generator with React

Challenge yourself to build a random quote generator using ReactJS and showcase your front-end development skills. Flourish your creativity with this fun code challenge!

challenges
reactjs
5 min read