Learn Advanced React

Learn Advanced React

本课程是多个项目的一部分。

位教师：Bob Ziroll

访问权限由 New York State Department of Labor 提供

2,551 人已注册

10个模块

深入了解一个主题并学习基础知识。

34 条评论

高级设置等级

面向相关领域的从业人员而设计

2 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

10个模块

深入了解一个主题并学习基础知识。

34 条评论

高级设置等级

面向相关领域的从业人员而设计

2 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

您将获得的技能

要了解的详细信息

可分享的证书

添加到您的领英档案

作业

10 项作业

授课语言：英语（English）

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

积累特定领域的专业知识

此课程作为的一部分提供

在注册此课程时，您还需要选择一个特定的合作项目。

向行业专家学习新概念
获得对主题或工具的基础理解
通过实践项目培养工作相关技能
获得可共享的职业证书

该课程共有10个模块

Elevate your expertise with our Advanced React course. Building upon your foundational knowledge, this course delves into advanced React patterns, internal workings, and the implementation of complex applications using React Router.

Taught by industry veteran Bob Ziroll, who has successfully guided thousands of students towards rewarding careers in front-end development, this course equips you with in-depth React proficiency that stands out in the competitive job market. Why React? As the most sought-after front-end library globally, React not only offers abundant job opportunities but also enhances your overall JavaScript proficiency. Unlike other libraries, React fosters core JavaScript skills, empowering you to master the art of web development. Take your front-end development career to the next level with our Advanced React Development course.

Learn essential concepts such as React children, props manipulation through spreading and destructuring, prop drilling, compound components, context implementation, and accessibility in React components.

涵盖的内容

1个作业34个插件

1个作业总计20分钟

Reusability: Part 1 - Practice Quiz 20分钟

34个插件总计153分钟

Advanced React Intro 5分钟
Welcome to interactive lessons! 1分钟
Button - props review challenge 4分钟
Aside - children in HTML 2分钟
Aside - React Children 2分钟
Challenge - Button w/ Children 2分钟
Button - More Complex React Children 6分钟
Challenge - add onClick event listener 3分钟
Aside - props spreading 3分钟
Aside - Destructuring props 4分钟
Button - size prop 5分钟
Button - fix className issue 7分钟
Challenge - Button w/ Variants 4分钟
Mega Challenge - Overloaded Avatar Component 10分钟
Menu Component Intro 5分钟
Prop Drilling 5分钟
Aside: Compound Components Intro 5分钟
Compound Components in React - Part 1 4分钟
Compound Components Quiz 4分钟
Compound Components in React - Part 2 2分钟
Compound Components in React - Part 3 6分钟
Summarize Challenge - Compound Components in React 1分钟
Prop Drilling Problem #2 - Implicit State 4分钟
The React.Children API 9分钟
React.Children shortcomings 7分钟
Context Intro 3分钟
createContext() & Context Provider 6分钟
useContext() 7分钟
Add context to the Menu component 4分钟
State + Context 7分钟
Theme switcher final touches 2分钟
Menu component final touches 4分钟
A11y in menu component 7分钟
Aside - Compound components w/ dot syntax 3分钟

Explore advanced React techniques, including building toggle components, utilizing refs for DOM manipulation, applying the Render Props pattern, and creating custom hooks for state management.

涵盖的内容

1个作业32个插件

1个作业总计15分钟

Reusability: Part 2 - Practice Quiz 15分钟

32个插件总计143分钟

Headless Toggle component 4分钟
Toggle - setup 5分钟
Toggle - Planning 2分钟
Toggle Context 4分钟
Toggle.Button 7分钟
Toggle.On & Toggle.Off 5分钟
Remove Star component 5分钟
Use Toggle with Menu component 8分钟
Composing new components with Toggle 8分钟
onToggle event listener 7分钟
Menu onClose event 2分钟
Intro to Refs 7分钟
Refs and DOM manipulation 5分钟
Fix onToggle bug using refs 3分钟
Fix missing onToggle bug using a noop function 2分钟
Render Props Part 1 5分钟
Render Props Part 2 8分钟
Render Props Part 3 6分钟
Render Props Part 4 - children as render props 2分钟
Toggle.Display intro 2分钟
Toggle.Display 6分钟
Custom Hooks Intro 2分钟
Custom Hooks - useEffectOnUpdate 8分钟
Custom Hooks - useToggle 5分钟
Custom Hooks - useToggle part 2 3分钟
Custom Hooks - useToggle part 3 3分钟
Custom Hooks - useToggle part 4 3分钟
Custom Hooks - useToggle part 5 3分钟
Custom Hooks - useToggle part 6 5分钟
Custom Hooks - useToggle part 7 2分钟
Custom Hooks - useToggle part 8 4分钟
Custom Hooks - useToggle part 9 2分钟

Reinforce your knowledge with a comprehensive recap. Apply your skills in a solo project and demonstrate your understanding through a graded assignment.

涵盖的内容

1个作业2个插件

Learn the foundational concepts of React Router, including setting up routes, navigation, and deploying a basic single-page application.

涵盖的内容

1个作业18个插件

1个作业总计15分钟

Routing: Part 1 - Practice Quiz 15分钟

18个插件总计78分钟

Introduction to React Router 6 3分钟
Multi-page vs single-page apps 5分钟
React Router Setup & BrowserRouter 3分钟
Routes 3分钟
BrowserRouter & Routes challenge 1分钟
Route, path, & element 4分钟
Quick Re-org 1分钟
Link Component 3分钟
VanLife project bootstrapping 8分钟
Initial Deploy to Netlify 12分钟
Mirage JS Server 2分钟
Challenge: Vans Page - Part 1 2分钟
Challenge: Vans Page - Part 2 9分钟
Route Params - part 1 4分钟
Route Params - part 2 2分钟
Route Params part 3.1 - useParams() & challenge 5分钟
Route Params part 3.2 - useParams() challenge 7分钟
Route Params Quiz 4分钟

Explore advanced React Router techniques, including nested routes, search parameters, dynamic data handling, and optimizing user navigation and experience.

涵盖的内容

1个作业34个插件

1个作业总计15分钟

Routing: Part 2 - Practice Quiz 15分钟

34个插件总计172分钟

Nested Routes Intro 9分钟
Fixing the Navbar with a Layout Route 5分钟
Fixing the Navbar with a Layout Route part 2 8分钟
Bootstrap the Host pages 4分钟
Nesting the /host routes 4分钟
Creating the Host Layout 6分钟
Relative Paths 4分钟
Index Routes 4分钟
To nest or not to nest? 5分钟
Nested Routes Quiz 5分钟
Add Footer 3分钟
NavLink 7分钟
Active Link Styling with NavLink 4分钟
Active Link Styling with NavLink - part 2 5分钟
Adding Host Vans Routes 5分钟
🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages 3分钟
Building out the Host Van Detail page 9分钟
Relative Links 7分钟
Back to all vans 5分钟
Add /host/vans/:id Nested Routes 8分钟
Add the Final Navbar! 7分钟
Outlet Context 6分钟
Search Params Intro 7分钟
useSearchParams 4分钟
Challenge: Set up search params in VanLife 5分钟
Filter the array w/ the search param 5分钟
Challenge: Filter the vans in VanLife 2分钟
Using Links to add search params 3分钟
Challenge: Filter the vans with Links 3分钟
Using the search params setter function 4分钟
Challenge: Filter the vans with a setter function 3分钟
Caveats to setting params 2分钟
Merging search params with Links 6分钟
Merging search params with the setSearchParams function 5分钟

Master authentication and data integration in React Router, focusing on protected routes, user management, and utilizing Cloud Firestore for dynamic data handling.

涵盖的内容

1个作业33个插件

1个作业总计15分钟

Routing: Part 3 - Practice Quiz 15分钟

33个插件总计132分钟

Challenge: Conditional rendering practice 5分钟
Fix remaining absolute paths 2分钟
Back to all vans 2分钟
Link state 6分钟
useLocation 8分钟
Challenge: conditionally render the back button text 3分钟
404 Page 6分钟
"Happy Path" vs. "Sad Path" 3分钟
Quick update to our fetching code 3分钟
Coding the Sad Path - Loading state 3分钟
Coding the Sad Path - Error handling 6分钟
Update: Accessibility Addition 2分钟
Initial Login Form 2分钟
Note from the future: importing image assets in Vite 3分钟
Protected Routes Intro 2分钟
Protected Routes - AuthRequired Layout Route 3分钟
Protected Routes - Implementing "auth" 2分钟
Protected Routes - Navigate 6分钟
VanLife Protected Routes 3分钟
Protected Routes Quiz 2分钟
Navigation State 5分钟
Setup for authentication - happy path 4分钟
Authentication setup - sad path 7分钟
Navigate to /host route after login 2分钟
History Stack and Replace 6分钟
Challenge - send user to original page 8分钟
Placeholders are gone! 🎉 2分钟
Cloud Firestore Setup 🔥 6分钟
Cloud Firestore Code Setup 4分钟
Collection ref and getVans() function 7分钟
Create getVan function 4分钟
Refactor getHostVans function 3分钟
Final loose ends 2分钟

Test your new knowledge with the second Graded Quiz!

涵盖的内容

1个作业1个插件

Learn the foundational concepts of React rendering phases, performance measurement, and code optimization techniques using tools like StrictMode and lazy loading.

涵盖的内容

1个作业7个插件

Explore advanced memoization techniques and learn to optimize React components using useMemo, React.memo, and useCallback to improve performance and efficiency.

涵盖的内容

1个作业11个插件

1个作业总计15分钟

Performance: Part 2 - Practice Quiz 15分钟

11个插件总计67分钟

Code Splitting, lazy, Suspense - Part 1 5分钟
Code Splitting, lazy, Suspense - Part 2 10分钟
useMemo() 7分钟
useMemo() practice 6分钟
React.memo() - reducing rerenders 9分钟
React.memo() practice 3分钟
Value vs. Reference Types & referential equality 5分钟
useMemo(), React.memo(), and referential equality 6分钟
useMemo() practice 2分钟
useCallback() 5分钟
useCallback() practice 9分钟

Test your new knowledge with the final Graded Quiz of the course!

涵盖的内容

1个作业1个插件

获得职业证书

将此证书添加到您的 LinkedIn 个人资料、简历或履历中。在社交媒体和绩效考核中分享。

位教师

授课教师评分

(18个评价)

Bob Ziroll

Scrimba

14 门课程 51,514 名学生

提供方

Scrimba

人们为什么选择 Coursera 来帮助自己实现职业发展

Felipe M.

自 2018开始学习的学生

''能够按照自己的速度和节奏学习课程是一次很棒的经历。只要符合自己的时间表和心情，我就可以学习。'

Jennifer J.

自 2020开始学习的学生

''我直接将从课程中学到的概念和技能应用到一个令人兴奋的新工作项目中。'

Larry W.

自 2021开始学习的学生

''如果我的大学不提供我需要的主题课程，Coursera 便是最好的去处之一。'

Chaitanya A.

''学习不仅仅是在工作中做的更好：它远不止于此。Coursera 让我无限制地学习。'

学生评论

5 stars
79.41%
4 stars
17.64%
3 stars
2.94%
2 stars
0%
1 star
0%

显示 3/34 个

已于 Mar 20, 2025审阅

I found this course interesting and has helped me to gain a lot of skills that I am already using to create some apps. Thanks to Bob for really explaining in detail the different parts of the course

已于 Oct 6, 2025审阅

good i liked this but need some changes sometime providing correct answers then it shows errors

查看更多评论