React Front To Back from Udemy

What's inside

Learning objectives

Learn modern react by building 3 projects
Flux pattern using context & usecontext/usereducer hooks
Learn redux from scratch

Full stack development with mern (mongodb, express, react, node)
Suitable for both beginners & intermediate react developers

Learn modern react by building 3 projects
Flux pattern using context & usecontext/usereducer hooks
Learn redux from scratch
Full stack development with mern (mongodb, express, react, node)
Suitable for both beginners & intermediate react developers

Syllabus

Course Introduction

Welcome To The Course

What Is React?

Setting Up Our Environment

Project 1 Start [Github Finder] & React Setup

Project Introduction

Code & Resources

Create React App & File Structure

CRA Cleanup & Prepare

Intro To JSX & Fragments

Expressions & Conditionals In JSX

Components, State & Props

Components, Props & PropTypes

Getting Started With Component State

Lists & Passing State With Props

Stateless Functional Components

HTTP Requests & Updating State

Spinner Component & Refactoring

Environment Variables

Events, Passing Props, React Router & More

Events & Search Component

Passing Props Up & Search

Clear Users From State

Alert State & Component

React Router Setup

Single User Component & Data

User Component UI & Layout

Repos & RepoItem Component & Data

Refactoring To Hooks & Context

Overview of Hooks & Context

Search Class to Function With useState Hook

User Class to Function With useEffect Hook

App Class to Function Component

Implementing Context

Create Reducer & Actions

Moving User State To Context

Moving Repos State To Context

Alert Context Workflow

Home & NotFound Components

Prepare & Deploy To Netlify

Project 2 Start [Contact Keeper - MERN] & Express Server Setup

MongoDB Atlas Setup

Dependencies & Basic Express Server

Backend Routes

Connect MongoDB To Our App

Backend Users, Contacts & JWT Authentication

User Model & Validation

Hash Passwords & Register Route

Create & Respond With JSON Web Token

Authenticate Route

Auth Middleware & Protecting Routes

Contact Model & Get Contacts Route

Add Contact Route

Contact Update & Delete Routes

Client Side Setup & Contacts UI

Setup React & Concurrently

Cleanup, Navbar & Router Setup

Contacts Context & Global State

Contacts & ContactItem Components

ContactForm Component

Delete Contact From UI

Set & Clear Current Contact

Edit & Update Contact Action

Contact Filter Form & State

Basic Add & Delete Animation

React/Express Authentication

Auth Context & Initial State

Alert Context, State & Component

User Registration

Load User & Set Token

User Login

Logout & Navbar

PrivateRoute Component

Contacts API Integration & Deploy

Add Contact

Get & Clear Contacts

Delete Contacts

Update Contacts

Prepare & Deploy To Heroku

Project 3 Start [ITLogger - Redux] - Components & UI

React & JSON-Server Setup

Materialize Setup

SearchBar & Logs Component

LogItem & Preloader Components

AddBtn & AddLogModal Components

Edit & Tech Modal Components

Redux For State Management

Redux Store & Provider Setup

Logs Reducer, Actions & Types

Connecting Redux To a Component

Add Logs

Delete Logs

Update Logs

Search Logs

Technicians State & Components

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Suitable for both early and mid-level React developers

Develops a variety of React skills and projects

Taught by Brad Traversy, a well-known React instructor

Includes hands-on labs and interactive materials

Covers modern React concepts and technologies

Includes building projects to support learning by doing

Reviews summary

Highly rated react course

Learners say this React course is highly rated with engaging assignments and an amazing instructor.

Instructor Brad is awesome

"Brad is all around an amazing instructor."

"His approach to teach by coding up real life projects is amazing."

Real world projects help learning

"I learned a ton from real life projects"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React Front To Back with these activities:

Read and Summarize: 'The Road to React' by Robin Wieruch

Show steps

Gain a deeper understanding of React fundamentals by reading and summarizing a recommended book

View The Road to Firebase: Your journey to master... on Amazon

Show steps

Obtain a copy of the book
Read the book thoroughly
Summarize the key concepts and ideas

React Code Challenges on Event Handling

Show steps

Sharpen your skills by solving code challenges focused on React event handling

Show steps

Find a platform or resource with React event handling challenges
Attempt the challenges and debug your solutions

Code React Component Life Cycle Methods

Show steps

Practice coding React component lifecycle methods to reinforce understanding and debug applications effectively.

Browse courses on React Components

Show steps

Create a new React project
Add a component with lifecycle methods
Test the lifecycle methods by logging to the console
Debug any errors that may occur
Review the console logs to verify the lifecycle methods are working as expected

Ten other activities

Expand to see all activities and additional details

Show all 13 activities

React Tutorial on Class Components and State

Show steps

Solidify your understanding of React Class Components and State management by following a guided tutorial

Show steps

Identify different types of React components
Understand the component lifecycle
Use state to store and update data within components
Handle events and user input in components

MongoDB and Express.js Tutorial for Beginners

Show steps

Build a strong foundation for working with MongoDB and Express.js by following a guided tutorial

Browse courses on Express.js

Show steps

Set up your MongoDB and Express.js environment
Create and manage databases and collections
Perform CRUD operations using Express.js

Follow React Hooks Tutorial

Show steps

Reinforce your understanding of React Hooks by following a comprehensive tutorial.

Browse courses on React Hooks

Show steps

Find a reputable tutorial on React Hooks.
Set aside time to work through the tutorial.
Follow the steps and examples in the tutorial.
Experiment with the concepts in your own React projects.

Explore React Hooks and Context API

Show steps

Follow guided tutorials and documentations to explore the capabilities of React Hooks and the Context API and enhance understanding.

Browse courses on React Hooks

Show steps

Find reputable tutorials or documentation on React Hooks and Context API
Follow the tutorials step-by-step
Experiment with the concepts in personal projects
Document the learning experience and findings

React Workshop on Context API and Redux

Show steps

Attend a workshop to gain hands-on experience with Context API and Redux for React state management

Browse courses on React State Management

Show steps

Register for the workshop
Attend the workshop and participate actively
Implement the learned concepts in your projects

Complete React Context API Exercises

Show steps

Sharpen your skills in using the React Context API by working through exercises.

Browse courses on React State Management

Show steps

Find a set of React Context API exercises.
Choose an exercise and work through it.
Implement the solution in your own React project.
Repeat with different exercises.

React Hooks Discussion and Q&A

Show steps

Engage with peers to discuss and clarify your understanding of React Hooks and their implementation

Browse courses on React Hooks

Show steps

Prepare questions and topics for discussion
Participate actively in the discussion
Share knowledge and experiences with fellow learners

Build a Simple React Application

Show steps

Create a simple React application to apply the concepts learned in the course and demonstrate practical skills.

Browse courses on React Development

Show steps

Plan the application's functionality and design
Code the React components and logic
Style the application using CSS or a CSS framework
Test the application for functionality and responsiveness
Deploy the application to a hosting platform

Participate in React Coding Challenges

Show steps

Engage in peer coding challenges to test and improve React development skills and learn from others' approaches.

Browse courses on React Development

Show steps

Find or create React coding challenges
Form or join a study group or online community
Collaborate on solving the challenges
Review and discuss solutions with peers

Full-Stack React and Node.js Application

Show steps

Challenge yourself by building a comprehensive full-stack application using React and Node.js

Browse courses on MERN Stack

Show steps

Plan and design the application
Implement the React frontend and Node.js backend
Integrate the frontend and backend
Test and deploy the application

Career center

Learners who complete React Front To Back will develop knowledge and skills that may be useful to these careers:

React Developer

React Developers are responsible for designing and developing user interfaces for websites and applications using the React JavaScript library. This course can help you get started in this career by teaching you the fundamentals of React, including how to use React Hooks, which are a new feature in React that make it easier to manage state and side effects. This course also covers advanced topics such as Context API and Redux, which are essential for building complex React applications.

See salaries and explore the career path for React Developer

Full-Stack Developer

Full-Stack Developers are responsible for designing, developing, and maintaining both the front-end and back-end of websites and applications. This course can help you get started in this career by teaching you the fundamentals of React, a popular JavaScript library for building user interfaces. You will also learn how to use React Hooks, which are a new feature in React that make it easier to manage state and side effects. This course also covers the basics of building a full-stack application using Node.js and MongoDB.

See salaries and explore the career path for Full-Stack Developer

Database Administrator

Database Administrators are responsible for managing and maintaining databases. This course can help you get started in this career by teaching you the basics of building a full-stack application using Node.js and MongoDB. You will also learn how to use React, a popular JavaScript library for building user interfaces, to build the front-end of your application. This course may also be helpful for Database Administrators who want to learn more about React and how to use it to build full-stack applications.

See salaries and explore the career path for Database Administrator

Web Developer

Web Developers are responsible for designing, developing, and maintaining websites and applications. This course can help you get started in this career by teaching you the fundamentals of React, a popular JavaScript library for building user interfaces. You will also learn how to use React Hooks, which are a new feature in React that make it easier to manage state and side effects. This course may also be helpful for Web Developers who want to learn about the latest features in React.

See salaries and explore the career path for Web Developer

Front-End Engineer

A Front-End Engineer is a software engineer who specializes in designing and developing the user interface for websites and applications. This course can help you get started in this career by teaching you the fundamentals of React, a popular JavaScript library for building user interfaces. You will also learn how to use React Hooks, which are a new feature in React that make it easier to manage state and side effects. This course may also be helpful for Front-End Engineers who want to learn about the latest features in React.

See salaries and explore the career path for Front-End Engineer

UX Engineer

UX Engineers are responsible for designing and developing the user experience for websites and applications. This course can help you get started in this career by teaching you the fundamentals of React, a popular JavaScript library for building user interfaces. You will also learn how to use React Hooks, which are a new feature in React that make it easier to manage state and side effects. This course may also be helpful for UX Engineers who want to learn more about React and how to use it to build user-friendly interfaces.

See salaries and explore the career path for UX Engineer

Product Manager

Product Managers are responsible for managing the development of products. This course can help you get started in this career by teaching you the basics of building a full-stack application using Node.js and MongoDB. You will also learn how to use React, a popular JavaScript library for building user interfaces, to build the front-end of your application. This course may also be helpful for Product Managers who want to learn more about React and how to use it to build user-friendly and effective products.

See salaries and explore the career path for Product Manager

JavaScript Developer

JavaScript Developers are responsible for designing and developing web applications using the JavaScript programming language. This course can help you get started in this career by teaching you the fundamentals of React, a popular JavaScript library for building user interfaces. You will also learn how to use React Hooks, which are a new feature in React that make it easier to manage state and side effects. This course may also be helpful for JavaScript Developers who want to learn more about React and how to use it to build complex web applications.

See salaries and explore the career path for JavaScript Developer

UI/UX Designer

UI/UX Designers are responsible for designing the look and feel of websites and applications. This course can help you get started in this career by teaching you the fundamentals of React, a popular JavaScript library for building user interfaces. You will also learn how to use React Hooks, which are a new feature in React that make it easier to manage state and side effects. This course may also be helpful for UI/UX Designers who want to learn more about React and how to use it to build visually appealing and user-friendly interfaces.

See salaries and explore the career path for UI/UX Designer

Node.js Developer

Node.js Developers are responsible for designing and developing server-side applications using the Node.js JavaScript runtime environment. This course can help you get started in this career by teaching you the basics of building a full-stack application using Node.js and MongoDB. You will also learn how to use React, a popular JavaScript library for building user interfaces, to build the front-end of your application. This course may also be helpful for Node.js Developers who want to learn more about React and how to use it to build full-stack applications.

See salaries and explore the career path for Node.js Developer

Backend Engineer

Backend Engineers are responsible for designing and developing the server-side of websites and applications. This course can help you get started in this career by teaching you the basics of building a full-stack application using Node.js and MongoDB. You will also learn how to use React, a popular JavaScript library for building user interfaces, to build the front-end of your application. This course may also be helpful for Backend Engineers who want to learn more about React and how to use it to build full-stack applications.

See salaries and explore the career path for Backend Engineer

MongoDB Developer

MongoDB Developers are responsible for designing and developing database applications using the MongoDB NoSQL database. This course can help you get started in this career by teaching you the basics of building a full-stack application using Node.js and MongoDB. You will also learn how to use React, a popular JavaScript library for building user interfaces, to build the front-end of your application. This course may also be helpful for MongoDB Developers who want to learn more about React and how to use it to build full-stack applications.

See salaries and explore the career path for MongoDB Developer

Data Scientist

Data Scientists are responsible for collecting, analyzing, and interpreting data. This course can help you get started in this career by teaching you the basics of building a full-stack application using Node.js and MongoDB. You will also learn how to use React, a popular JavaScript library for building user interfaces, to build the front-end of your application. This course may also be helpful for Data Scientists who want to learn more about React and how to use it to build data-driven applications.

See salaries and explore the career path for Data Scientist

Project Manager

Project Managers are responsible for managing the development of projects. This course can help you get started in this career by teaching you the basics of building a full-stack application using Node.js and MongoDB. You will also learn how to use React, a popular JavaScript library for building user interfaces, to build the front-end of your application. This course may also be helpful for Project Managers who want to learn more about React and how to use it to build successful projects.

See salaries and explore the career path for Project Manager

Software Engineer

Software Engineers are responsible for designing, developing, and maintaining software applications. This course can help you get started in this career by teaching you the fundamentals of React, a popular JavaScript library for building user interfaces. You will also learn how to use React Hooks, which are a new feature in React that make it easier to manage state and side effects. This course may also be helpful for Software Engineers who want to learn about the latest features in React.

See salaries and explore the career path for Software Engineer