In machine learning, we often hear terms like input variables and output variables. These terms are the foundation of machine learning, but this foundation is derived from mathematics and statistics.

As the name suggests, variables have varying values. They help us measure stuff (quantify things). For example, our age is a variable — it keeps changing every year and influences various observations about us.

Wait — Isn’t data the foundation of machine learning?

Data isn’t just random numbers — it’s a collection of variables where each variable represents something measurable.

Variables record information for analysis, adding meaning to data by measuring different aspects of whatever we are studying.

In machine learning, we use data to train models, and this data consists of input variables.

Mathematically, variables are generally classified into two types when explaining a hypothesis, i.e. Independent and Dependent Variables.

Hypothesis

My observation is that coffee with music generally makes me write much better code.

This is a hypothesis — a guess or explanation of why sometimes my code is flawless. It’s an assumption I can test, to see if there’s any relationship between coffee, music, and code quality.

But how?

We need data for this and data can be collected in terms of these variables. To understand variables better, let’s see the ones for this hypothesis.

Independent Variables

• Their values don’t depend on anything else.
• Factors like coffee, sleep, and music are independent as they exist on their own and aren’t affected by anything.
• They are the cause of some effect — in our example, they influence coding quality.
• They are sometimes called predictor variables because they help predict outcomes (dependent variables).

Dependent Variables

• Their value depends on other factors.
• They are affected by changes in independent variables like coffee, sleep, and music.
• They are called outcome variables — in our example, coding quality changes based on the independent variables.

Now that this is clear, we can further break down variables into two types:

Discrete Variables

These variables are made up of categories and take fixed values (whole numbers), generally countable numbers.

Types of discrete variables:

1. Binary Variables: Can take only two values: Yes/No, True/False, Male/Female. The Coffee and Music columns in our table are binary variables.
2. Nominal: These variables have more than two categories with no meaningful order. If in our table we had a column (variable) for Music Genre (rock, pop, jazz) that would be nominal.
3. Ordinal: These variables also have more than two categories that have meaningful order but the value differences aren’t measurable. The Coding Quality column (dependent variable) is ordinal as it has 3 categories which can be ordered as low, medium, and high. The differences between these values are not numerically defined.

Continuous Variables

These variables can take on any value on the measurement scale we are using. They are measurable and can have decimals.

Types of continuous variables:

1. Interval: They are similar to ordinal variables, but the difference between two values is meaningful. However, there is no true zero i.e. 0 doesn’t mean “nothing”. If Coding Quality were rated on a scale of 1–5, it would be an interval variable, as the gap between each rating is meaningful (the difference between 3 and 4 is the same as between 4 and 5).
2. Ratio: They are interval variables but with a true zero, i.e. none of the quantity or nothing of the following exists. If the Sleep column has zero then it means 0 hours of sleep/ no sleep at all. So it has a true and meaningful zero point.

Understanding variables is essential to machine learning, as they help quantify and analyze relationships that drive predictions.

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.

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.

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.

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’;

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.

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;

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.

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.

Note:

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

TailwindCSS and React-Bootstrap work fine if this is what you get 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.

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.

See, changing the order works absolutely fine for starters.

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:

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"
  }

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).

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

This is a tutorial to get you started in React and Django. Honestly, when I started, there was a lot of material on ReactJS but not much about how to work with both React and Django.

I started learning React and Django last year, and the best way to learn is to start a project rather than focusing a lot on the theoretical part. Not that we shouldn’t know about theory, but looking at the practical counterpart helps in grasping the concepts faster (Honestly, the theoretical stuff, even I’m still not on terms with it🥲).

My blogs (yes, like multiple blogs around React; idk how I’m going to come up with so much content, but this is a start) are going to be very specific to React and Django, and to style the React frontend, I’ll mostly use Tailwind CSS and React Bootstrap.

Let’s get started…

So, for starting a React app, we need Node.js and npm. Install Node.js from the official website.

Node.js is a JavaScript runtime, i.e., it allows us to run JavaScript code on our computer.

Node Package Manager (npm) is a package manager for JavaScript. It allows us to install, share, and manage external packages — basically the tools and libraries needed for developing web applications. Installing Node.js automatically installs npm.

It is a very convenient way of accessing packages. One small command and boom you have the whole tool ready for access.

I mostly use VSCode as my editor, but you guys are free to use whatever you are comfortable with.

Create-React-App

Global installation (in my suggestion, do not use this method)

This is the command you use for creating new React projects. Whenever you go, like I have to create a new project which is like most of the time (not the I-have-new-idea kinda new project but more like the old-project-has-so-many-errors-that-i-cannot-even-figure-out-what-exactly-went-wrong-so-lets-start-anew kinda new project).

It’s a command-line tool. For those starting in React, you guys will have to install this utility.

Open cmd once Node.js is installed and type this command.

npm install -g create-react-app

CRA (create-react-app) is what sets up a new React project for you with default configurations.

Once it is done you can go to any folder you want to create the new React project in. So, like when I started React, I never understood how I was supposed to open a particular folder path in cmd. Should I just go like cd some/path? Then a friend told me about this…

We can also open VSCode for this folder. Once cmd for this folder path opens just type the command (this is just something extra, okay? 😅)

code .

Now, once the folder path for where you want to make your React project is open in the cmd you use the command-line tool.

create-react-app nameofyourapp

This is the workflow with a global installation.

Using npx (this is a better a way to create react apps)

In simple words, npx is a command-line tool that helps us use tools like create-react-app without installing them permanently on our computer.

npx create-react-app nameofyourapp

nameofyourapp I usually use frontend as the app name.

When we use npx create-react-app frontend, it fetches the latest version of create-react-app from the npm registry and runs it, creating a new React.js project in your current directory.

Run React App

Next, we move into the project folder.

cd frontend

And start the development server here.

npm start

The development server is what hosts our React application, allowing us to interact with and view various web components in a web browser. It is used to quickly launch a local server and work on the application in a development environment.

Project Structure

I did say that I’m not going to go into the theoretical part, but understanding the project structure generated by the CRA is kind of important too 😣😥.

node_modules folder:

This contains all the third-party packages and libraries on which our project depends. CRA adds all the default ones initially when a project is created. But if you want to use something like Tailwind CSS, we install it, and that dependency is added to this folder.

src folder:

The src folder holds the source code of our React application, including all the pieces (components) used to build the application.

It has the following files:

1. index.js: Starting point of the app.
2. App.js: This is the main component that will get displayed when we run the command npm start. App component is the one that gets called in index.js.
3. index.css: Contains the global styles that apply to the whole application.

public folder:

The public folder holds static files that can be used directly, without any processing.

It is the place where we put things that don’t change or get transformed during the build process of your React app.

The build process involves packaging up your React app for deployment. It involves transforming and optimizing your source code and assets into a format that’s efficient for browsers to understand and load quickly.

package.json and package-lock.json:

These files store metadata about the project and its dependencies.

Last Note…

ReactJS is a JavaScript library, not a framework.

The key difference between the terms is in terms of flexibility.

Library provides various sets of tools, basically a collection of tools, and these tools can be individually used for specific tasks.

Framework can be seen as a pre-defined structure that dictates how our entire application should be organized and operated.

Think of Lego pieces using different pieces to create a castle or house, whatever you like using these pieces. Framework can be seen as a predesigned castle building workbook that provides us with the instructions to build this castle. When we follow the instructions, we create a castle, and we can customize certain parts only.

Angular is a framework.