We may earn an affiliate commission when you visit our partners.
Peter Kellner
This course will teach you how to build React apps that use components in the best possible way while minimizing computer resources and maximizing browser UI experience.
Read more
This course will teach you how to build React apps that use components in the best possible way while minimizing computer resources and maximizing browser UI experience.
Read more
This course will teach you how to build React apps that use components in the best possible way while minimizing computer resources and maximizing browser UI experience.
Creating UIs in React is all about creating independent components that seamlessly work together to present a consistent view across your React web app. In this course, Working with Components in React 18, you will gain the ability to architect and build high quality react apps. First, you will explore the various primitive methods for sharing props and state between components, as well as sharing data more globally with the Context API. Next, you’ll learn how to best handle errors in React components to make sure your users continue to have a great experience with your apps. Finally, you will discover how you can improve your app performance through minimizing over-rendering and other UI improvements. When you are finished with this course, you will have the skills and knowledge of React component design needed to leverage re-usability and ensure consistency in your apps and code with fewer bugs.
This course is no longer available. Find something similar by browsing:
React
React Components
Server-Side Rendering
Context API
Error Handling
Performance Optimization
Component Design Patterns
Register for this course and see more details by visiting:
OpenCourser.com/course/ge79x8/working
What's inside
Syllabus
Course Overview
Implementing Components in React Apps
Exploring Our React Application
Global State Sharing and React Context
Read more
Syllabus
Course Overview
Implementing Components in React Apps
Exploring Our React Application
Global State Sharing and React Context
Read more
Traffic lights
Traffic lights
Read about what's good
what should give you pause and
possible dealbreakers
Develops methods and tools for building React applications with reusable components and high performance UIs
Taught by Peter Kellner, an experienced instructor in React and web development
Suitable for intermediate learners with basic experience in React
Provides hands-on practice through implementing components in a React application
Covers error handling and debugging techniques for React components
Requires learners to have a basic understanding of React concepts
Save this course
Create your own learning path.
Save this course to your list so you can find it easily later.
Save
Save
Reviews summary
Building high-quality react 18 components
According to learners, this course is a highly valuable resource for mastering React 18 component design. Students particularly praise its comprehensive coverage of advanced topics, including the Context API for global state sharing, effective error handling with Error Boundaries, and crucial performance optimization techniques like minimizing over-rendering. Many find the instructor's explanations to be clear and concise, making complex concepts digestible. While early feedback suggested the introduction to Server Components could be more in-depth, recent reviews indicate a deep dive into these topics, making it ideal for professional developers seeking to elevate their skills.
Initial feedback on Server Components has improved.
"The deep dive into Server Components... are invaluable. A definite 5/5!"
"I felt the Server Components introduction was a bit too brief and could use more practical examples or a deeper dive..."
"The explanation of Server Components seemed a bit introductory, and I was hoping for more practical implementation details."
Instructor provides clear, concise explanations.
"The instructor explains complex concepts with incredible clarity. I particularly appreciated the modules on Context API..."
"The instructor's explanations were concise, and the hands-on demos made complex topics easy to grasp."
"The instructor's explanations are clear and concise."
"The instructor's teaching style is engaging, making complex topics digestible."
Strong focus on UI performance and error management.
"The practical tips for performance optimization, especially minimizing over-rendering, are invaluable."
"Finally, a course that dives deep into error boundaries... The debugging section was particularly helpful."
"The emphasis on minimizing over-rendering and efficient state management was particularly useful."
"The modules on performance optimization and error boundaries were eye-opening."
Covers essential to advanced React 18 component topics.
"This course is a game-changer for anyone serious about React 18. The deep dive into Server Components... and the practical tips for performance optimization... are invaluable."
"Absolutely fantastic course! It covers all the essential aspects of working with components in React 18, from the basics... to more advanced topics..."
"What a comprehensive guide! From basic component implementation to advanced patterns like HOCs and global state sharing, everything is covered thoroughly."
"This course provided me with a robust framework for building scalable React components. The focus on best practices really shines through."
Pace can be inconsistent; some found prior knowledge assumed.
"While the topics are relevant, I felt this course assumed too much prior knowledge for an 'exploring' level."
"The course has some good information... but I found the pace uneven. Some parts felt rushed, while others dragged."
"I struggled to keep up with some of the more advanced concepts without more detailed foundational explanations."
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 Working with Components in React 18 with these
activities:
Seek guidance from experienced React developers
Show steps
Connect with experienced React developers who can provide personalized guidance and support throughout your learning journey.
Show steps
-
Identify potential mentors
-
Reach out and introduce yourself
-
Schedule regular meetings
-
Seek feedback and advice
Review JavaScript fundamentals
Show steps
Review the fundamentals of JavaScript, including syntax, data types, control flow, and functions, to strengthen your understanding of React.
Show steps
-
Go through JavaScript tutorials
-
Practice writing JavaScript code
-
Review JavaScript documentation
Attend React meetups
Show steps
Attend meetups or online events related to React to connect with other developers and learn about the latest trends.
Show steps
-
Find React meetups in your area
-
Attend the meetups
-
Network with other developers
Five other activities
Expand to see all activities and additional details
Show all eight activities
Create an interactive React app
Show steps
Create a React app that demonstrates the concepts covered in the course, such as component architecture, state management, and lifecycle methods.
Show steps
-
Choose a project idea
-
Plan the app architecture
-
Build the React components
-
Implement state management
-
Test the app and iterate
Code challenges
Show steps
Solve coding challenges that focus on specific concepts covered in the course, such as component lifecycle methods, state management, and performance optimization.
Show steps
-
Find coding challenges
-
Solve the challenges
-
Review the solutions
Write a blog post about React best practices
Show steps
Share your knowledge by writing a blog post about best practices for developing React applications, covering topics such as component design, state management, and performance optimization.
Show steps
-
Choose a topic
-
Research and write the content
-
Edit and finalize the post
-
Publish the post
React application portfolio
Show steps
Develop a portfolio of React applications that showcase your skills and knowledge gained from the course.
Show steps
-
Plan the portfolio
-
Build multiple React applications
-
Write documentation for each application
-
Present the portfolio
Build a React e-commerce website
Show steps
Develop a fully functional e-commerce website using React, covering aspects such as product management, shopping cart, and checkout.
Show steps
-
Plan the website architecture
-
Build the React components
-
Implement state management
-
Add e-commerce functionality
-
Test and deploy the website
Seek guidance from experienced React developers
Show steps
Connect with experienced React developers who can provide personalized guidance and support throughout your learning journey.
Show steps
Show steps
Show steps
- Identify potential mentors
- Reach out and introduce yourself
- Schedule regular meetings
- Seek feedback and advice
Review JavaScript fundamentals
Show steps
Review the fundamentals of JavaScript, including syntax, data types, control flow, and functions, to strengthen your understanding of React.
Show steps
Show steps
Show steps
- Go through JavaScript tutorials
- Practice writing JavaScript code
- Review JavaScript documentation
Attend React meetups
Show steps
Attend meetups or online events related to React to connect with other developers and learn about the latest trends.
Show steps
Show steps
Show steps
- Find React meetups in your area
- Attend the meetups
- Network with other developers
Five other activities
Expand to see all activities and additional details
Show all eight activities
Create an interactive React app
Show steps
Create a React app that demonstrates the concepts covered in the course, such as component architecture, state management, and lifecycle methods.
Show steps
Show steps
Show steps
- Choose a project idea
- Plan the app architecture
- Build the React components
- Implement state management
- Test the app and iterate
Code challenges
Show steps
Solve coding challenges that focus on specific concepts covered in the course, such as component lifecycle methods, state management, and performance optimization.
Show steps
Show steps
Show steps
- Find coding challenges
- Solve the challenges
- Review the solutions
Write a blog post about React best practices
Show steps
Share your knowledge by writing a blog post about best practices for developing React applications, covering topics such as component design, state management, and performance optimization.
Show steps
Show steps
Show steps
- Choose a topic
- Research and write the content
- Edit and finalize the post
- Publish the post
React application portfolio
Show steps
Develop a portfolio of React applications that showcase your skills and knowledge gained from the course.
Show steps
Show steps
Show steps
- Plan the portfolio
- Build multiple React applications
- Write documentation for each application
- Present the portfolio
Build a React e-commerce website
Show steps
Develop a fully functional e-commerce website using React, covering aspects such as product management, shopping cart, and checkout.
Show steps
Show steps
Show steps
- Plan the website architecture
- Build the React components
- Implement state management
- Add e-commerce functionality
- Test and deploy the website
Career center
Learners who complete Working with Components in React 18 will develop knowledge and skills
that may be useful to these careers:
Front-End Engineer
Front-End Engineer
Front-End Engineers design and build the interfaces users see when they interact with software on mobile, desktop, and web platforms. As a Front-End Engineer, you will need to master the languages that are used to create these interactive platforms, such as HTML, CSS, and JavaScript. To further specialize as a React Front-End Engineer, you can take courses such as "Working with Components in React 18." This course will teach you how to create components that can be reused throughout your applications, improving the quality of your code and the speed of your development process.
Full Stack Engineer
Full Stack Engineer
Full-Stack Engineers have the ability to work with both the front end and back end of an application. This requires a strong understanding of both the frontend and backend languages and technologies. Full-Stack Engineers must be comfortable interfacing with the server, databases, and the frontend of an application to ensure that the application is functioning correctly. While courses like "Working with Components in React 18" are designed for frontend developers, the course does help developers understand how to implement backend components. This knowledge is essential for moving into a fullstack role.
Software Engineer
Software Engineer
Software Engineers design, build, and test software applications. They use their knowledge of programming languages and software engineering principles to create software that meets the needs of users. Software Engineers who specialize in frontend development can take courses such as "Working with Components in React 18" to learn how to create high-quality, reusable components.
React Developer
React Developer
React Developers are responsible for building and maintaining React applications. They use their knowledge of React and JavaScript to create interactive and responsive user interfaces. "Working with Components in React 18" is an excellent resource for React Developers who want to learn how to build high-quality, reusable components. This course will teach you how to share props and state between components, handle errors, and improve component UI performance.
UI Developer
UI Developer
UI Developers are responsible for designing and building the user interface of software applications. They use their knowledge of design principles and user experience to create interfaces that are both visually appealing and easy to use. Courses such as "Working with Components in React 18" can help UI Developers learn how to create reusable components that can be used across multiple projects, improving their efficiency and productivity.
Web Developer
Web Developer
Web Developers are responsible for designing, building, and maintaining websites. They use their knowledge of HTML, CSS, JavaScript, and other web technologies to create websites that are both visually appealing and functional. Courses such as "Working with Components in React 18" can help Web Developers learn how to build interactive and responsive websites that are easy to use and maintain.
JavaScript Developer
JavaScript Developer
JavaScript Developers are responsible for writing JavaScript code that makes websites and web applications interactive and dynamic. They use their knowledge of JavaScript to create code that responds to user input, sends and receives data from the server, and manipulates the DOM. Courses such as "Working with Components in React 18" can help JavaScript Developers learn how to write high-quality, reusable JavaScript code that is easy to maintain.
Web Designer
Web Designer
Web Designers are responsible for the visual design of websites. They use their knowledge of design principles and user experience to create websites that are both visually appealing and easy to navigate. Courses such as "Working with Components in React 18" can help Web Designers learn how to create reusable design components that can be used across multiple projects, improving their efficiency and productivity.
UX Designer
UX Designer
UX Designers are responsible for the user experience of websites and web applications. They use their knowledge of human behavior and design principles to create websites that are both easy to use and enjoyable to use. Courses such as "Working with Components in React 18" can help UX Designers learn how to create reusable design components that can be used across multiple projects, improving their efficiency and productivity.
Product Designer
Product Designer
Product Designers are responsible for the design of products, including both physical products and digital products. They use their knowledge of human behavior and design principles to create products that are both useful and desirable. Courses such as "Working with Components in React 18" can help Product Designers learn how to create reusable design components that can be used across multiple projects, improving their efficiency and productivity.
Information Architect
Information Architect
Information Architects are responsible for the organization and structure of websites and web applications. They use their knowledge of information architecture principles to create websites that are both easy to navigate and find information on. Courses such as "Working with Components in React 18" can help Information Architects learn how to create reusable design components that can be used across multiple projects, improving their efficiency and productivity.
Interaction Designer
Interaction Designer
Interaction Designers are responsible for the design of user interactions with websites and web applications. They use their knowledge of human behavior and design principles to create interactions that are both intuitive and enjoyable. Courses such as "Working with Components in React 18" can help Interaction Designers learn how to create reusable design components that can be used across multiple projects, improving their efficiency and productivity.
Visual Designer
Visual Designer
Visual Designers are responsible for the visual design of websites and web applications. They use their knowledge of design principles and user experience to create websites that are both visually appealing and easy to navigate. Courses such as "Working with Components in React 18" can help Visual Designers learn how to create reusable design components that can be used across multiple projects, improving their efficiency and productivity.
Content Strategist
Content Strategist
Content Strategists are responsible for the planning, creation, and management of content for websites and web applications. They use their knowledge of content strategy principles to create content that is both informative and engaging. Courses such as "Working with Components in React 18" can help Content Strategists learn how to create reusable content components that can be used across multiple projects, improving their efficiency and productivity.
Technical Writer
Technical Writer
Technical Writers are responsible for writing technical documentation for software and hardware products. They use their knowledge of technical writing principles to create documentation that is both clear and concise. Courses such as "Working with Components in React 18" may be useful for Technical Writers who want to learn how to create reusable documentation components that can be used across multiple projects, improving their efficiency and productivity.
For more career information including salaries, visit:
OpenCourser.com/course/ge79x8/working
Reading list
We've selected eight books
that we think will supplement your
learning. Use these to
develop background knowledge, enrich your coursework, and gain a
deeper understanding of the topics covered in
Working with Components in React 18.
Covers common design patterns and best practices for React development. It is especially valuable for readers who want to learn more about how to write maintainable and scalable React applications.
Save
While not specific to React, this book provides a solid foundation in JavaScript, which is essential for understanding and using React effectively. It is especially useful for beginners who are new to JavaScript or who want to refresh their knowledge.
Teaches software development best practices. It covers topics such as code quality, testing, and teamwork.
Teaches software development best practices. It covers topics such as project management, software engineering, and team dynamics.
Save
Teaches design patterns, which are reusable solutions to common software development problems. It covers topics such as creational, structural, and behavioral patterns.
Teaches design patterns in a fun and engaging way. It covers topics such as creational, structural, and behavioral patterns.
Teaches test-driven development, a software development process that involves writing tests before writing code. It covers topics such as test-first programming, red-green-refactor, and continuous integration.
Teaches software development best practices. It covers topics such as code quality, testing, and teamwork.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/ge79x8/working
Share
Similar courses
Similar courses are unavailable at this time. Please try again later.
Our mission
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.
Affiliate disclosure
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.
© 2016 - 2025 OpenCourser