How to include Sass file in Reactjs.

What is React?

React is a library of javascript developed by Facebook used to build rich UI (user interface) which provides us the facility to compose complex UI to small and reusable pieces of code called components.

Creating react app.

  > npm install -g create-react-app

  > npx create-react-app myfirstapp

  > cd myfirstapp

You are ready to run your first React application. Use the following command:-

 > npm run

A new browser window will pop up with your React App and show you the below output! If not, open your browser and type localhost:3000 in the address bar.

Let's write some code now.

Inside myfirstapp folder, create an HTML file index.html and write the below code.

<html>
   <head></head>
       <body>
               <h1> My first React application</h1>

                  <div id="name"> 

                  </div>

       </body>
</html>

Here, we are creating an empty div tag to display the content from our React code.

Writing your first React code.

In the same folder, write the below code in index.js.

import React from 'react'
import ReactDOM from 'react-dom'

Class Name extends React.component:
     render(){
return '<center><h2>My name is Anshika</h2></center>'

}

ReactDOM.render(<Name />, document.getElementbyId('name'))

First, import the respective packages from React and create a component. Here, we are creating a class component (The first letter of the component should be capital). After creating a component, it will return the HTML code using render() method. At last, the component is rendered in a container called 'name' in your HTML file.

Now the run the following command and see the magic:-

  > npm run

Sass

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. SassScript is the scripting language itself which stands for Syntactically Awesome Stylesheet. It is an extension to CSS and reduces the repetition of CSS and therefore saves time.

According to w3 schools:- Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.

Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006

Let's create our first Sass file in the same folder.

mysass.scss

$headingColor : red;
$divColor : blue;

h1{
   text-align : center;
   color : $headingColor;
}

.name{
   color : $divColor;

}

Now, edit the index.js with the following code:-

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

Class Name extends React.component:
     render(){
return '<center><h2>My name is Anshika.</h2></center>'

}

ReactDOM.render(<Name />, document.getElementbyId('name'))

Let's Import the Sass file in your React code and run it to see the magic.

That's all for now. In the next blog, we will create a small application using React and MongoDB. Until then, stay tuned and show some love in the comment section.

Anshika's Blog

Anshika's Blog

How to include Sass file in Reactjs.

Let's write some code now.

Sass