May 24, 2023
Watch the LEGO wishlist demo while following the source code:
For beginners, here is a deeper dive into the fundamentals of React and terminology to help you get an understanding of the technology used in the video.
Why ReactJS is a top choice for front-end development
React terminology and other tools to know
Rebrickable: A platform and community for LEGO fans that includes an APIof LEGO sets, parts, instructions, and more.
Element: The smallest building block in HTML used to describe what you want to display in the UI such as a text input or button.
React hooks: Functions that allow you to “hook” into React functionality within a component. They start with the keyword “use” by convention. There are hooks provided by React and other libraries, or you can make your own.
useState: A hook provided by the React library which allows you to add state to functional components.
useEffect: Another hook provided by the React library to perform side effects in functional components.
<div>: An HTML element that is a generic container that can be used to group and organize elements.
Props: Short for properties, props are used to pass data from parent to child components.
Alt text: Alt text (alternative text) is an HTML attribute that provides text-based descriptions of images.
<input>: A native HTML element, this form input component captures and handles user input.
API: Application Programming Interfaces (APIs) allow different software applications to communicate and exchange information as well as functionality.
- ARIA label: An Accessible Rich Internet Applications (ARIA) label is an HTML attribute that provides an accessible label for a webpage element such as a button, form input, or link.
The top 5 advantages of ReactJS for application development
React is the most popular front-end framework and library for good reason. Here are some of its top advantages for developers:
Supportive Community: React developers can lean on the extensive community, documentation, library, and resources to learn, build, and get support.
Components: Because React uses a component-based architecture, developers can capitalize on modular development and reusable UI components to more easily manage and maintain complex apps.
Declarative Syntax: Developers use React’s declarative syntax to define the UI’s appearance based on its current state. This benefit makes it easier to comprehend the app’s behavior and simplest development overall.
Virtual DOM: React uses a virtual Document Object Model (DOM), which is a lightweight copy of the actual DOM. It mirrors the structure of real DOM elements in the UI so React can update and render only the necessary components when there are changes.
Flexibility: React can be integrated with other libraries thanks to its flexible, compatible nature.
How to get started with React
React 17: Getting Started course. In Pluralsight’s beginner-level course, React 17: Getting Started you’ll learn to develop a game for kids by leveraging React hooks. From there, you can build on your knowledge of React with additional courses.
You can catch the full step-by-step live coding demo with Laurie for even more tips and tricks for building your LEGO wishlist with React.
5 keys to successful organizational design
How do you create an organization that is nimble, flexible and takes a fresh view of team structure? These are the keys to creating and maintaining a successful business that will last the test of time.Read more
8 ways to stand out in your stand-up meetings
Whether you call them stand-ups, scrums, or morning circles, here's some secrets to standing out and helping everyone get the most out of them.Read more
Technology in 2025: Prepare your workforce
The key to surviving this new industrial revolution is leading it. That requires two key elements of agile businesses: awareness of disruptive technology and a plan to develop talent that can make the most of it.Read more