IIRF Online > Development > Web Development > React JS > React JS Web Development - The Essentials Bootcamp
React JS Web Development - The Essentials Bootcamp by Udemy
Updated for 2022-23: React.js essentials bootcamp - React Core, Router, Redux, Hooks, in-depth JS, + detailed guides!
Course Highlights
- Updated for 2022-2023: Learn how to code with React, Redux, React Hooks, and more from an engineer with 5+ years of industry experience.
- Learn React the right way and learn best practices, from an engineer with 5+ years of industry experience.
- Modern Redux in 2022-2023: modern syntax and best practices.
- Modern React in 2022-2023: createStore, functional components, etc.
- React hooks in 2023-2023 - explore fundamental hooks, and build hooks from scratch.
- Explore the React engine, and learn how it works under the hood to better understand the Virtual DOM, state, props, etc.
- Learn React in 2022-2023 the right way and learn best practices, from an engineer with 5+ years of industry experience.
- Learn how to build applications from scratch, setting up your own react-app-template.
- Create industry-relevant projects that you can use on your portfolio and resume.
- See how React fits in the big picture of web development, with a ton of detailed overviews on what is happening in the browser and the React engine.
- Access 3+ hours of in-depth JavaScript material to hone your JS skills.
Skills you will learn!
Curriculum
4 Topics
What You’ll Get From Taking this Course
A 7m Overview of Web Development and React
Course Repo and Software Installations
Optional For Windows: Install the Windows Subsystem for Linux and VS Code
2 Topics
Optional Mega JavaScript Overview Part 1
Optional Mega JavaScript Overview Part 2
17 Topics
Section Overview | First React Application
Set up the Portfolio App - Revised
Run the React App and the React Project Structure - Revised
ReactDOM Elements and JSX - Revised
A React Component - Revised
Classes - Overview
Classes Inheritance and a Closer Component Look
State
SetState
A React Rule: Never Directly Modify State
Class Properties and Initializers
Component 2: Projects
Props and Project Component
Challenge: Social Profiles Component
Code: Social Profiles Component
Wrap up with Low-Hanging Styling Fruit
Section Summary
7 Topics
Section Overview
React from Scratch - Revised
Compiling Bundling and a Closer Look at JSX - Revised
Refactor the Portfolio to use Parcel - Revised
The Necessity of Bundlers and Transpilers Review
The DOM and React’s Virtual DOM
Section Summary
13 Topics
Section Preview
Lifecycle Methods and componentDidMount
ComponentWillUnmount
[Optional] Title Fade
Stateless Functional Components
[Optional] HTTP Overview
Fetch and a Jokes Component
Challenge and Code: Ten More Jokes
Fetch Under the Hood: Promises
React Router - Revised
Header Component
Higher Order Components - Revised
Section Summary
2 Topics
Core React Review
Core React - Glossary of Key Terms
10 Topics
Section and Project Preview
Set up Music Master and Your Own React App Template - Revised
Track User Input in the State
Challenge and Code: Search an Artist’s Top Tracks
Challenge and Code: Artist Component
Tracks Component
Search Component and Lifting State Up in Callback Props
Styling Finishing Touches
Include Music Master in Portfolio - Revised
Section Summary
26 Topics
Section and Project Preview
Redux Overview
Set Up Evens or Odds and the Redux Store | Revised
Reducers | Revised
Actions | Revised
Action Creators | Revised
Root Reducer Update and the Spread Operator | Revised
Split the Redux Layers | Revised
Connect React Components to Redux | Revised
Redux-based UI
Map Dispatch to Props
Challenge and Code: Interactive Instructions
Fetch Deck of Cards
Note: The deckofcardsapi updated their CORS policy
CORS and Same Origin Policy
Async Actions
Redux Middleware | Revised
Handle Fetch Cases
Split up and Combine Reducers | Revised
DrawCard Component
Challenge and Code: Draw Card Redux Flow
Challenge and Code: Card Component
Challenge and Code: Guess Redux Logic and Component | Revised
Track Correct Guesses
Correct Guess Record and Local Storage
Include Evens or Odds in Portfolio | Revised
7 Topics
Project One Preview
Set Up Project One | Revised
First Hook: useState | Revised
useEffect
Challenge and Code: Stories Component with UseEffect | Revised
Build a Custom Hook: useFetch
[Optional] Function Keyword vs Arrow Functions
12 Topics
Section Preview - Hooks Under the Hood
The React Runtime and How React Applies Hooks
UseState Under the Hood
Tasks Component Part 1: Multiple useState hooks
Tasks Component Part 2
The Order of UseState
Local Storage for Tasks
Hooks with an Interval
Effects with Cleanup
Dynamic Delay and Increment
Challenge and Code: Matrix Component
Build a Custom Hook: useDynamicTransition
18 Topics
The Why of Hooks
Project Two Preview
The Reducer Pattern Overview
Set Up Reaction App
Reactions Reducer State
UseReducer for Tasks | Part 1
UseReducer for Tasks | Part 2
PublishMessage Component
Challenge and Code: MessageBoard Component
UseContext and a Custom Context Hook
The PubSub and Reducer Architecture
Explore PubNub
PubSub Function and Reducer Connection
Set Username
CreateReaction Component
Reactions Reducer flow
Publish Reactions
MessageReactions Component
17 Topics
React Fundamentals and Client vs. Server Components In Depth
Start the Next.js and React Project
Link to Pages with Next/Link | Grid Item
Style with Tailwind CSS
Next.js Fonts and Responsive Design
Connect Page Setup
Next.js Client Components
Next.js Server Actions (get-followers)
Mailjet API post-contact Server Action and Next.js Environment Variables
React 18 useTransition and Create Contact Form
Next.js Layout Structure Loading.js and Global Components
Next.js Dynamic Segments and generateStaticParams | record/[id]
Next.js generateMetadata | record/[id]/page.js
React Suspense and React lazy | Embed
Next.js not-found and Route Groups
Nested Dynamic Segments | record/[id]/[content]
Breadcrumbs Component and Next.js useSelectedLayoutSegments | nav-title
49 Topics
The Console Operators and Variables
Booleans and Conditionals
Syntax - Semicolons and Comments
Undefined and Primitives
Arrays
Objects
Loops and Iteration
Functions - Declarations vs. Expressions
Arrow Functions
Methods and the `this` Keyword
More on `this` and Function Expressions vs. Arrow functions
Interview Question | The `this` Keyword
Callbacks
Interview Question | Callbacks
A Dynamic Language and Types
Almost Everything is an Object
Equality and Type Coercion
Truthy and Falsy
Null vs. Undefined
Explicit Type Conversion
Interview Question | JavaScript Types
Let Const and Mutability
Let Const Var and Scope
Var and Function Hoisting
Interview Question | Scope and Hoisting
Template Literals and Ternary Operators
The Property Shorthand and Destructuring Assignment
Object methods
Spread Syntax
Object.is References and Shallow Clone
JSON.parse JSON.stringify and an Attempt at Deep Cloning
Custom and Lodash CloneDeep
Interview Question | Cloning an Object
Closures
Function Factories
Higher Order Functions
Interview Question | Closures Higher-Order Functions and Callbacks
Object-Oriented Programming
Constructor functions
Classes
Prototypes and the Prototype-Based Inheritance
Object Prototype .__proto__ and the prototype chain
Interview Question | Prototype-Based Inheritance
Asynchronous Code with SetTimeout
Fetch and Promise
Promise from Scratch
JavaScript Engine and Runtime
Await and Async
Interview Question | Asynchronous JavaScript
3 Topics
Congratulations and Course Sequel
Redux Overview [Redux Bootcamp Preview]
Bonus Content!
React JS Web Development - The Essentials Bootcamp
Related React JS Courses
Thank You!
Your review has been submitted successfully.