You should take this course if you want to learn about React Hooks in a time-efficient and thorough way.
What are React Hooks?
React hooks are the largest update to React since its inception.
Hooks are a way for function components to “hook” into React functionality. Previously, when you wanted React components to have state or side effects, you needed to extend the base React Component class. Now, function components need only to apply a hook to gain this functionality.
Should I care about hooks?
Read more
You should take this course if you want to learn about React Hooks in a time-efficient and thorough way.
What are React Hooks?
React hooks are the largest update to React since its inception.
Hooks are a way for function components to “hook” into React functionality. Previously, when you wanted React components to have state or side effects, you needed to extend the base React Component class. Now, function components need only to apply a hook to gain this functionality.
Should I care about hooks?
You should take this course if you want to learn about React Hooks in a time-efficient and thorough way.
What are React Hooks?
React hooks are the largest update to React since its inception.
Hooks are a way for function components to “hook” into React functionality. Previously, when you wanted React components to have state or side effects, you needed to extend the base React Component class. Now, function components need only to apply a hook to gain this functionality.
Should I care about hooks?
As a web and React developer, and software engineer, you should definitely care about React hooks. This feature is the future of React. Since the feature is still so new, learning React hooks will set you apart as a web developer and engineer.
When I first started exploring hooks, I was pleasantly surprised at the simplicity of the API. I was expecting to need a huge mental shift. But as I continued to create new components with hooks, I started to see the power of the new paradigm. If anything, I find React even more elegant than I did before.
In this course, you’ll learn what hooks are, how they work, and why they’re so exciting. Here’s the course journey:
Dive into React hooks right away. You’ll gain relevant experience as soon as the first section. Time is a precious resource. And I want to make sure you feel like you’re spending your time wisely with this course. So in a matter of minutes, you will be writing React hooks code by building an application.
Build an interesting React app to explore hooks. The first project of the course is an application called Home. Home can serve as the home page of your browser. It has a bunch of useful widgets like a custom search bar, a photo gallery, a list of the latest hacker news, and more. It has a variety of use cases that will cover the essentials of React hooks.
Understand coding hurdles with hooks. When learning hooks, like any new technology, it will require a little bit of a mental shift. There’s a few coding hurdles to get through, and this course will show the right way to approach those situations.
Learn how hooks work under the hood. It’s not necessary to deep dive into the React engine to code with hooks. But it’s extremely helpful to explore how React works underneath the surface layer. So this course is going to dig deeper and give you that under the hood perspective of React with hooks.
Explore interesting cases with JavaScript and hooks. Hooks have a simple API. You call them as functions. But their behavior may not always align with your expectations as a JavaScript developer. In this course, you’ll cover a handful of interesting cases that appear when you try to jive hooks with JavaScript functionality.
Look at the big picture and answer the question of why. Why were hooks introduced to React - an already well established framework? Throughout the course, you’ll get the answer in tidbits throughout various videos. In addition, there will be a section completely devoted to answering this more thoroughly.
Build a project to master hooks. The second project in the course is an app called Reaction. This multi-user application allows people to share messages and react to them with emojis. The intent of the project is to give you the chance to both master previous material, and learn more advanced concepts with out of the box hooks.
[2023 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 Hooks in a time-efficient way, while building relevant and engaging projects. Again, even if you only complete the preview content, you’ll walk away with a lot of valuable lessons learned.
See you there.
Promo music provided by Ben Sound.
What's inside
Learning objectives
- Updated for 2022-2023: learn how to code with react js and react hooks from an engineer with 5+ years of industry experience.
- How to code with react hooks: usestate, useeffect, usereducer, usecontext, and more.
- An understanding of why react hooks were introduced.
- A knowledge of how react hooks works under the hood at the react engine and runtime layer.
- A grasp of how react hooks fits the mental model of react better than other patterns.
- How to set up data fetching with the react hooks pattern.
- How to build complete react applications using hooks.
- Updated for 2022-2023: learn how to code with react js and react hooks from an engineer with 5+ years of industry experience.
- How to code with react hooks: usestate, useeffect, usereducer, usecontext, and more.
- An understanding of why react hooks were introduced.
- A knowledge of how react hooks works under the hood at the react engine and runtime layer.
- A grasp of how react hooks fits the mental model of react better than other patterns.
- How to set up data fetching with the react hooks pattern.
- How to build complete react applications using hooks.
Syllabus
Introduction
What You’ll Get From this Course
React Core Concepts Review
Required: Software Installations and Course Repo
Read more
Syllabus
Traffic lights
Save this course
Save
Reviews summary
Comprehensive react hooks & modern web development
Optional modules offer a thorough JavaScript refresher.
Provides deep insight into React's internal workings.
Hands-on projects effectively reinforce learning.
The instructor provides highly clear and concise explanations.
Course is updated with modern React and Next.js.
Activities
Practice Building React Components with Hooks
Show steps
Regularly practice building React components with hooks to enhance your understanding and proficiency in using them.
Show steps
-
Create a new React application using your preferred method (e.g., create-react-app, Vite, etc.).
-
Add the dependencies for React and React Hooks to your project.
-
Create a simple React component and add it to your application.
-
Iterate on your component by adding React Hooks to add state, handle events, and perform other tasks.
Build a React App to Display Real-Time Data
Show steps
Developing a practical application using real-time data will deepen your understanding of how hooks enable interactive and responsive React apps.
Show steps
-
Plan your app and determine the data you want to display.
-
Set up a real-time data source (e.g., using Firebase or Socket.io).
-
Create a React component to fetch and display the data in real-time.
-
Deploy your app and test its functionality.
Create a Custom React Hook for Data Validation
Show steps
By building a custom hook for data validation, you'll gain a comprehensive understanding of how to extend React's functionality for specific needs.
Show steps
-
Identify the data validation requirements for your project.
-
Design the logic for your custom hook.
-
Implement the hook and test its functionality.
-
Integrate the hook into your React components and verify its effectiveness.
Show all three activities
Practice Building React Components with Hooks
Show steps
Regularly practice building React components with hooks to enhance your understanding and proficiency in using them.
Show steps
- Create a new React application using your preferred method (e.g., create-react-app, Vite, etc.).
- Add the dependencies for React and React Hooks to your project.
- Create a simple React component and add it to your application.
- Iterate on your component by adding React Hooks to add state, handle events, and perform other tasks.
Build a React App to Display Real-Time Data
Show steps
Developing a practical application using real-time data will deepen your understanding of how hooks enable interactive and responsive React apps.
Show steps
- Plan your app and determine the data you want to display.
- Set up a real-time data source (e.g., using Firebase or Socket.io).
- Create a React component to fetch and display the data in real-time.
- Deploy your app and test its functionality.
Create a Custom React Hook for Data Validation
Show steps
By building a custom hook for data validation, you'll gain a comprehensive understanding of how to extend React's functionality for specific needs.
Show steps
- Identify the data validation requirements for your project.
- Design the logic for your custom hook.
- Implement the hook and test its functionality.
- Integrate the hook into your React components and verify its effectiveness.
Career center
React Developer
JavaScript Developer
Software Architect
Computer Scientist
UI/UX Designer
Web Developer
Front-End Developer
Technical Writer
Software Engineer
Product Manager
Computer Programmer
Full-Stack Developer
Data Analyst
Business Analyst
Project Manager
Reading list
Save
Save
Save
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
