Getting started with Vite js + React js + Bootstrap

In this beginner-friendly tutorial, we'll guide you through the process of setting up a Vite + React project from scratch. We'll cover everything you need to know to get up and running quickly, including installing Vite, adding React to your project, and installing the necessary dependencies.
Once we have our basic project setup, we'll dive into creating some components. We'll use React-Bootstrap, a popular library of pre-built Bootstrap components made specifically for React, to create a Header component, and we'll also create a Home and About component. We'll show you how to install and use React-Bootstrap, and how to customize the styles of these components to fit your needs.
To help you get started quickly, we'll also include a brief overview of Get Bootstrap, a popular CSS framework that provides a wide range of pre-built styles and components that can be used in your React projects. We'll show you how to install and use Get Bootstrap in your project, and how to combine it with React-Bootstrap for even more flexibility.
Whether you're a junior developer just starting out, or an experienced developer looking to learn something new, this tutorial has something for you. So join us and let's get started on building your Vite + React project!
Resources:
React-Bootstrap
Get Bootstrap
#React #Vite #ReactBootstrap #GetBootstrap #FrontendDevelopment #WebDevelopment #BeginnerFriendly #JuniorDevelopers

[@GreenPear-mz4dl]

very nice video, thanks for sharing!

[@kirstenjohnson3091]

I recently learned Bootstrap and React, so this was perfect. Thank you!

[@nithyalakshmim7411]

yes

[@DsComputerWorld]

Thanks for sharing with us. This whole project uses such marvelous packages which is best for frontend and backend. It helped me a lot.

[@scarredgaruga]

even though an explanation would be better, this really helps me starting my project. Thanks!

[@Nurpie]

Many thanks! Official bootstrap page for vite integration was even wrong

[@SocialCockatoo]

Perfect !!

[@VictorSantos-is5yk]

Nice video, what extansions you use to create arrow function?

[@shortsportzone]

thankssss my bro ❤.
i am from Indonesia.
I love this video.
Godbless

[@bloklab]

Your welcome, stay tuned for more videos coming soon 👍

[@lucasbartomioli7861]

Nice man! why you use the version 4.6 boostrap??

[@bloklab]

It’s more widely used across new and old web development

[@bilyanamancheva]

@@bloklab but bootstrap 5.3 is compatible with react-bootstrap 2.8, right :? thanks in advance :)

[@vvhoisp.v]

How localhost u have visible without put npm run dev in terminal? i need to see

[@bloklab]

Hi, to access local host visibility you need to open up chrome dev tools, right click -> inspect, her you see tabs starting with “Elements, console, components etc” click on the tab that says “Application” if you can’t see this click on the arrows, when you click application you see local host on left side. Hope this helps

[@fadhilhasan-x2e]

hey, would you tell me how to auto import like you when you code it's auto import at top

[@bloklab]

Hi, in order to automatically import like in the video, you first need to ensure the component is created in your components folder with the relevant code within the component, once this is done vs code should recognise this so when you start typing it should auto import for you.
Hope this helps and let us know if you get stuck

[@fadhilhasan-x2e]

@@bloklab it's already work, thanks, can you make another tutorial getting started vite react with bootstrap and scss ? so i can override class of bootstrap with scss please

[@andresserna5899]

Hello thanks for your video, I have a question can I handle a single css file?

[@bloklab]

Hi Andres, this would be possible so long as you use “id” selectors for specific elements.
Hope this helps

[@riadqerimi6701]

why u dont make another page for about?

[@bloklab]

The process is the same to create additional pages, just follow the steps and route the backing to the about page instead of “/“.

[@punsathvidunayana7851]

why don't you use latest boostrap

[@bloklab]

Personal preference and compatibility with various versions and frameworks

[@nithyalakshmim7411]

why you change ma-auto to ms-auto how to know that

[@bloklab]

Me-auto (margin-end) is same as Margin-right Ms-auto (margin-start) is same as ml-auto
By changing the default bootstrap code this pushes the nav links over to the right
Hope this helps

[@highfreequency8782]

hello sir , can you make video about vite app deployment into github page ..

[@bloklab]

Sure can, make sure to subscribe and turn on bell notifications 🔔

[@highfreequency8782]

@@bloklab ok..done..after that you make also a video about typescript using vite

[@bobzero3727]

Amazing video

[@ericksegura478]

Excelente muy bueno.

[@noworneverallornothing7877]

super

[@BimbelSemenit]

the screen is to small maybe you can increase the font size😢

[@Bravin_Joshua]

100th sub here.

[@bloklab]

👊

[@isabelsanchezgarcia6108]

Thanks!!!