Implementing a basic UI with Bulma and React.js - JavaScript Tutorial

- [Instructor] Now let's use the Bulma CSS classes with your React application by building a simple card view, I assume you already have your React app set up already. So in your src folder, create a components folder, and create a file called CardDetails, and NavBar.jsx in it respectively. I import an image of person from my assets folder, which is import person from the ../assets/persons.png. You'll create an array called info with objects representing cards. Each card object contains properties, such as id, name, and username. In order to set your card to three rows on your large screen, you need to define a function called splitEvery, which will take an array and the length as parameters. The function uses the reduce method to split the array into groups of the specified length. It starts each group as an element in a new array and returns the result, splitting the data and rendering the grid layout. For you to render your info, you need to create a constant variable called splitInfo that will hold the value of calling splitEvery function. splitEvery function will take info and the length as params. This will enable you to split the info array into groups of three cards each. To render the info data, you need to create a map function across the columns and use the CSS styles from Bulma to style the output. The div will have a container of margin top of four and then will split all the information into the screen using the dot map method. So for the parent div there is column and the column is-multiple. This tells Bulma that you're using a multiple column. Now the child column will now be column, and it will take a space of 1/3, and that is used with the className is-one-third. For the multiple use, the className is-multiple. Now for you to use a card, use the className card, and inside the card, there will be card-image. And inside the card-image, you will use an image element. An image element you have a className of image is-4by4. This tells Bulma the size of the image and also for the card-content, use the className card-content, and the card-content can have a media, and the media can be small or an image item. So here I use image item, which is image is-48 by 48. This tells Bulma the size of the image. Also, I added a navigation component, which is Navbar.jsx. For the Navbar component, you have a nav of className navbar, and nested into the nav element, you have a div of navbar-brand, which takes the logo, and the anchor tag as a className of navbar-item. Also for other elements on the Navbar, you have navbar-item has-dropdown. This allows you to use dropdown item and the dropdown class will take navbar-dropdown. The first element will be has-dropdown. Why the nested element in the Navbar will use navbar-dropdown. And then the element link will now be navbar-item to show the Navbar respectively. For divider in the Navbar element, you can use navbar-divider as a className. For navbar-end, which is the end of the Navbar, you can add an item and give it a className of navbar-end. And in the div, there's another div with navbar-item, which is the item of the navbar and it can be a button. And to show button, the className will be buttons. And inside the buttons, there's another className, which is button and this is primary button, which is is-primary, and another element for button can also take another button which is is-light. So these are two different buttons, is-primary, is-light, and they are all nested inside a className of buttons. Let's preview this code on the browser. Don't forget, this code is available on GitHub to preview, and be able to check what is being done. This is the Navbar that has Home, Documentation, More, and the More has dropdown, About, Jobs, Contact, a divider, and then Report an issue. This is button is-primary and this is the button is-light. Here is a card item of images that takes in a large image, a small image, which is 48 by 48, the name and the username. Integrating Bulma CSS into a VS project offers a seamless and efficient way to build impressive web project. The combination of Bulma's responsive design and Bootstrap like classes simplifies styling and customization. Overall using Bulma CSS in your React project streamlines development and enhances the overall user experience.