Bootstrap vs React: What’s the Difference?
When I first learned about Bootstrap and React I thought they were almost the same because both of them are called libraries. But actually they are used for different purposes.
What is a Library?
A library is basically a collection of code that is already written by someone else and made available for us to use.
Instead of writing everything from the beginning we can use the code provided by the library in our own project.
For example
Bootstrap already has styles for buttons, cards, forms, navigation bars and many other UI elements. So we don't have to create all those styles ourselves.
What is Bootstrap?
Bootstrap is mainly a CSS and UI library.
We normally create our webpage using HTML and then use Bootstrap classes to make the page look better and responsive.
Example:
Click Me
"btn" and "btn-primary" are Bootstrap classes.
Bootstrap already provides the styling for these classes so we don't need to write all the CSS for this button ourselves.
Bootstrap mainly helps us with the design and styling of a website.
What is React?
React is a JavaScript library for building user interfaces.
React is different from Bootstrap because React is not mainly used for styling.
React helps us build the UI using reusable components.
Example:
function Welcome() {
return
Hello World
;}
At first "
" looks like normal HTML But inside React we use a syntax called JSX.
JSX looks similar to HTML but it works with JavaScript and React.
This makes it easier to create and manage different parts of a web application as reusable components.
why React use HTML and CSS?
When working with React we still use things that we already know from web development such as HTML like JSX and CSS.
example:
function Button() {
return (
Click Me
);
}
Then we can write CSS for that button:
.my-button {
background: blue;
color: white;
}
So React does not mean that we stop using HTML and CSS.
Instead React gives us a different way to build the UI using JavaScript, JSX and reusable components.
Top comments (0)