Essential Bootcamp for React JS Web Development
- Descripción
- Currículum
- Reseñas
Essential Bootcamp
This course is completely up-to-date with React in 2023! A ton of material has been added and revised in this course. In the updated course, you’ll find additional content including:
- New sections on React Hooks.
- A ton of reference content for In-Depth JavaScript walkthroughs.
- Revised material for modern React in 2022: createRoot, root.render, modern React Router, etc.
- Revised material for modern Redux in 2022: @reduxjs/toolkit, updates on best practices, etc.
- Extra Github reference content, including a new commit-per-lecture guide to make sure you can troubleshoot at every step of the way in the course.
Since this course’s release, this has been one of the most popular and best-selling React bootcamps on the platform. Here are the testimonials from a handful of students who have taken the course:
- “This course is great! David is super knowledgeable AND passionate about React and it’s obvious in the course quality. I’ve taken a lot of programming courses on Udemy and David is by far the best instructor I’ve come across!”
- “It is very clear and well explained. He explains every idiom related to the topic theoretically and by examples so you can have a complete idea about what is going on and why you need every file folder. The application examples are explained very clearly so you can follow up with him and get the same result. Also there is a code challenge to try if you want before seeing the answer. The course is well constructed and explained so never miss it especially if you got lost in the folder tree of react app or about its specialization. Highly recommended.”
- “I started with some React concepts in mind and I found this course very useful. Also I am learning practical ways to do things and advance to Redux for more complex apps. I like very much the step by step, simple to complex, and practical style to explain concepts. Also, David is very nice and quickly solves any question.”
- “David is a champ! One of the best course instructors I’ve ever encountered. Not only is his level of knowledge very impressive, but his timing, delivery, and tone create a very easy to follow experience. He’s extremely thorough!”
***
With five minutes of your time, I’ll explain why this course is the best investment of time you can make to learn how to code React apps.
*****
When I was first learning web development and software engineering, I used courses, tutorials, stackoverflow threads, and public github projects. It was invigorating – teaching myself the skills that would start a career. But I often found that tutorials only showed me what methods to use, not why examples were working, or why bugs were popping up. Even when I found a code fix, there was often that missing layer of how the update addressed the problem.
It was a grind, and the learning process could have been more efficient with better resources.
Fast forward five years, and I’m working as a full-stack software engineer at Zendesk in San Francisco. I often think back to those first couple years teaching myself web development.
The resources could have been better, more efficient, giving me not only what to write, but why the fix addresses the issue, and how the code works under the hood.
So that is what I’ve created in this course. A React learning experience that will give you all three of those important aspects to understanding code: what methods to use, why to use those methods, and how those methods work under the hood.
*****
So Why should you take this course?
I’ve applied the best practices of software I’ve learned in my software engineering career, and the feedback from my thousands of reviews in over 15 other coding courses, to craft the best learning experience possible for you in this course. You’ll find a healthy balance of conceptual theory, and practical hands-on experience. You’ll gain skills right from the get-go in the first section. And you’ll build interesting and relevant projects throughout the course.
In this course, you will:
- Dive into React code right away. You will gain relevant experience as soon as the first section. Time is precious. And I want to make sure that you’ll never feel like you’re wasting it in this course. So in a matter of minutes, you will be writing React code in the first section, with a fully completed app by the end of it.
- Understand how React fits in the big picture of web development. In the second section, you will take an important step back and examine how React fits in the big picture of web development. You’ll build a React project from scratch – discovering all the layers that are in between the supplies that support the React app, and the browser which displays the React app.
- Create relevant and compelling React apps. I’m betting you’ll find the apps both useful and interesting. Useful ones like the portfolio app will help you both learn React, and be valuable as a completed project for your software engineering and web developer profile. Fun ones like “Music Master”, will make coding lively, giving you apps you want to show off to your friends and family.
- Dive into React Hooks to learn how to write React apps now and in the future. React hooks, as the new paradigm for React development, are a must in any bootcamp experience on React and frontend web development.
- Optionally explore in-depth JavaScript. At the end of the course, you will find a trove of optional videos that will bring your JavaScript knowledge to the next level.
[2024 Update]
Also, this course contains optional content in Nextjs, React 18, and In-Depth JavaScript. Continue your learning React journey beyond hooks, here in this course!
Nextjs and React 18 are the modern ways to make a React application. In this course, you will also build a production-level Nextjs and React 18 project. During the Nextjs and React 18 project section, you will:
- Go more into depth with server and client components.
- Learn Nextjs server actions.
- Explore the React 18 useTransition hook.
- Expand upon Nextjs fundamentals, and create a shared layout structure.
- Create dynamic segments with Nextjs and learn generateStaticParams.
- Explore React Suspense and React lazy.
- Dive deeper into advanced Nextjs hooks like useSelectedLayoutSegments, and useSearchParams.
- Explore the React 18 useDeferredValue hook.
- Learn how to deploy a Nextjs application.
Then follow with a bounty of In-Depth JavaScript content. During the In-Depth JavaScript section, you will find videos on:
* The Console, Operators, and Variables, Arrays, Objects.
* Functions – Declarations vs. Expressions, and Arrow Functions
* Methods and the `this` Keyword
* Callbacks
* A Dynamic Language and Types – “Almost Everything is an Object”
* Equality and Type Coercion
* Let, Const, Mutability, Var, and Scope
* Interview Question | Scope and Hoisting
* Template Literals and Ternary Operators
* The Property Shorthand and Destructuring Assignment
* JSON parse, JSON stringify, Custom and Lodash CloneDeep
* Closures
* Function Factories, and Higher Order Functions
* Prototypes and the Prototype-Based Inheritance, Object Prototype, __proto__, and the prototype chain
* Asynchronous Code with SetTimeout
* Fetch and Promise from Scratch
* JavaScript Engine and Runtime
* Await and Async
*****
In summary, you should take this course if you want to learn React in a time-efficient way, while building relevant and engaging projects.
See you in the course!
-
1What You’ll Get From Taking this CourseVideo lesson
Overview of the course curriculum, and what you'll learn by taking it.
-
2A 7m Overview of Web Development and ReactVideo lesson
An overarching view of web development, and how React.js fits into that picture.
-
3Course Repo and Software InstallationsText lesson
Provides important information including the course repository, and software installation links.
-
4Optional For Windows: Install the Windows Subsystem for Linux and VS CodeVideo lesson
-
7Section Overview | First React ApplicationVideo lesson
Overview of the first section on creating the first React application.
-
8Set up the Portfolio App - RevisedVideo lesson
Set up the portfolio application - the first project of the course.
-
9Run the React App and the React Project Structure - RevisedVideo lesson
Run the React application set up in the previous video, and go over the project structure.
-
10ReactDOM, Elements, and JSX - RevisedVideo lesson
Understand essential aspects of React, including the ReactDOM, elements, and JSX.
-
11A React Component - RevisedVideo lesson
Create your first React Component. Components are the building blocks of a React application. They can be used to build the whole user interface. And they can have dynamic functionality, that the user can interact with.
-
12Classes - OverviewVideo lesson
An overview of JavaScript classes - a prerequisite for building React components using classes.
-
13Classes, Inheritance, and a Closer Component LookVideo lesson
An exploration of classes, JavaScript class-based inheritance, and an investigation of React.component.
-
14StateVideo lesson
An exploration of React component state: the dynamic data contained within a React component.
-
15SetStateVideo lesson
An introduction to the `setState` method: the way to update state in a React component.
-
16A React Rule: Never Directly Modify StateVideo lesson
An explanation of one of the golden rules of react: never directly modify the state object in the component.
-
17Class Properties and InitializersVideo lesson
Refactor the class to use properties and initializers to follow the best practices of JavaScript.
-
18Component 2: ProjectsVideo lesson
Add a second component to Portfolio project for Projects.
-
19Props and Project ComponentVideo lesson
Explore React component props: the way data is passed from a parent React component to a child React component.
-
20Challenge: Social Profiles ComponentVideo lesson
Take on a challenge to build a new React component for Social Profiles.
-
21Code: Social Profiles ComponentVideo lesson
An implementation of the Social Profiles component - a follow up to the previous challenge to build this component.
-
22Wrap up with Low-Hanging Styling FruitVideo lesson
Wrap up the Portfolio project by following up on some low hanging fruit to clean up the code.
-
23Section SummaryText lesson
-
24Section OverviewVideo lesson
-
25React from Scratch - RevisedVideo lesson
Explore React more thoroughly from a truly ground 0 "from scratch" perspective.
-
26Compiling, Bundling, and a Closer Look at JSX - RevisedVideo lesson
Understand compiling and bundling JavaScript code for React projects. Investigate JSX more deeply.
-
27Refactor the Portfolio to use Parcel - RevisedVideo lesson
Refactor the Portfolio project to use the Parcel build tool to accomplish bundling.
-
28The Necessity of Bundlers and Transpilers ReviewVideo lesson
Understand the reasons why bundlers and transpilers for JavaScript and React applications are necessary.
-
29The DOM and React’s Virtual DOMVideo lesson
Go over the JavaScript raw DOM API for the browser. Understand how React creates its own virtual DOM as an internal representation of the raw DOM. Learn how the virtual DOM aids React applications to update their UI in a very efficient way.
-
30Section SummaryText lesson
-
31Section PreviewVideo lesson
-
32Lifecycle Methods and componentDidMountVideo lesson
Understand lifecycle methods and their purpose, starting with componentDidMount.
-
33ComponentWillUnmountVideo lesson
Continue the exploration of lifecycle methods with componentWillUnmount.
-
34[Optional] Title FadeVideo lesson
Optionally fade the title of the Portfolio application.
-
35Stateless Functional ComponentsVideo lesson
Learn an alternative way to define React components with the stateless functional style.
-
36[Optional] HTTP OverviewVideo lesson
Optionally do a high-level overview of HTTP in order to understand how the protocol works. Learn how it's used for APIs and to request resources in the web.
-
37Fetch and a Jokes ComponentVideo lesson
Make a fetch call within a React application to an external API to power the data behind a new component around Jokes.
-
38Challenge and Code: Ten More JokesVideo lesson
Take on a challenge to display ten jokes within the Jokes component.
-
39Fetch Under the Hood: PromisesVideo lesson
Explore the fetch method under the hood, by diving into JavaScript promises.
-
40React Router - RevisedVideo lesson
Add React Router to the project: a library which takes care of navigating the user to different components based on the url.
-
41Header ComponentVideo lesson
Add a reusable Header component to the project.
-
42Higher Order Components - RevisedVideo lesson
Go over React higher-order components: components that take other React components as input, and output new React components with more logic, as a result.
-
43Section SummaryText lesson
-
46Section and Project PreviewVideo lesson
-
47Set up Music Master and Your Own React App Template - RevisedVideo lesson
Set up the music master application - the next project of the course!
-
48Track User Input in the StateVideo lesson
Track the input of a user within fields in the state object of the React component.
-
49Challenge and Code: Search an Artist’s Top TracksVideo lesson
Take on a challenge to search on artist's top tracks, and display them in the application.
-
50Challenge and Code: Artist ComponentVideo lesson
Take on a challenge to build an Artist component for the MusicMaster project.
-
51Tracks ComponentVideo lesson
Build a Tracks component for the MusicMaster project.
-
52Search Component and Lifting State Up in Callback PropsVideo lesson
Create a Search component for the MusicMaster project, and learn about the approach of lifting state up through components in a React application.
-
53Styling Finishing TouchesVideo lesson
Apply finishing touches around style to MusicMaster.
-
54Include Music Master in Portfolio - RevisedVideo lesson
Add MusicMaster to the Portfolio project.
-
55Section SummaryText lesson
-
56Section and Project PreviewVideo lesson
-
57Redux OverviewVideo lesson
-
58Set Up Evens or Odds and the Redux Store | RevisedVideo lesson
-
59Reducers | RevisedVideo lesson
-
60Actions | RevisedVideo lesson
-
61Action Creators | RevisedVideo lesson
-
62Root Reducer Update and the Spread Operator | RevisedVideo lesson
-
63Split the Redux Layers | RevisedVideo lesson
-
64Connect React Components to Redux | RevisedVideo lesson
-
65Redux-based UIVideo lesson
-
66Map Dispatch to PropsVideo lesson
-
67Challenge and Code: Interactive InstructionsVideo lesson
-
68Fetch Deck of CardsVideo lesson
-
69Note: The deckofcardsapi updated their CORS policyText lesson
-
70CORS and Same Origin PolicyVideo lesson
-
71Async ActionsVideo lesson
-
72Redux Middleware | RevisedVideo lesson
-
73Handle Fetch CasesVideo lesson
-
74Split up and Combine Reducers | RevisedVideo lesson
-
75DrawCard ComponentVideo lesson
-
76Challenge and Code: Draw Card Redux FlowVideo lesson
-
77Challenge and Code: Card ComponentVideo lesson
-
78Challenge and Code: Guess Redux Logic and Component | RevisedVideo lesson
-
79Track Correct GuessesVideo lesson
-
80Correct Guess Record and Local StorageVideo lesson
-
81Include Evens or Odds in Portfolio | RevisedVideo lesson
-
82Project One PreviewVideo lesson
-
83Set Up Project One | RevisedVideo lesson
-
84First Hook: useState | RevisedVideo lesson
-
85useEffectVideo lesson
-
86Challenge and Code: Stories Component with UseEffect | RevisedVideo lesson
-
87Build a Custom Hook: useFetchVideo lesson
-
88[Optional] Function Keyword vs Arrow FunctionsVideo lesson
