[Video] How to build a LEGO wishlist site with React and JavaScript for beginners

Laurie Barth, Senior Software Engineer at Netflix and LEGO aficionado, shared how to build a LEGO wishlist site using React and JavaScript during Pluralsight’s Tech Skills Day 2023. Using the Rebrickable API, you can populate every LEGO set in existence onto a site and save your favorite sets as wishlist items. 

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.

Developed by Facebook, ReactJS is a free, open-source JavaScript library used for creating user interfaces. It is used to build single-page, mobile, or server-rendered applications. Developers can create reusable user interface (UI) components and update them as well as render them based on changes to the application’s data.

In terms of front-end development, React is used with technologies such as HTML, CSS, and JavaScript. Because the UI can be broken down into modular components, developers can more easily manage complex UI structures. Its flexibility is one of the most popular aspects of the programming language, making it a top choice for single-page, mobile, and desktop applications.

• JavaScript: A programming language for web development. It runs on both the client-side and server-side, making it a popular choice for building dynamic web content. 

• Rebrickable: A platform and community for LEGO fans that includes an APIof LEGO sets, parts, instructions, and more. 

• JSX: A syntax extension in React that allows for the use of HTML-like code in JavaScript. JSX combines user interface (UI) elements and JavaScript logic in one file to facilitate the creation of React components. 

• 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. 

• Component: A modular piece of functionality with its own logic and appearances. Components are JavaScript functions that can be reused around a website. 

• 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.

React is the most popular front-end framework and library for good reason. Here are some of its top advantages for developers: 

1. Supportive Community: React developers can lean on the extensive community, documentation, library, and resources to learn, build, and get support. 

2. 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.  

3. 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. 

4. 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.

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.