Building a LEGO Wishlist Site with React and JavaScript

LEGO is a beloved toy for people of all ages. Whether you are a child or an adult, there is something special about building with LEGO bricks. Many fans of LEGO like to keep track of the sets they want to purchase in the future. In this article, we will explore how to build a LEGO wishlist site using React and JavaScript.

Setting up the Project

To begin, we will need to set up a new project using React. If you don’t have React installed, you can do so by running the following command in your terminal:


npm install -g create-react-app


Once React is installed, create a new project using the following command:


npx create-react-app lego-wishlist


Creating Components

With the project set up, we can start creating the components for our LEGO wishlist site. We will need components such as a header, a list of LEGO sets, and a form to add new sets to the wishlist. You can create these components using JavaScript and React JSX.


function Header() {
return (

LEGO Wishlist

);
}



function LegoList() {
return (

• LEGO Set 1
• LEGO Set 2
• LEGO Set 3

);
}



function AddSetForm() {
return (

Add to Wishlist

);
}


Styling with CSS

Once the components are created, you can style them using CSS. You can create a separate CSS file and link it to your React components. For example:


/* styles.css */
header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}

ul {
list-style: none;
padding: 0;
}

input {
padding: 5px;
margin-right: 5px;
}

button {
padding: 5px 10px;
}


Link the CSS file to your React components:


import './styles.css';


Adding Functionality with JavaScript

In addition to creating components and styling them, you can also add functionality to your LEGO wishlist site using JavaScript. For example, you can add a function to the “Add to Wishlist” button to add new LEGO sets to the list. You can also use local storage to save the wishlist items so that they persist even after the page is refreshed.


function AddSetForm() {
const [inputValue, setInputValue] = useState('');

const handleAddSet = () => {
// Add the new LEGO set to the wishlist
}

return (

setInputValue(e.target.value)} />
Add to Wishlist

);
}


Conclusion

Building a LEGO wishlist site with React and JavaScript can be a fun and rewarding project. By combining the power of React for creating components, JavaScript for adding functionality, and CSS for styling, you can create a user-friendly and visually appealing site for keeping track of your favorite LEGO sets. We hope this article has provided you with the inspiration and guidance to start building your own LEGO wishlist site.