How to setup ReactJs Project with React-Bootstrap and SaSS for Designers— Advanced Level

So here’s the story, our UI/UX team received a project that needs to be developed using React. We usually use the Angular framework for most of our projects and this is the first.

It’s quite challenging but manageable.

So here are the steps I’ve compiled to get started. Hope this helps.

1. Reactjs Setup

Install

Note: You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. To create a project, run:

• npx create-react-app my-app
• cd my-app
• npm start

Updating Node (Only if your node is not up to date)

1. Clear NPM’s cache:
   sudo npm cache clean -f
2. Install a little helper called ‘n’
   sudo npm install -g n
3. Install latest stable Node.js version
   sudo n stable
4. Alternatively, pick a specific version(optional)
   sudo n 0.8.20

2. Installing React-Bootstrap

Using NPM

• type in npm install react-bootstrap bootstrap@5.1.3 on your terminal/command line
• Then the following line can be included/imported in your src/index.js or App.js file

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

or you can use CDN

• Copy this code at the head section in your index.html file

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>

3. Customize Bootstrap

If you wish to customize the Bootstrap theme or any Bootstrap variables you can create a custom Sass file:

/* The following block can be included in a custom.scss */

/* make the customizations */
$theme-colors: (
    "info": tomato,
    "danger": teal
);

… And import it on the main Sass file.

/* The following line can be included in a src/App.scss */

@import "custom";

If you want to learn more read here https://react-bootstrap.github.io/getting-started/introduction

4a. Installing SaSS

If you use the create-react-app in your project, you can easily install and use Sass in your React projects.

Install Sass by running this command in your terminal:

npm i sass

Note: On your source file convert App.css to App.scss and index.css to index.scss

4b. Create a Sass file

Create a Sass file the same way as you create CSS files, but Sass files have the file extension .scss

In Sass files you can use variables and other Sass functions:

my-sass.scss:

Create a variable to define the color of the text:

$myColor: red;

h1 {
  color: $myColor;
}

Import the Sass file the same way as you imported a CSS file:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

Read more here https://www.w3schools.com/react/react_sass.asp

5. Other Notes

Using Bootstrap

Option 1 — You should import individual components like react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

The element should be capitalized like the one below

<Button variant="info">
      I am hello world
</Button>

You can also add multiple classes using the attribute className like the one below

<Button className="my-class1 my-class2" variant="info">
  I am hello world with multiple classes
</Button>

Option 2 — just use standard HTML tags — no need to import and capitalize element

<button className='btn btn-danger'>
  I am hello world
</button>

class vs className attribute

Explanation: The only reason behind the fact that it uses className over class is that the class is a reserved keyword in JavaScript and since we use JSX in React which itself is the extension of JavaScript, we have to use className instead of class attribute.

Adding image source

//import or initialize source directory here
import logo from './logo.svg';

function App() {
 return (
   <div className="App">
       //now call "logo" in the src attribute
       <img src={logo} className="App-logo" alt="logo" />
   </div>
 );
}