React-Django QuickStart #2

Hello guys, this is the second part of my React-Django series.

If you want to know how to make a React, you can check the first part of the series:

React-Django QuickStart #1. This is a tutorial to get you started… | by Niharika Patil | Jan, 2024 | Medium

This blog is going to be a quick run through of how-to setup TailwindCSS and React-Bootstrap in ReactJS and some issues that are commonly encountered while setting it up.

So let’s dive right into TailwindCSS setup first.

TailwindCSS has been my best discovery.

Note on installation location:

Also, before we go on with the setup, I would like you guys to note that you need to do the installations inside the React App folder where the src , node_modules , and other folders and files are present. PLS do not install it outside the React App folder.

A lot of beginners make this mistake. There are times when I still conveniently forget to write the command cd frontend (my react app’s name) and install it outside .

Step1 — Is always installation😆.

npm install -D tailwindcss postcss autoprefixer

-D indicates that these are development dependencies as in needed mostly during development.

TailwindCSS is a CSS framework.

PostCSS and autoprefixer are generally included to allow effective use of tailwindcss.

Step2 — Creating tailwindcss configuration file.

Many people do this manually, but why take the effort to make a new file and then copy and paste the configurations when you have a simple command for it?

npx tailwindcss init -p

This command creates two configuration files. One is tailwind.config.js and other is postcss.config.js.

Both the files contain configurations for TailwindCSS and PostCSS, respectively.

CMD snapshot

step3 — Changes in the tailwind configuration file.

In the tailwind.config.js, we modify the content line:

content: [“./src/**/*.{js, jsx, ts, tsx}”]

This modification specifies that TailwindCSS styles should be applied to .js and .ts files found inside the src folder.

Line 3 shows the changes made

Step4 —Make changes in the index.css file.

We add the code below at the top of the index.css file.

@tailwindcss base;
@tailwindcss components;
@tailwindcss utilities;

These lines integrate TailwindCSS base styles, components, and utilities into our project.

Next, lets setup React-Bootstrap.

Style Conflicts

Honestly, using both TailwindCSS and React-Bootstrap is a headache when you are just starting cus styles override each other from both packages and when you are just getting to know things and errors starting to come up, mind you, they are not even errors, just a frustrating piece of code that should work perfectly fine cus you have done exactly as they told you in the tutorial but here we are, it is not working.

I will show you guys one such very common error, but not an error once the installations are complete that I had difficulty solving at first.

Step1 — Installation

npm install react-bootstrap bootstrap

React-bootstrap provides pre-built Bootstrap components as React Components. This makes it easier to integrate Bootstrap components in React application.

Bootstrap is what provides the core Bootstrap framework.

It’s like Bootstrap and on top of that we have React-Bootstrap in simpler terms.

Step2 — Make changes in index.js

Above all imports in index.js add this

import ‘bootstrap/dist/css/bootstrap.min.css’;

This line imports the minified Bootstrap CSS file, ensuring the necessary styles for Bootstrap components are included.

Let’s check if the packages installed work the way they should or not?

Step 1 — Go to App.js:

Remove everything and let the structure below be present only.

App.js structure snapshot

A little explanation about the code first:

import ‘./App.css’; — We are just importing the styles from App.css so they can be applied to elements in this file.

function App() { — We are defining the App component as a function.

React defines components in two ways:

1. Class Components
2. Functional Components

Functional components are way easier to work (in my experience, which btw isn’t much🥲). I have never quite understood class components as they are so complex. But you guys are free to explore them. I would mostly work with functional components only.

  return (
    <>
    
    </>
  );

This is the body of the App function. In React, components return the elements that are to be rendered to the browser (DOM technically).

So, this return holds the components we want to be displayed on the web page.

export default App;

Get Niharika Patil’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

This exports the App component as the default export from this module. So, when we import this module elsewhere, we can use import App from './App'; to use the App component.

Step 2 — Check React-Bootstrap first:

Let’s add a simple button.

Select the 2nd Button it will automatically import React-Bootstrap Button component.

Let’s make a container around the button.

import { Button, Container } from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <Container>
      <Button>
        Hello
      </Button>
    </Container>
  );
}

export default App;

Step 3 — Start React App:

Next open the React App path in CMD and run npm start to start the React App.

In http://lcoalhost:3000/ we can see the button showing.

There is a slight error here, so don’t start wondering what you did wrong. Once TailwindCSS is checked I’ll tell you about the error.

Step 4 — TailwindCSS check:

In the Container element, add the TailwindCSS style:

<Container className='bg-rose-500'>

This will set the background-color of the Container element to a pink (rose) shade.

App.js snapshot

Note:

If you are using VSCode, you should install the extension for TailwindCSS. It will provide suggestions for className which is very helpful.

TailwindCSS extension

TailwindCSS and React-Bootstrap work fine if this is what you get on your browser:

React-Bootstrap and TailwindCSS are working fine if this what is showing on your browser.

Now the ERROR🫥

Some of you may have guessed that this is an error but not an error. You guys are absolutely right.

The default styles were clashing when we rendered the React-Bootstrap Button.

TailwindCSS base styles applied to the application set the button background to be transparent.

This is how it may have looked when we tested React-Bootstrap.

Finding the fix for this was really difficult as there are many fixes to this problem.

The simplest fix is to move the bootstrap import from line 1 to line 7, which is below all the other imports or more specifically, below import ‘./index.css’; where we added the tailwind base styles if you remember.

index.js changes.

Line 1 in index.css shows the addition of tailwind base styles.

See, changing the order works absolutely fine for starters.

The button shows the way it should.

But then, due to this order change, Bootstrap styles are rendered before TailwindCSS and some of my Tailwind styles don’t work the way I want them to.

I don’t like this because my applications have more TailwindCSS classes than Bootstrap components. I generally prefer to only add the bootstrap components rather than coding them myself and then style them the way I want.

So, what I do is let the bootstrap import be on Line 1 only and rather do the following:

import { Button, Container } from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <Container className='bg-rose-500'>
      <Button className='bg-blue-300'>
        Hello
      </Button>
    </Container>
  );
}

export default App;

It changes the background-color of the Button component.

Honestly, you want your app to be appealing (at​least I like making the UI super attractive). That is why, rather than using the basic styles, we style it in different ways, so this fix works for me.

Note on Vulnerabilities:

Now, after installation you guys may have seen 8 vulnerabilities being shown when all you have done is installation only.

When I first started with ReactJS I did try the npm audit fix — force.

How I wish back then someone would have told me not to do this cus going ahead it will only create more problems😭.

Forcing npm audit to fix the vulnerabilities will break the application as it will install versions of packages that are not compatible with the application.

This is a very common issue; a lot of people have faced it.

What npm audit does is it raises false positives, so if you want to check if there are any serious issues or not you can follow the following steps:

Step 1 — Open the package.json file:

This is how the package.json file looks

Step 2 — Make changes to package.json:

On line 13 of the snapshot, you can see -

“react-scripts”: “5.0.1”,

We remove this from “dependecies” and add it to “devDependencies”.

“devDependencies” can be found at the bottom of the package.json if it is not present, then make it and react-scripts to it -

 "devDependencies": {
    "react-scripts": "5.0.1"
  }

This is how it looks in package.json

Step 3 — Run npm audit 😋:

In CMD run the following command:

npm audit --production

The newer version of this command is:

npm audit — omit=dev

If either of the commands show you vulnerabilities after adding react-scripts to devDependencies then they are a serious issue. But only the installation of packages will not raise any serious vulnerabilities (hopefully).

This is how it should look.

In the next blog I’ll be showing you how to do a real project. The project is not going to be something simple and basic (okay maybe the basic part is not true here).

Now that we have installed TailwindCSS we are going to try to make an attractive UI.

If you guys are facing any errors whose fix is/was difficult to find you can mail them to me. I would like to add them to my upcoming blogs.

You can send the errors through LinkedIn too.

Email: patilniharika2306@gmail.com