
Hi, in this article we are going to get a detailed overview of different styling techniques that can be used in React projects. Techniques which I am going to show you below are for Web Applications. All these techniques are best at their place but we also need to consider the project requirements and easiness before selecting any of these techniques in our projects. So, why we are wasting our time? Let's get started!

## **1. Normal CSS (Cascading Style Sheet)**

I know you know that without CSS the web is incomplete but it's worth mentioning. We can use CSS just like we use it in normal HTML. We just need to import the CSS file in our JS/ JSX file to use it.

```jsx
import "./App.css";
```

```jsx
// Note the class attribute below
<div className="app-container">
  <p>Life is Great!</p>
</div>
```

While using CSS normally in React, we need to take some precautions. The same Class name and Id name can be used all over the application. This will become a problem if you accidentally define the CSS Class with the same name at different places or in different files. When you make changes in one CSS class of a particular component and it will get reflected at other places.

I know you don't want that.

Although, for simplicity, or if your application is small then you can use it but for bigger applications, it is not suggestible.

## **2. CSS Modules**

This is a great way of using CSS in React applications. React supports CSS modules out of the box. It solves the problem of Normal CSS which we have discussed above.

_"So, do I need to learn the CSS Module instead of CSS?"_

No, no, no...! It's pretty simple.

1. You have to change the name of your normal CSS file and then put the "module" in the name.

e.g. if your file name is "App.css" then change it to "App.module.css".

Earlier, we were importing the CSS file like,

```jsx
import "./App.css";
```

But now we have to import it like this,

```jsx
import styles from "./App.module.css";
```

Here, you could use any name instead of styles but do consider the naming convention. So, that anyone can read it easily.

2. Check the CSS file and remove any dash( - ) from the class name if any. Otherwise, it will not be going to work.

e.g. if a class name is ".app-container" then remove the dash( - ) and change it to "appContainer".

3. Now, it's time to get back into our JS / JSX file. You can't use the CSS class as you are using it before.

Earlier, if you are using it like,

```jsx
<div className="app-container">
  <p>Life is Great!</p>
</div>
```

Then now, you have to use it like this,

```jsx
<div className={styles.appContainer}>
  <p>Life is Great!</p>
</div>
```

Remember, we have already changed the CSS class name "app-container" to "appContainer" in CSS module file.

## **3. SCSS (Sassy CSS)**

If you are familiar with SCSS and comfortable with it then this option is also available to you. You can use it in your project by installing its dependency in your project. It does not come right out of the box in React.

You can install Sass globally using `npm install -g sass` which will provide access to the sass executable. You can also add it to your project using `npm install --save-dev sass`. There is no need of importing it, just change the .css file extension to .scss and use it.

## 4. **Styled Components**

It's an another great way of styling components in React projects or applications. It’s CSS in JS & great thing about it is that you just need to write styles in the JS files only! Now, you can import the styles like React components. With the help of Tagged Template Literal, you could write styles for your components.

Remember it is CSS in JS, you can pass variables directly which is called props to the styled component and render styles conditionally which was not possible in the CSS, SCSC or CSS Module case. It makes things lot easier if you konw how to use it effectively.

You have to install dependency for using it in your project. In your terminal type `npm install --save styled-components` and import it.

Lets see an example to understand it.

```jsx
import React from "react";
import styled from "styled-components";

const ButtonPrimary = styled.button`
  color: #ffffff;
  background-color: #000000;
  height: 5rem;
  width: 10rem;
`;

const ButtonSecondary = styled.button`
  background-color: #000000;
  height: 5rem;
  width: 10rem;
  color: ${(props) => props.textColor || "#ffffff"};
`;

const MyComponent = () => {
  return (
    <>
      <ButtonPrimary>Click</ButtonPrimary>
      <ButtonSecondary textColor="#F97A7A">Click</ButtonSecondary>
    </>
  );
};

export default MyComponent;
```

You could check more about Styled Components from their official [Documentation](https://styled-components.com/docs/).

#### _Thanks for giving your precious time. Goodbye!_

Learn more about ReactJs on [Faguni](https://faguni.com/blogs).


Different styling ways in ReactJs


Hi guy/gal, hope you are well. Today in this article we are going to discuss about CSR (Client-Side Rendering) and SSR (Server-Side Rendering). So, without further ado let's get started.

We will first talk about Server-Side Rendering because it had came before Client-Side Rendering.

## **Server-Side Rendering**

Whenever we go to a website, we write its address in the browser and this sends a HTTP request to the server of the website.

"Hey Server, I want to access your site."

After that, a response came back from the server and a connection is established between the client and the server. Server renders the HTML file which user had requested and sends it to the client. Server renders the HTML page from the PUG templates or EJS templates etc. In this case, the requested file is the homepage of the website. After that, server also sends the relevant JS file. So that user could able to interact with the website. Remember, rendering process occurs when the site is not static i.e. it already have static HTML file.

Now, if the user goes to different URL of the same website, then a new request is sent to the browser. Again, the same process continue, server renders the HTML page from PUG templates or EJS (Embedded JavaScript) templates.

It has faster initial loading time than CSR because it is sending only the requested page from the server but in CSR, whole application code is recieved by the client. If initial loading takes more than 3 seconds then it's a higher chance that the client will leave the website and it will be a huge loss for the business.

Everyone wants their website to rank on Google or other web browsers. The SEO part of the SSR website is excellent. Web crawlers can easily navigate the SSR websites, which is not in the case of CSR websites.

_"Great! I will use only SSR for developing my website. I want websites optimized for search engine."_

Hey wait, before taking any decision, first understand the Client-Side Rendering.

## **Client-Side Rendering**

Let's continue the same process of accessing a website that we had seen earlier.

We go to a website by writing its address in the browser and hitting enter. This sends a HTTP request to the server of the website.

"Hey Server, I want to access your site."

After that, a response came back from the server and a connection is established between the client and the server.

Now, in this case, the server will not render the HTML page on the server. Rather, it will send the minified HTML and after that minified JavaScript file to the client. Then client browser will render the page. Users can now interact with the application and with each interaction, the javascript and HTML will be rendered accordingly.

_"Hey, what about the data? will it remain the same always?"_

The beauty of Client-Side Rendering is that users can still get the latest data on request but there is no need to request the minified HTML and JS files again and again. The data can be requested through API endpoints which are provided by the same or different server.

The drawback of this approach is that it lacks serious SEO. Web crawlers are not yet advance that they could able to understand the JavaScript rendering. Although, many companies claims that their crawlers can understand the javascript rendering but the truth is that they do not understand it.

_"So, why should I use it if SEO is not so good for this approach?"_

Remember, it's rendering on the client-side, so once your application get loaded inside the client's browser. I thent provides ultra-high-speed interaction which is not possible in case of Server-Side Rendering.

CSR can be used to develop admin panels or parts of the website which does not need to be get reflected in the search results. Although, this is not a good choice for developing landing pages or blogs where organic traffic is important.

#### _Thanks for giving your precious time. Goodbye!_

Learn about ReactJs on [Faguni](https://faguni.com/blogs).


Client-Side Rendering vs Server-Side Rendering


Hi, hope you are doing well. In this article we will learn about 5 disadvantages of ReactJs. So, without wasting any time. Let's get started!

## **1. Client-Side Rendering:**

It is one of the core features of ReactJs i.e. it supports the rendering process on the client-side. Earlier when a client sends a request to the server, the HTML page was rendered on the server and after that, it was served to the client. This increases the load on the server specially when the application size was big & requires continuous interaction. So, React team thought that we could render the application on the client-side which will remove the overhead on the server and will eventually save the resources. It increases the load on the client-side. Plus it takes some initial time to load the application because the server is sending the whole application's files at once. There could be an argument here that it is a drawback or a feature.

## **2. Lack of SEO:**

Although the React applications are very fast and optimized for performance but it has serious SEO (Search Engine Optimization) related issues. As we know that out of the box React uses client-side rendering but at the current date, web crawlers do not understand javascript rendering. Search engines especially Google claim that their crawlers understand javascript rendering but the truth is that they do not understand it. This could be a huge loss for businesses because every business wants to get their presence on the search results. Search traffic is one of the most important sources of potential customers.

## **3. Routing is Unavailable:**

ReactJs is so elegant, simple & good at the performance that developers expect that routing should be present within it out of the box. Unfortunately, we need to install an extra npm package called `react-router-dom` to handle the routing. Routing is available in Angular and Vue right out of the box.

## **4. Form Validation & Handling:**

The inbuilt feature of handling form validation and handling is not present in ReactJs as it is available in Angular. For form validations, we need to download extra tools like `Formik`. Otherwise, we need to write form validations manually.

## **5. State Management:**

In earlier versions of React state management was unavailable. Developers need to install the `Redux` in their project for state management. Now, this problem is solved through `Context API` but there is an issue with it. It does not handle the State effectively when the application and state become larger. For this purpose developers needs to rely on Redux or another state management libraries. Although, Context API is a great tool for managing states.

The good news for you is that Vercel has launched a framework for ReactJs which is known as `NextJs`. By using NextJs we can now develop complex production-ready applications using Standard React without sacrificing the SEO. It provides us Server Side Rendering features, inbuilt File-Based Routing, image optimization features, and a lot more.

You could check more about NextJs from their official [Documentation](https://nextjs.org/docs).

#### _Thanks for giving your precious time. Goodbye!_

Learn more about ReactJs on [Faguni](https://faguni.com/blogs).


5 Disadvantages of ReactJs


Hi, hope you are doing well. This blog will explain you 7 features of ReactJs. So, without wasting your time. Let's get started!

## **Declarative**:

You just need to instruct your "Servant" a.k.a. React that I want this and it will do that exact same under the hood and the great thing about this is that you do not need to worry about "how it's done". Earlier we required to manipulate the DOM(Dcument Object Model) for making any changes in the web applications. This is not required in React which made the life of developers a lot simpler than before and made the production faster.

Although there might be some cases in real life where we really need some control. In that scenario, we can go the Imperative way and tell React exactly "how to do" also.

## **Component Based**:

React revolves around the components. For developing something in React,first you need to create a component. These components can have their own memory which is called "State" in React. These States can be changed or manipulated through "Handler Functions" by calling these functions. State can be passed to another component throughs "props". These components can work standalone and can be easily integrated with other projects. This means that we can easily create library of components as per our need or requirements and we can use it in different applications or projects.

_"Wow, that's great!"_

## **Learn Once, Write Anywhere**:

React can be used to develop applications for different devices. It can be used to develop web applications, mobile applications (React Native), desktop applications ( Electron ), etc. You just need to learn the core concepts of React and these core concepts can be utilized for developing applications on different platforms. Although there are differences in syntax but the learning curve is not too steep.

## **Virtual DOM**:

Now, you don't need to manipulate the DOM (Document Object Model) directly. React creates a Virtual DOM which is a virtual representation of the Original DOM and it remains in the memory. Whenever a State changes then a new Virtual Dom is created. This new Virtual DOM is compared with the previous Virtual DOM. React just take a look and say, "Hey, here is the change". After that React finds the most optimum way to reflect these changes to the actual DOM. This increases the performance of the application because we are not directly interacting with the DOM.

## **Single Source of Truth**:

Data passed in React has unidirectional flow. Data from the parent component can be passed to all its child components. Any changes in the data of the top most component will get reflected in all its child components. It gives more control over data to the developers.

## **JSX**:

It stands for Javascript XML and XML stands for Extensible Markup Language. JSX provides a way to write Javascript in HTML which is a very revolutionary idea in the web development field. Instead of writing HTML alone, now we can also write JavaScript in HTML. The syntax is similar to HTML and it's easier to grab. Although it uses XML rules. It is also immune to Cross Side Scripting attacks. JSX is optional and not required to use React but it makes development a lot easier.

That's enough for you to know about ReactJs and you could further explore the official doc of React. If you like this article and want to support me then please share it with your friends or colleagues. Knowledge get increases by sharing it and not by hoarding it. That’s what I am doing.

#### _Thanks for giving your precious time. Goodbye!_

Learn more about ReactJs on [Faguni](https://faguni.com/blogs).


7 Great Features of ReactJs


Hi, hope you are doing well. This blog will give you brief information about ReactJs. So, without wasting your time. Let's get started!

ReactJs is a free and open-source front-end JavaScript library. It is used to develop user interfaces or UI components. This library is developed and maintained by Facebook and its community. It was created by Jordan Walke, who was working as a software engineer at Facebook in 2011. Its initial public release was on 29/05/2013 with version 0.3.0.

_"Hey, wait but why Facebook had created this hell?"_

To understand the whole shit first, we have to go back into the stone age of web development. Life was great and developers were developing the frontend part by just using HTML with a little bit of styling. After that, JavaScript & CSS marked their entry. At this time developers started creating truly interactive websites but developers were still thirsty. Their thirst for creating complex websites was increasing day by day but the technology was not so great to fill their continuous growing demand. jQuery had marked its entry and lots of complexity got hidden behind it. It made the life of developers a lot easier but after some time Developers realized that they need something more advanced and robust because they started created even more complex websites with jQuery.

Facebook realized this need and created ReactJs which made the development process a lot easier and removed the headache of DOM manipulation. Sharing of data between different components became easier and changes made in one component can easily be reflected in anotherJs was very easy to understand and it started getting popularity. It literally screwed the Angular which was the popular framework at that time. Remember, React is a library and not a framework.

_"Ok dude, I got the point but what are the features which made it so popular?"_

## **Declarative**:

You just need to instruct your "Servant" a.k.a. React that I want this and it will do that exact same under the hood and the great thing about this is that you do not need to worry about "how it's done". Which makes the life of developers a lot simpler than before.
Although there might be some cases in real life where we really need some control. In that scenario, we can go the Imperative way and tell React exactly "how to do" also.

## **Component Based**:

React is all about components. If you want to build something in React then you first need to create a component. These components can have their own memory which is called "State" in React. These States can be changed or manipulated through "Handler Functions" by calling these functions. State can be passed to another component throughs "props". These components can work standalone and can be easily integrated with other projects. This means that we can easily create library of components as per our need or requirements and we can use it in different applications or projects.

_"Wow, that's great!"_

## **Learn Once, Write Anywhere**:

React can be used to develop applications for different devices. It can be used to develop web applications, mobile applications (React Native), desktop applications ( Electron ), etc. You just need to learn the core concepts of React and these core concepts can be utilized for developing applications on different platforms. Although there are differences in syntax but the learning curve is not too steep.

## **Virtual DOM**:

Now, you don't need to manipulate the DOM (Document Object Model) directly. React creates a Virtual DOM which is a virtual representation of the Original DOM and it remains in the memory. Whenever a State changes then a new Virtual Dom is created. This new Virtual DOM is compared with the previous Virtual DOM. React just take a look and say, "Hey, here is the change". After that React finds the most optimum way to reflect these changes to the actual DOM. This increases the performance of the application because we are not directly interacting with the DOM.

## **Single Source of Truth**:

Data passed in React has unidirectional flow. Data from the parent component can be passed to all its child components. Any changes in the data of the top most component will get reflected in all its child components. It gives more control over data to the developers.

## **JSX**:

It stands for Javascript XML and XML stands for Extensible Markup Language. JSX provides a way to write Javascript in HTML which is a very revolutionary idea in the web development field. Instead of writing HTML alone, now we can also write JavaScript in HTML. The syntax is similar to HTML and it's easier to grab. Although it uses XML rules. It is also immune to Cross Side Scripting attacks. JSX is optional and not required to use React but it makes development a lot easier.

That's enough for you to know about ReactJs and you could further explore the official doc of React. If you like this article and want to support me then please share it with your friends or colleagues. Knowledge get increases by sharing it and not by hoarding it. That’s what I am doing.

#### _Thanks for giving your precious time. Goodbye!_

Learn more about ReactJs on [Faguni](https://faguni.com/blogs).


Blogs

Different styling ways in ReactJs

Client-Side Rendering vs Server-Side Rendering

5 Disadvantages of ReactJs

7 Great Features of ReactJs

What is ReactJs and why it was created?

Subscribe To Our Newsletter & Offers