Getting started with Vite js + React js + Bootstrap
HTML-код
- Опубликовано: 1 апр 2023
- 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
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
very nice video, thanks for sharing!
Thanks for sharing with us. This whole project uses such marvelous packages which is best for frontend and backend. It helped me a lot.
I recently learned Bootstrap and React, so this was perfect. Thank you!
yes
even though an explanation would be better, this really helps me starting my project. Thanks!
Amazing video
Many thanks! Official bootstrap page for vite integration was even wrong
Excelente muy bueno.
thankssss my bro ❤.
i am from Indonesia.
I love this video.
Godbless
Your welcome, stay tuned for more videos coming soon 👍
Nice video, what extansions you use to create arrow function?
Thanks!!!
Hello thanks for your video, I have a question can I handle a single css file?
Hi Andres, this would be possible so long as you use “id” selectors for specific elements.
Hope this helps
Nice man! why you use the version 4.6 boostrap??
It’s more widely used across new and old web development
@@bloklab but bootstrap 5.3 is compatible with react-bootstrap 2.8, right :? thanks in advance :)
hey, would you tell me how to auto import like you when you code it's auto import at top
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
@@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
How localhost u have visible without put npm run dev in terminal? i need to see
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
100th sub here.
👊
why u dont make another page for about?
The process is the same to create additional pages, just follow the steps and route the backing to the about page instead of “/“.
why you change ma-auto to ms-auto how to know that
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
the screen is to small maybe you can increase the font size😢
hello sir , can you make video about vite app deployment into github page ..
Sure can, make sure to subscribe and turn on bell notifications 🔔
@@bloklab ok..done..after that you make also a video about typescript using vite
why don't you use latest boostrap
Personal preference and compatibility with various versions and frameworks