HOT

Let's Build 20 ReactJs Projects

Development

Let's Build 20 ReactJs Projects, available at $84.99, with 129 lectures.

Enroll Now

You will learn about The building blocks of React Function components React hooks How React renders and re-renders components How React manages state in your components How React shares state between components How to style React applications using CSS Looping over elements How to build impressive UIs for your users Build complex User Interfaces using React Build interactive websites and web applications using React Build apps based on common use cases of the web Build a full stack application complete with back-end and front-end code using React and MongoDB The Fetch API The Clipboard API Using external npm packages in your React application Using API keys to fetch data Using environment variables Cloudinary to upload images MongoDB to add back-end functionality React Vite for the final project This course is ideal for individuals who are Everyone curious about ReactJs or Anyone who wants to learn how to apply their programming knowedge but is having trouble with it or Anyone who wants to add JavaScript interactivity to their application using ReactJs It is particularly useful for Everyone curious about ReactJs or Anyone who wants to learn how to apply their programming knowedge but is having trouble with it or Anyone who wants to add JavaScript interactivity to their application using ReactJs.

Enroll now: Let's Build 20 ReactJs Projects

Summary

Title: Let's Build 20 ReactJs Projects

Price: $84.99

Number of Lectures: 129

Number of Published Lectures: 129

Number of Curriculum Items: 129

Number of Published Curriculum Objects: 129

Original Price: $59.99

Quality Status: approved

Status: Live

What You Will Learn

  • The building blocks of React
  • Function components
  • React hooks
  • How React renders and re-renders components
  • How React manages state in your components
  • How React shares state between components
  • How to style React applications using CSS
  • Looping over elements
  • How to build impressive UIs for your users
  • Build complex User Interfaces using React
  • Build interactive websites and web applications using React
  • Build apps based on common use cases of the web
  • Build a full stack application complete with back-end and front-end code using React and MongoDB
  • The Fetch API
  • The Clipboard API
  • Using external npm packages in your React application
  • Using API keys to fetch data
  • Using environment variables
  • Cloudinary to upload images
  • MongoDB to add back-end functionality
  • React Vite for the final project

Who Should Attend

  • Everyone curious about ReactJs
  • Anyone who wants to learn how to apply their programming knowedge but is having trouble with it
  • Anyone who wants to add JavaScript interactivity to their application using ReactJs

Target Audiences

  • Everyone curious about ReactJs
  • Anyone who wants to learn how to apply their programming knowedge but is having trouble with it
  • Anyone who wants to add JavaScript interactivity to their application using ReactJs

In this course we are going to build 20 ReactJS projects which become more advanced with every successfully completed project. You will learn how to build components from scratch, and how you can combine these components to create complex interactive User Interfaces for your audience. For the duration of this course, we are going to use the more popular function components as opposed to class components.

ReactJs is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

Build encapsulated components that manage their own state, then compose them to make complex UIs. You can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Getting the code + What to know

Chapter 2: Course Intro

Lecture 1: Prerequisites

Lecture 2: VS Code Settings

Lecture 3: Clone / Download GitHub Repository

Lecture 4: Default React Application

Chapter 3: Project 1 – Counter App

Lecture 1: Demo

Lecture 2: Counter App UI and Styles

Lecture 3: Counter Functionality

Chapter 4: Project 2 – List App

Lecture 1: Demo

Lecture 2: List App UI and Styles

Lecture 3: Display List Dynamically

Lecture 4: Filter list data

Chapter 5: Project 3 – Todo List App

Lecture 1: Demo

Lecture 2: UI and Styles

Lecture 3: Controlled Inputs and Handle Form Submit

Lecture 4: Submit function and render Todo List

Lecture 5: Edit and Delete functions

Lecture 6: Add Local Storage

Chapter 6: Git Commits

Lecture 1: Commit Changes to GitHub

Chapter 7: Project 4 – React Hooks

Lecture 1: useState

Lecture 2: useEffect

Lecture 3: Custom hooks

Lecture 4: useRef

Lecture 5: useContext

Lecture 6: useMemo

Lecture 7: useCallback

Chapter 8: Project 5 – Business Card

Lecture 1: Demo

Lecture 2: Business Card set up and components

Lecture 3: Build and Styles Components

Lecture 4: Toggle Function

Chapter 9: Project 6 – Markdown Editor

Lecture 1: Demo

Lecture 2: Project overview

Lecture 3: Component structure

Lecture 4: UI and styles

Lecture 5: Render markdown from input

Lecture 6: Add responsiveness

Chapter 10: Project 7 – Personal Website

Lecture 1: Demo

Lecture 2: UI Structure

Lecture 3: Styles

Chapter 11: Git Commits (Again)

Lecture 1: Commit changes so far to GitHub

Chapter 12: Project 8 – Password Generator

Lecture 1: Demo

Lecture 2: Build UI

Lecture 3: Styles

Lecture 4: Add state values, controlled inputs, and password data

Lecture 5: Generate password function

Lecture 6: Custom toast notifications and Copy to Clipboard function

Chapter 13: Project 9 – GitHub Users App

Lecture 1: Demo

Lecture 2: App Structure and make GET request

Lecture 3: Display and style API data

Chapter 14: Project 10 – Image Gallery using the Unsplash API

Lecture 1: Demo

Lecture 2: Get API key from the Unsplash website

Lecture 3: Send GET request to API

Lecture 4: Build UI

Lecture 5: Styles

Lecture 6: Build Search form

Lecture 7: Add functionality for search form

Chapter 15: Project 11 – React Router Dom

Lecture 1: Install and set up routing using React Router Dom

Chapter 16: Project 12 – Jobs Dashboard

Lecture 1: Demo

Lecture 2: App Structure

Lecture 3: Build and Style UI

Lecture 4: Display single job grid

Lecture 5: Add Tab Navigation

Lecture 6: Refactor Code

Chapter 17: Project 13 – Admin Panel Dashboard

Lecture 1: Demo

Lecture 2: File structure overview

Lecture 3: Set up pages for the app, and react router dom

Lecture 4: Homepage

Lecture 5: Charts for the stats page

Lecture 6: Toggle charts

Lecture 7: Upgrades page

Lecture 8: Price toggle

Lecture 9: Questions component

Lecture 10: Sidebar component

Lecture 11: Error page

Chapter 18: Project 14 – Online Store with Tabs

Lecture 1: Demo

Lecture 2: Overview and structure

Lecture 3: Posts page, and filter posts by category

Lecture 4: Home page and routing

Lecture 5: Navigate to a single product page using its unique id

Lecture 6: Image tab toggle

Chapter 19: Project 15 – Crypto App

Lecture 1: Demo

Instructors

Rating Distribution

  • 1 stars: 0 votes
  • 2 stars: 0 votes
  • 3 stars: 0 votes
  • 4 stars: 0 votes
  • 5 stars: 0 votes

Frequently Asked Questions


How long do I have access to the course materials?


You can view and review the lecture materials indefinitely, like an on-demand channel.


Can I take my courses with me wherever I go?


Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

You may also like

Master Lead Generation: Grow Subscribers & Sales with Popups

Create CONVERTING UGC Content So Brands Will Pay You More

TikTok Marketing Mastery: Learn to Grow & Go Viral