React For The Rest Of Us from Udemy

Learn the world's most popular library for creating user interfaces.

What makes this course different is we take the time to understand *why* we're doing what we're doing. We begin by asking an important question that so many other React courses skip entirely; What problem does React solve?

Once we understand what React is and isn't, we spend the remainder of the course together building the front-end for a real world social media app where you can post, follow other users and even hop into a live chatroom. Along the way we will:

Understand what "state" is in React and how to bring our interfaces to life
Use the modern "hook" approach with Function Components
Leverage React Router to create a Single Page Application with shareable URLs
See the power of Context, Reducer, and Immer and create an ideal way of working with state
Run code at the perfect moments by understanding the power of useEffect()
Use async HTTP requests to communicate with APIs so that our app feels meaningful by working with real data
Deploy our app up onto the web so you can share it with your friends and family

This course may be brand new, but this isn’t my first time teaching. I’ve led training sessions for Fortune 500 companies and I’ve already helped over 98,000 people on Udemy and received the following feedback:

"Brad definitely has some of the best techniques to embed the lesson into your mind… hands down these are the best tutorials I have had the opportunity to view."

"Presentation is concise without being tedious… you honestly feel that you have a thorough understanding of the subject."

"…[Brad] explained the process. Not memorize this or that, he explained the process. If you're looking to take a course to understand the foundations of creating websites, look no further."

Become highly valuable and relevant to the companies that are hiring front-end developers; in one convenient place alongside one instructor. If you're ready to begin building with React - I'll see you on the inside.

What's inside

Learning objectives

The problem react solves and *why* we should use it (aside from "because it's popular")
How to create single page applications with react

The ability to keep your code organized and manageable
How to seamlessly pull real and dynamic data into your front-end

The problem react solves and *why* we should use it (aside from "because it's popular")
How to create single page applications with react
The ability to keep your code organized and manageable
How to seamlessly pull real and dynamic data into your front-end

Syllabus

Intro: The 10 Days of React

What Problem Does React Solve?

Let's Start Using React

What Is JSX?

Staying Organized: Components Using Other Components

Using Props To Make a Component Flexible

Looping Through An Array Within JSX

State

Handling Events (Like a Button Click etc...)

Working With Forms

What is UseEffect?

Getting Ready To Create a Real World App

Text Editor

Quick VS Code Settings

Node.js

Setting Up Our Workflow

Important Note About NPM Packages and The Zip Files in This Course

Let's Start Building Our App!

React & Next.js

Starting Our Complex App

Tip: Always Have The Current Year In The Footer

Routing (Single Page Application)

Quick Note About Rendering React Components To The DOM

React Developer Tools

Creating a Visual Studio Code Snippet

Create a Reusable "Container" Component

Quick Details & Composition

Working With a Real Back-End

Choosing The Right Approach For You

Getting a Database Ready

Solution to Common Database Problem

Note About a Common Misspelling

Running The Back-End

Optional Alternative: Simple Docker Back-End

Connecting the Front-End and Back-End

Quick Note About Debugging

Sending a Request From the Front-End

Access Form Field Values with React

Logging In

Render Different Components Depending on State

Persisting State (Local Storage)

Conditional Homepage Content

Create Post Screen

View Single Post Screen

Flash Messages

Leveling Up The Way We Approach State

Context

useReducer

A Powerful Duo: useReducer & Context

What is Immer?

useEffect Practice

Actually Building Our App

Profile Screen

Load Posts by Author

Make Single Post Screen Actually Load The Real Content

Animated Loading Icon

Cleaning Up After Ourselves (useEffect)

Markdown in React

Edit & Delete Post Actions

Adding Tooltips on Hover for Actions

Edit (Update) Post Component

Edit Post Continued

Client-Side Form Validation

Quick Attention To Detail Features

Delete a Post

Search Overlay

Setting Up Search Overlay

React Transition Group (CSS Transition)

Regarding The Index In The Next Lesson

Waiting for User To Stop Typing

Finishing Search (Part 1)

Finishing Search (Part 2)

Letting Users Follow Each Other

Follow User Feature

Profile Followers and Following Tabs

Homepage Post Feed

Building a Live Chat Feature

Live Chat User Interface

Sending & Receiving Chats (Part 1)

Sending & Receiving Chats (Part 2)

Finishing Chat

Registration Form Validation

Improving Registration Form

Finishing Registration Form (Part 1)

Quick Note About If Statement

Finishing Registration Form (Part 2)

Quick Flash Message Details

Proactively Check If Token Has Expired

Getting Ready To Go Live

React Suspense - Lazy Loading (part 1)

React Suspense - Lazy Loading (part 2)

Note About Suspense for Data Fetching

Building a "Dist" Copy of Our Site

React Outside of the Browser (Part 1)

React Outside of the Browser (Part 2)

Two Quick Notes

Pushing Our API Backend Server Up To The Web

Pushing Our React Front-End Up To The Web

Next.js Essentials

Next.js Isn't Scary (Part 1)

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Examines how to build user-friendly interfaces, giving learners an edge in modern web development

Builds a solid background in implementing and using React for front-end development, a foundational skill for the field

Emphasizes not only the technical implementation of React, but also the principles behind its usage, strengthening learners' understanding

Provides hands-on experience through the creation of a real-world social media application, allowing learners to apply their knowledge in a practical setting

Covers essential React concepts such as state management, routing, and API integration, equipping learners with a comprehensive understanding of the library

Taught by an experienced instructor with a strong reputation in the field, ensuring the quality and relevance of the course content

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 For The Rest Of Us with these activities:

React Basics Review

Show steps

Prepare for the course by reviewing the foundational concepts of React.

Show steps

Review the course syllabus and identify the foundational concepts.
Read through React documentation or tutorials to refresh your understanding.
Complete any practice exercises or quizzes to test your knowledge.

React Tutorial

Show steps

Reinforce the concepts of this course by branching out into some React tutorials.

Show steps

Locate a tutorial that aligns with your learning style and interests.
Work through the tutorial at a steady pace, taking notes as you go along.
Complete any exercises or challenges that are included in the tutorial.

Show all two activities

Career center

Learners who complete React For The Rest Of Us will develop knowledge and skills that may be useful to these careers:

React Developer

React Developers specialize in using the React library to create user interfaces for websites and web applications. This course will teach you the core concepts of React, including state management, component lifecycle, and event handling. With this knowledge, you can become a proficient React Developer and create high-quality user experiences.

See salaries and explore the career path for React Developer

Full-Stack Developer

Full-Stack Developers are responsible for both the front-end and back-end of websites and web applications. This course will help you build a strong foundation in React, a key technology for front-end development. With this knowledge, you can combine front-end and back-end skills to create complete web applications.

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

Front-End Developer

As a Front-End Developer, your job is to create and maintain the user interfaces for websites and web applications. This course teaches you the fundamentals of React, a popular JavaScript library for building user interfaces. With this knowledge, you can create dynamic and interactive front-end experiences for users.

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

Web Developer

Web Developers are responsible for the design and development of websites and web applications. This course will help you build a strong foundation in React, a popular JavaScript library for front-end development. With this knowledge, you can create interactive and user-friendly websites and web applications.

See salaries and explore the career path for Web Developer

User Experience (UX) Designer

UX Designers are responsible for the user experience of websites and web applications. This course will help you understand the principles of UX design and how to create user interfaces that are both visually appealing and easy to use. With this knowledge, you can collaborate with Front-End Developers to create websites and web applications that meet the needs of users.

See salaries and explore the career path for User Experience (UX) Designer

Product Manager

Product Managers are responsible for the overall product vision and strategy. This course will help you understand the role of technology in product development and how to work with engineering teams to create successful products. With this knowledge, you can make informed decisions about product features and roadmap.

See salaries and explore the career path for Product Manager

Software Engineer

Software Engineers design, develop, and maintain software systems. This course will help you build a strong foundation in React, a popular JavaScript library for front-end development. With this knowledge, you can use React to build complex and scalable software applications.

See salaries and explore the career path for Software Engineer

Data Scientist

Data Scientists use data to solve business problems. This course will help you understand the fundamentals of data analysis and how to use React to create interactive data visualizations. With this knowledge, you can communicate data insights more effectively and help businesses make better decisions.

See salaries and explore the career path for Data Scientist

Business Analyst

Business Analysts bridge the gap between business and technology. This course will help you understand the role of technology in business and how to use React to create data-driven solutions. With this knowledge, you can help businesses achieve their goals through technology.

See salaries and explore the career path for Business Analyst

Project Manager

Project Managers plan, execute, and close projects. This course will help you understand the principles of project management and how to use React to create project management tools. With this knowledge, you can manage projects more effectively and deliver results on time and within budget.

See salaries and explore the career path for Project Manager

Marketing Manager

Marketing Managers develop and execute marketing campaigns. This course will help you understand the role of technology in marketing and how to use React to create interactive marketing content. With this knowledge, you can reach your target audience more effectively and achieve your marketing goals.

See salaries and explore the career path for Marketing Manager

Sales Manager

Sales Managers lead and motivate sales teams. This course will help you understand the role of technology in sales and how to use React to create data-driven sales tools. With this knowledge, you can empower your sales team to close more deals and achieve their targets.

See salaries and explore the career path for Sales Manager

Customer Success Manager

Customer Success Managers build and maintain relationships with customers. This course will help you understand the role of technology in customer success and how to use React to create customer-facing applications. With this knowledge, you can provide excellent customer service and help customers achieve their goals.

See salaries and explore the career path for Customer Success Manager

Technical Writer

Technical Writers create and maintain technical documentation. This course will help you understand the principles of technical writing and how to use React to create interactive documentation. With this knowledge, you can help users understand complex technical concepts and products.

See salaries and explore the career path for Technical Writer

Teacher

Teachers educate students in various subjects. This course will help you understand the principles of teaching and how to use React to create interactive learning experiences. With this knowledge, you can make learning more engaging and effective for your students.

See salaries and explore the career path for Teacher