We may earn an affiliate commission when you visit our partners.

One Brick at a Time

Building with React

Speaker: Laurie Barth

Let's live code a LEGO wishlist site! Using React and JavaScript, you'll learn about key skills like components, hooks, and events. A great introduction for new learners and a fun refresher with some tried and true patterns for everyone else.

This course is no longer available. Find something similar by browsing:

React JavaScript Components Hooks Events

What's inside

Syllabus

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Introduces foundational concepts like components, hooks, and events, providing a comprehensive starting point for absolute beginners

Emphasizes practical application through hands-on code-building, making learning more engaging and effective

Provides a fun and approachable learning experience, which can help maintain motivation and make learning more enjoyable

Instructed by Laurie Barth, an experienced professional in the field, ensuring the course content is up-to-date and industry-relevant

Focuses on React and JavaScript, widely used technologies in web development, providing learners with in-demand skills

Builds a strong foundation for beginners, providing a solid starting point for those new to React and JavaScript

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.

Save

Reviews summary

Hands-on react fundamentals with project

According to learners, "One Brick at a Time: Building with React" is a largely positive and practical introduction to React for those with some JavaScript background. Students frequently praise the instructor's clear and engaging teaching style and the hands-on, project-based approach, particularly the fun LEGO wishlist site demo. While it provides a strong foundation in core concepts like components, hooks, and events, some reviews indicate that the pace might be challenging for absolute beginners or those without strong prior JavaScript knowledge. It's often recommended as a solid refresher for intermediate developers, though some older reviews noted minor issues with outdated dependencies, a concern less prominent in recent feedback.

Course excels at core React concepts, less on advanced topics.

"Good course for understanding the basics of React components and state."

"The course covers React fundamentals adequately."

"Could perhaps use an update on some newer React features, but for fundamentals it's excellent."

Excellent for reinforcing or updating existing React skills.

"This course was exactly what I needed to refresh my React skills."

"Highly recommend for intermediate devs or as a solid refresher."

"I appreciated that it was practical and not just theoretical. For fundamentals it's excellent."

The hands-on coding and project significantly aid understanding.

"The LEGO project was fun and practical."

"The hands-on coding really solidified concepts. The project itself was engaging and helped me build confidence."

"The project-based learning is the best way to grasp these concepts."

Instructor Laurie Barth's teaching style is highly effective.

"Laurie is an excellent instructor, very clear and concise, especially with the use of hooks."

"Laurie explains complex ideas well."

"The instructor is knowledgeable... The explanations of hooks and events were clear."

Older reviews mentioned issues with outdated dependencies.

"I found the lack of updated dependencies in the older examples frustrating. Had to spend time debugging environment issues due to version mismatches."

"I had to look up external resources for deeper understanding on a few topics. Still, a good starting point."

Pace or assumed knowledge may challenge absolute beginners.

"My only minor gripe is sometimes the pace felt a bit fast."

"Some parts could use a bit more explanation for absolute beginners, especially around environment setup."

"If you're completely new to programming, you might struggle a bit with the initial setup or some JavaScript concepts assumed."

"As a beginner... I often felt lost when she moved too quickly through code. Steeper learning curve than expected."

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 One Brick at a Time: Building with React with these activities:

Review Intermediate JavaScript and Object-Oriented Design

Show steps

This activity will help you refresh your knowledge of JavaScript and Object-Oriented Design, which are essential for building complex web applications.

Browse courses on JavaScript

Show steps

Review JavaScript fundamentals (variables, data types, control flow, functions)
Review Object-Oriented Design concepts (classes, objects, inheritance, polymorphism)
Work through practice problems and exercises to test your understanding

React Learner Essentials Tutorial

Show steps

Review the basics of React hooks and components

Browse courses on React

Show steps

Visit official React documentation
Follow the tutorial's instructions
Experiment with the tutorial's code examples

Practice Building React Components from Scratch

Show steps

This activity will help you enhance your skills in building React components from scratch, which is essential for creating custom and reusable UI elements.

Browse courses on React

Show steps

Set up a React development environment
Create a new React project
Build a simple React component and render it to the DOM

Ten other activities

Expand to see all activities and additional details

Show all 13 activities

React Code Challenges

Show steps

Test your understanding of React concepts through practical exercises

Browse courses on React

Show steps

Find coding challenges online
Solve the coding challenges
Review your solutions and identify areas for improvement

React Study Group

Show steps

Collaborate with peers to discuss concepts, solve problems, and learn from each other

Browse courses on React

Show steps

Find or join a study group
Meet regularly to discuss course material
Share knowledge, resources, and support

Build a Simple To-Do List App with React and Redux

Show steps

This activity will provide you with hands-on experience building a React application with Redux for state management.

Browse courses on React

Show steps

Follow a step-by-step tutorial to create a React application
Implement Redux for state management
Add features and customize the app to meet your needs

Attend a React Workshop on Advanced State Management Techniques

Show steps

This activity will provide you with an opportunity to learn about advanced state management techniques and best practices from industry experts.

Browse courses on React

Show steps

Research and find a React workshop on advanced state management techniques
Register for the workshop and attend all sessions
Participate in discussions and ask questions to enhance your understanding

Solve LeetCode Problems on Recursion and Backtracking

Show steps

This activity will help you improve your problem-solving skills and understanding of recursion and backtracking.

Show steps

Select a set of LeetCode problems on recursion and backtracking
Solve the problems and analyze the time and space complexity of your solutions
Discuss your solutions with other students or mentors

ReactJS Development Journal

Show steps

Document your progress and reflect on your learning journey

Browse courses on React

Show steps

Create a journal or blog
Regularly record your thoughts, discoveries, and challenges
Share your journal with peers or mentors for feedback

Contribute to a React Open Source Project

Show steps

Gain practical experience while contributing code, reporting bugs, and participating in discussions

Browse courses on React

Show steps

Find a suitable open-source project
Fork the project on Github
Make changes and submit a pull request

Blog Post: Best Practices for React Component Design

Show steps

This activity will allow you to demonstrate your understanding of React component design and share your knowledge with others.

Browse courses on React

Show steps

Research best practices for React component design
Write a blog post outlining your findings
Publish your blog post and promote it on social media

Build a React Portfolio Website to Showcase Your Skills

Show steps

This activity will provide you with an opportunity to create a tangible portfolio that demonstrates your React skills and creativity.

Browse courses on React

Show steps

Design and plan the structure of your portfolio website
Build the React components for your portfolio website
Style and customize your portfolio website to showcase your best work

Contribute to a React Open-Source Project

Show steps

This activity will allow you to apply your skills to a real-world project, collaborate with others, and gain experience with open-source development.

Browse courses on React

Show steps

Find a React open-source project on GitHub
Review the project's documentation and codebase
Identify an area where you can contribute
Create a pull request with your changes

Career center

Learners who complete One Brick at a Time: Building with React will develop knowledge and skills that may be useful to these careers:

React Developer

React Developers focus on using the React JavaScript library to build user interfaces. They work with other developers to integrate React components into a larger codebase. This course is a great foundation for React Developers who want to learn more about the fundamentals of React and how to use it to build complex applications.

See salaries and explore the career path for React Developer

UI Developer

UI Developers focus on designing and developing the user interface of a website or application. They work with a team of designers and engineers to translate visual designs into functional code. This course may be useful for UI Developers who want to learn more about using React to build user interfaces.

See salaries and explore the career path for UI Developer

Full-Stack Developer

Full-Stack Developers design and develop both the front-end and back-end of a website or application. They work with a team of designers and engineers to translate visual designs into functional code. This course may be useful for Full-Stack Developers who want to learn more about using React to build user interfaces.

See salaries and explore the career path for Full-Stack Developer

JavaScript Developer

JavaScript Developers use the JavaScript programming language to build web and mobile applications. They work with a team of designers and engineers to translate visual designs into functional code. This course may be useful for JavaScript Developers who want to learn more about using React to build user interfaces.

See salaries and explore the career path for JavaScript Developer

Front-End Developer

Front-End Developers are responsible for designing and developing the user interface of a website or application. They work with a team of designers and engineers to translate visual designs into functional code. This course may be useful for Front-End Developers who want to learn more about building interactive and responsive user interfaces using React.

See salaries and explore the career path for Front-End Developer

Web Developer

Web Developers design and develop websites and web applications. They work with a team of designers and engineers to translate visual designs into functional code. This course may be useful for Web Developers who want to learn more about using React to build user interfaces.

See salaries and explore the career path for Web Developer

Interaction Designer

Interaction Designers focus on the user experience of a website or application. They work with a team of designers and engineers to create a user interface that is both visually appealing and easy to use. This course may be useful for Interaction Designers who want to learn more about how to use React to build user interfaces.

See salaries and explore the career path for Interaction Designer

Software Engineer

Software Engineers design and develop software applications. They work with a team of engineers to translate business requirements into functional code. This course may be useful for Software Engineers who want to learn more about using React to build user interfaces.

See salaries and explore the career path for Software Engineer

Product Manager

Product Managers are responsible for defining and managing the roadmap for a product. They work with a team of designers, engineers, and marketers to bring a product to market. This course may be useful for Product Managers who want to learn more about the technical side of product development and how to use React to build user interfaces.

See salaries and explore the career path for Product Manager

Project Manager

Project Managers plan and execute projects. They work with a team of engineers, designers, and other stakeholders to ensure that a project is completed on time and within budget. This course may be useful for Project Managers who want to learn more about the technical side of product development and how to use React to build user interfaces.

See salaries and explore the career path for Project Manager

UX Designer

UX Designers focus on the user experience of a website or application. They work with a team of designers and engineers to create a user interface that is both visually appealing and easy to use. This course may be useful for UX Designers who want to learn more about using React to build user interfaces.

See salaries and explore the career path for UX Designer

Web Designer

Web Designers create the visual design of a website or application. They work with a team of designers and engineers to translate visual designs into functional code. This course may be useful for Web Designers who want to learn more about how to use React to build user interfaces.

See salaries and explore the career path for Web Designer

Business Analyst

Business Analysts translate business requirements into technical specifications. They work with a team of engineers, designers, and other stakeholders to ensure that a project meets the needs of the business. This course may be useful for Business Analysts who want to learn more about the technical side of product development and how to use React to build user interfaces.

See salaries and explore the career path for Business Analyst

Technical Writer

Technical Writers create documentation for software and hardware products. They work with a team of engineers and designers to translate technical information into clear and concise language. This course may be useful for Technical Writers who want to learn more about using React to build user interfaces.

See salaries and explore the career path for Technical Writer

Data Analyst

Data Analysts collect, analyze, and interpret data to help businesses make better decisions. They work with a team of analysts and engineers to develop data-driven solutions. This course may be useful for Data Analysts who want to learn more about how to visualize data and create interactive dashboards using React.

See salaries and explore the career path for Data Analyst

Reading list

We've selected seven 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 One Brick at a Time: Building with React.

The Road to Firebase

Save

Provides a comprehensive overview of React, including detailed explanations of the core concepts and many practical references.

The Road to Firebase: Your journey to master...

Paperback

The Road to Firebase: Your journey to master...

Kindle Edition

CLEAN CODE

Save

Provides principles and practices for writing clean and maintainable code, which is essential for building React applications.

A Million And One Random Digits

Save

Provides a comprehensive overview of JavaScript, including detailed explanations of the core concepts and practical examples of how to use them to build real-world web applications.

A Million And One Random Digits

Paperback

Check price

A Million And One Random Digits

Kindle Edition

Check price

Eloquent JavaScript, 3rd Edition

Save

Provides a comprehensive overview of JavaScript, including detailed explanations of the core concepts and practical examples of how to use them to build real-world web applications.

Eloquent JavaScript, 3rd Edition: A Modern...

Paperback

Eloquent JavaScript, 3rd Edition: A Modern...

Kindle Edition

Mastering Modular JavaScript

Save

Provides a comprehensive overview of modern JavaScript, including detailed explanations of the core concepts and practical examples of how to use them to build real-world web applications.

Mastering Modular JavaScript

Paperback

Mastering Modular JavaScript

Kindle Edition