Adding the Styles in React.js

Last Article.

I am aware that this website is in black and white and that your quiz applications don't seem to be quiz applications. We will therefore give this website some color.

In React.js, adding styles is possible in a variety of ways. I will not go over every technique.

"Javascript Object"

We can pass the style in the component with a style tag and use it as a javascript object.

Ques.js

using CSS and a stylesheet

If you previously deleted App.css, make a new file with that name. If not, it will be located in the same folder. A file called styles.css has been made, and I'm going to add CSS to it. Then I will import styles into App.js. Don't forget to take the Javascript object styles off as well.

styles.css

App.js

In React.js, how do you install Bootstrap?

You either already use CSS frameworks or you prefer not to use plain CSS. Please attempt to become familiar with CSS.

#New project creation
npx create-react-app quizapp
cd quizapp
npm install bootstrap

and add this to the index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

We can now style our components using the bootstrap classes. However, there is one issue. jQuery is used by Bootstrap for a few functionalities. That feature won't function in this situation.

As a result, we need to add to some other libraries.

npm install jquery popper.js

And now we have to import it into our app.

import $ from 'jquery';
import Popper from 'popper.js';

This is how our App.js now appears. If you're using it for simple apps, you can use it, but I wouldn't advise using it for complex systems.