The Modern React Bootcamp (Hooks, Context, NextJS, Router) from Udemy

EXPANDED and UPDATED to include new sections on Next JS and Server-Side Rendering.

Welcome to the best online resource for learning React. Published in April 2019, this course is brand new and covers the latest in React. This course follows the exact same React curriculum my in-person bootcamp students follow in San Francisco, where students have gone on to get jobs at places like Google, Apple, Pinterest, & Linkedin. This is the most polished React course online, and it's the only course that is based on REAL bootcamp curriculum that has been tried and tested in the classroom.

This course builds up concepts one at a time, cementing each new topic with an expertly designed exercise or project to test your knowledge. It includes a huge variety of beautiful exercises, projects, and games that we create together from scratch. Sometimes we mix things up and give you a broken React app and ask you to fix it or optimize the code. Check out the promo video to see a couple of the course exercises. The course culminates in one huge capstone project, which is the largest project I've ever built for any of my online courses. I'm really excited about it :)

React is the most popular JS library around, and there's never been a better time to learn it. Companies all over the world are turning to React to help manage their JavaScript chaos, including tech giants like Facebook, Airbnb, and Uber. React is consistently voted the most loved and most wanted front-end framework by developers, and it's clear why. React is a joy to use, and it makes writing maintainable and modular JavaScript code a breeze.

If you're new to frameworks, React is the ideal first framework to learn. It's easy enough to learn the basics, but it doesn't teach you bad habits. Even if you've already enrolled in another React course, this course is worth your time for the exercises and projects alone. This curriculum is the product of two years of development and iteration in the bootcamp classroom. All the lectures, exercises, and projects have been tweaked and improved based on real student feedback. You won't find anything else online as structured and polished as this course.

The highlights:

Learn React, from the very basics up to advanced topics like Next JS, React Router, Higher Order Components and Hooks and the Context API.
Build one massive capstone application, complete with drag & drop, animations, route transitions, complex form validations, and more.
Learn the latest in React, including Hooks (my favorite part of React. ). We build a complete app using Hooks, including multiple custom hooks.
Learn state management using the useContext and useReducer hooks, to mimic some of the functionality of Redux.
You get tons of detailed handouts and cheatsheets that you can refer back to whenever you need to. Think of this as a React textbook you can study at any point if you get tired of videos.

What you get:

250+ videos
Slick, interactive slide decks custom made for each section
Detailed handouts and cheatsheets, the React "textbook".
Dozens of exercises, projects, and quizzes.
One massive code-along project with nearly 20 different React components.
Free Webpack Mini Course.

What's inside

Learning objectives

React hooks! (my favorite part of react!)
The new context api
State management w/ usereducer + use context (redux lite)
The basics of react (props, state, etc)
Master react router
Build tons of projects, each with a beautiful interface
React state management patterns
Drag & drop with react
Writing dynamically styled components w/ jss
Common react router patterns
Work with tons of libraries and tools
Integrate ui libraries like material ui and bootstrap into your react apps
React design patterns and strategies

Learn the ins and outs of jss!
Learn how to easily use react to build responsive apps
Add complex animations to react projects
Debug and fix buggy react code
Optimize react components
Integrate react with apis
Learn the basics of webpack in a free mini-course!
Dom events in react
Forms and complex validations in react
Using context api w/ hooks
Show more
Show less

React hooks! (my favorite part of react!)
The new context api
State management w/ usereducer + use context (redux lite)
The basics of react (props, state, etc)
Master react router
Build tons of projects, each with a beautiful interface
React state management patterns
Drag & drop with react
Writing dynamically styled components w/ jss
Common react router patterns
Work with tons of libraries and tools
Integrate ui libraries like material ui and bootstrap into your react apps
React design patterns and strategies
Learn the ins and outs of jss!
Learn how to easily use react to build responsive apps
Add complex animations to react projects
Debug and fix buggy react code
Optimize react components
Integrate react with apis
Learn the basics of webpack in a free mini-course!
Dom events in react
Forms and complex validations in react
Using context api w/ hooks
Show more
Show less

Syllabus

A Taste of React

Welcome to the Course!

Join The Community!

Intro to React

Is React a Framework or Library?

Introducing Components!

Looking at a Large App

Setting Up Your Server

Writing Our First Component

Function Vs. Class Components

Download All Code, Slides, & Handouts

Introducing JSX

Basics Rules of JSX

How JSX Works Behind the Scenes

Embedding JavaScript in JSX

Conditionals in JSX

Standard React App Layout

Props and More

Intro to React Props

Props are Immutable?

Other Types of Props

Pie Chart Component Demo w/ Props

EXERCISE: Slot Machine

EXERCISE: Slot Machine Solution

Looping in JSX

Adding Default Props

Styling React

Introducing Create React App

Intro to Create React App

2 Ways of Installing CRA

Creating a New App

Starting Up the Server

Modules: Import & Export Crash Course

EXERICSE: Fruits Modules

EXERCISE: Fruits Modules Solution

Create React App Conventions

CSS and Assets in Create React App

Pokedex Project

Intro To Pokedex Exercise

Creating Pokecard Component

Adding Pokedex Component

Styling PokeCard and Pokedex

Adding Fancier Images

The PokeGame Component

Styling Pokegame

Introducing State

State Goals

Quick Detour: React Dev Tools

State in General

Initializing State

IMPORTANT! ALTERNATE SYNTAX

WTF is super() Vs. super(props)

Setting State Correctly

Crash Course: Click Events in React

ALTERNATE SYNTAX PT 2

EXERCISE: State Clicker

EXERCISE: State Clicker Solution

The "State As Props" Design Pattern

React State Dice Exercise

Introduction to Dice Exercise

Writing the Die Component

Adding the RollDice Component

Styling RollDice

Animating Dice Rolls!

React State Patterns

Updating Existing State

Mutating State the Safe Way

Designing State: Minimizing State

Designing State: Downward Data Flow

State Design Example: Lottery

State Design Example: LottoBall Component

State Design Example: Lottery Component

State Exercises!

State Exercise 1: Coin Flipper

State Exercise 1: Coin Flipper Solution

State Exercise 2: Color Boxes

State Exercise 2: Color Boxes Solution

The World of React Events

Commonly Used React Events

The Joys of Method Binding :(

Alternative Binding With Class Properties

Binding With Arguments

Passing Methods to Child Components

Parent-Child Method Naming

Quick Detour: React Keys

Hangman Exercise

Introducing The Hangman Exercise

Starter Code Walkthrough

Adding Keys

Tracking Incorrect Guesses

Adding Game Over

Adding Alt Text

Randomizing Words

Adding a Reset Button

Making the Game Winnable & Styling

Lights Out Game

Introducing Lights Out

Exploring the Starter Code

Displaying the Game Board

Flipping Cells

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Examines the standard of the React library in industry and academia

Teaches React, which is vital in managing JavaScript in companies worldwide

Develops React's latest feature, Hooks, a favorite of the instructor

Taught by Colt Steele, recognized for their work in React bootcamps with successful outcomes

Builds a strong foundation in React, suitable for beginners and those seeking to strengthen their React knowledge

Covers relevant skills in React development, making it suitable for both industry and personal growth

Reviews summary

Highly-rated, well-structured modern react course

Learners say that this well-structured course is great for upgrading React skills and even landing jobs. Instruction is cited as excellent, with students calling the instructor one of the best they've had.

My React skills definitely improved.

The course is well-structured and easy to follow.

Colt is an exceptional instructor.

"Colt is definitely one heck of an instructor."

I got a job offer after taking this course.

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 The Modern React Bootcamp (Hooks, Context, NextJS, Router) with these activities:

Review of JavaScript fundamentals

Show steps

Reinforce your understanding of JavaScript fundamentals to enhance your React learning.

Browse courses on JavaScript

Show steps

Go through notes or tutorials on JavaScript basics.
Practice writing simple JavaScript functions and objects.

Connect with experienced React developers

Show steps

Seek guidance and support from experienced React developers to accelerate your learning.

Show steps

Attend meetups or online events related to React.
Reach out to people on LinkedIn or other platforms.
Ask for introductions or recommendations.

React documentation exploration

Show steps

Deepen your understanding of React concepts by exploring the official documentation.

Show steps

Navigate to the React documentation website.
Browse through the different sections and tutorials.
Select a topic that interests you or aligns with your learning objectives.
Read the documentation carefully and try out the provided examples.
Experiment with different React features and components.

Five other activities

Expand to see all activities and additional details

Show all eight activities

React component building challenge

Show steps

Test your ability to build and style React components with a dedicated challenge.

Show steps

Identify a specific component to build, such as a navigation bar or a button.
Set up a new React project or use a sandbox environment.
Start coding the component, focusing on functionality first.
Style the component using CSS or a CSS-in-JS library.
Test the component in different scenarios and make necessary adjustments.

React workshop or hackathon

Show steps

Participate in a workshop or hackathon to enhance your practical skills and connect with other React enthusiasts.

Show steps

Identify a suitable React workshop or hackathon.
Register and prepare for the event.
Attend the event and actively participate.
Collaborate with others and learn from different perspectives.

Code challenges

Show steps

Improve your understanding of React concepts by completing practice challenges.

Show steps

Identify a coding challenge website or platform.
Select a challenge that aligns with your current learning objectives.
Attempt the challenge and debug your code.
Review solutions and identify areas for improvement.

Blog post or article writing

Show steps

Solidify your knowledge of React by writing a blog post or article that explains a specific concept.

Show steps

Choose a React topic that you are comfortable with.
Research and gather information to support your writing.
Create an outline for your blog post or article.
Write the content, ensuring clarity and accuracy.
Edit and proofread your writing.

React portfolio project

Show steps

Demonstrate your proficiency in React by building a portfolio project that showcases your skills.

Show steps

Ideate and design your portfolio project.
Set up a React project and start coding.
Build the core functionality of your project.
Add styling and polish to your project.
Test and deploy your project.

Career center

Learners who complete The Modern React Bootcamp (Hooks, Context, NextJS, Router) will develop knowledge and skills that may be useful to these careers:

React Developer

React Developers specialize in using the React library to build user interfaces for web applications. This course is designed to help you master React, including its core concepts, advanced features, and best practices. You will learn how to create reusable and maintainable React components, manage state effectively, and optimize the performance of your React applications. By honing your skills in React, you will be well-equipped to develop engaging and efficient user interfaces that meet the needs of users.

See salaries and explore the career path for React Developer

Front-End Developer

Front-End Developers are responsible for designing and implementing the user interface of websites and web applications. This course is tailored to provide you with the essential skills for this role. You will gain expertise in React, a powerful library for building responsive and interactive user interfaces. By mastering React's core concepts, advanced features, and best practices, you will be equipped to create visually appealing and engaging front-end experiences that meet user needs and enhance the overall user experience.

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

Software Engineer

As a Software Engineer, you will play a crucial role in the design, development, and maintenance of software systems. This course can help you build a strong foundation in React, one of the most popular JavaScript libraries used for building interactive user interfaces. By gaining proficiency in React, including its advanced features like Hooks and the Context API, you will be well-equipped to create dynamic and engaging web applications. Additionally, the course's emphasis on code reusability and performance optimization will provide you with valuable skills for developing efficient and maintainable software solutions.

See salaries and explore the career path for Software Engineer

User Interface (UI) Developer

UI Developers focus on designing and developing the visual elements of user interfaces for websites and applications. This course can provide you with the necessary skills to excel in this role. You will gain expertise in React, a powerful JavaScript library for building interactive and responsive user interfaces. By mastering React's core concepts, advanced features, and best practices, you will be able to create visually appealing and engaging user experiences that enhance the overall user satisfaction.

See salaries and explore the career path for User Interface (UI) Developer

Web Developer

Web Developers are responsible for the development and maintenance of websites and web applications. This course can provide you with a strong foundation in React, a widely used JavaScript library for building interactive user interfaces. By becoming proficient in React, including its advanced features like Hooks and the Context API, you will be able to create dynamic and engaging web applications. Additionally, the course's coverage of state management patterns and performance optimization will equip you with the skills necessary to develop robust and scalable web solutions.

See salaries and explore the career path for Web Developer

JavaScript Developer

JavaScript Developers specialize in developing web applications using JavaScript. This course can help you enhance your JavaScript skills, particularly in the context of building user interfaces. You will gain proficiency in React, a popular JavaScript library for creating interactive and responsive user interfaces. By mastering React's core concepts, advanced features, and best practices, you will be well-equipped to develop robust and engaging web applications that meet the needs of users.

See salaries and explore the career path for JavaScript Developer

Web Designer

Web Designers are responsible for the visual design and layout of websites and web applications. This course can provide you with valuable skills that complement your design expertise. You will gain proficiency in React, a popular JavaScript library for building interactive and responsive user interfaces. By mastering React's core concepts and best practices, you will be able to create visually appealing and engaging user interfaces that enhance the overall user experience and bring your designs to life.

See salaries and explore the career path for Web Designer

Full-Stack Developer

Full-Stack Developers are responsible for both the front-end and back-end development of web applications. This course can provide you with a solid foundation in React, a powerful JavaScript library for building user interfaces. By gaining proficiency in React, including its advanced features like Hooks and the Context API, you will be able to create dynamic and engaging front-end experiences. Additionally, the course's coverage of state management patterns and performance optimization will equip you with the skills necessary to develop robust and scalable web solutions.

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

UI/UX Designer

UI/UX Designers focus on designing the user experience and interface of websites and applications. This course can provide you with valuable skills that complement your design expertise. You will gain proficiency in React, a popular JavaScript library for building interactive and responsive user interfaces. By mastering React's core concepts and best practices, you will be able to create visually appealing and engaging user experiences that enhance the overall user experience and bring your designs to life.

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

Quality Assurance (QA) Engineer

QA Engineers are responsible for ensuring the quality and reliability of software products. This course can provide you with valuable skills to complement your testing expertise. You will gain proficiency in React, a popular JavaScript library for building user interfaces. By understanding the core concepts, advanced features, and best practices of React, you will be better equipped to evaluate the functionality, performance, and user experience of React-based web applications.

See salaries and explore the career path for Quality Assurance (QA) Engineer

Product Manager

Product Managers are responsible for the planning, development, and launch of software products. This course can provide you with valuable insights into the development process, particularly in the context of React, a widely used JavaScript library for building user interfaces. By understanding the core concepts, advanced features, and best practices of React, you will be better equipped to communicate with engineering teams, evaluate technical feasibility, and make informed decisions that drive product success.

See salaries and explore the career path for Product Manager

Project Manager

Project Managers are responsible for planning, executing, and delivering software projects. This course can provide you with valuable insights into the development process, particularly in the context of React, a widely used JavaScript library for building user interfaces. By understanding the core concepts, advanced features, and best practices of React, you will be better equipped to manage React-based projects effectively, communicate with engineering teams, and ensure the successful delivery of high-quality software products.

See salaries and explore the career path for Project Manager

Technical Writer

Technical Writers are responsible for creating documentation and other written materials that explain technical concepts and products. This course can provide you with valuable insights into the development process, particularly in the context of React, a widely used JavaScript library for building user interfaces. By understanding the core concepts, advanced features, and best practices of React, you will be better equipped to create accurate and informative technical documentation that supports users and contributes to the success of React-based products.

See salaries and explore the career path for Technical Writer

Business Analyst

Business Analysts are responsible for understanding and analyzing business requirements and translating them into technical specifications. This course can provide you with valuable insights into the development process, particularly in the context of React, a widely used JavaScript library for building user interfaces. By understanding the core concepts, advanced features, and best practices of React, you will be better equipped to collaborate with engineering teams, elicit and document user requirements, and ensure that React-based software solutions align with business objectives.

See salaries and explore the career path for Business Analyst

Scrum Master

Scrum Masters are responsible for facilitating and guiding Scrum teams through the agile development process. This course can provide you with valuable insights into the development process, particularly in the context of React, a widely used JavaScript library for building user interfaces. By understanding the core concepts, advanced features, and best practices of React, you will be better equipped to support React-based development teams, facilitate effective sprint planning and retrospectives, and ensure the team's adherence to Scrum principles and practices.

See salaries and explore the career path for Scrum Master