Forem: Shivam

SSR: clerk with hasura

Shivam — Thu, 21 Jul 2022 13:50:00 +0000

This article will help you in achieving server side rendering(authentication) with clerk(withServerSideAuth) in next.js

Clerk
Multiple authentication strategies are available through Clerk so that legitimate users can access your application and make authenticated requests

Into SSR with Nextjs and Clerk
To enable server-side rendering, Nextjs uses a special export named getServerSideProps. WithServerSideAuth helper from clerk is populated with the auth singleton.

steps:

setup an apollo client
use getServerSideProps and withServerSideAuth for ssr
use graphql query
test for both authenticated and non-authenticated user
if there is a condition where your query is meant to response only after login then please do not return anything otherwise it will lead to issues

code snippet for same:

1.apolloclient setup:

import { useMemo } from 'react';
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
import merge from 'deepmerge';
import isEqual from 'lodash/isEqual';

let apolloClient;
const uri = process.env.NEXT_PUBLIC_HASURA_URI;
function createApolloClient(headers) {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined', // set to true for SSR
    link: createHttpLink({
      uri,
      credentials: 'same-origin',
      headers: {
        Apitoken: process.env.YOUR_API_TOKEN,
      },
    }),
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            feed: {
              keyArgs: ['strategy', 'limit', 'gt_token'],
              // Concatenate the incoming list items with
              // the existing list items.
              merge(existing = [], incoming) {
                const result = Object.assign({}, incoming);
                if (existing?.hits) {
                  result.hits = [...existing.hits, ...incoming.hits];
                }
                return result;
              },
            },
            experts: {
              keyArgs: ['limit'],
              // Concatenate the incoming list items with
              // the existing list items.
              merge(existing = [], incoming) {
                const result = Object.assign({}, incoming);
                if (existing?.hits) {
                  result.hits = [...existing.hits, ...incoming.hits];
                }
                return result;
              },
            },
          },
        },
      },
    }),
  });
}

export function initializeApollo(initialState = null, ctx) {
  const headers = ctx?.headers ?? {};
  const _apolloClient = apolloClient ?? createApolloClient(headers);

  // If your page has Next.js data fetching methods that use Apollo Client,
  // the initial state gets hydrated here
  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract();

    // Restore the cache using the data passed from
    // getStaticProps/getServerSideProps combined with the existing cached data
    const data = merge(initialState, existingCache, {
      // combine arrays using object equality (like in sets)
      arrayMerge: (destinationArray, sourceArray) => [
        ...sourceArray,
        ...destinationArray.filter((d) =>
          sourceArray.every((s) => !isEqual(d, s))
        ),
      ],
    });
    _apolloClient.cache.restore(data);
  }

  // For SSG and SSR always create a new Apollo Client
  if (typeof window === 'undefined') return _apolloClient;

  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient;
  return _apolloClient;
}

export function useApolloHasura(initialState) {
  return useMemo(
    () => initializeApollo(initialState, undefined),
    [initialState]
  );
}

2.use getServerSideProps and withServerSideAuth for ssr:

import { initializeApollo } from '../apolloClient';
import { withServerSideAuth } from '@clerk/nextjs/ssr';

export const getServerSideProps = withServerSideAuth(
  async (ctx) => {
   const { getToken } = ctx.req.auth;
    const token = await getToken({ template: 'hasura' });
    const apolloClient = initializeApollo(null, ctx);

   const client = initialApollo(null, ctx);
    const sub =
      (await client.query({
        query: YOUR_QUERY,
        context: {
          headers: {
            authorization: 'YOUR_AUTHORIZATION_TOKEN',
          },
        },
      }));

    const status = sub?.data;

       return {
      props: {
        isStatus: status,
      },
    };
  },
  { loadUser: true }
);

3. condition where your query is meant to response only after logged in:

here is the snippet for query where it gives response only for authenticated users example subscription query... you need to make small changes on above code. the status will return undefined if token(hasuraToken) will return nothing for non-authenticated user, so on that case you need to return null as shown below.

  const sub =
      token !== null &&
      (await client.query({
        query: PAYMENTS,
        context: {
          headers: {
            authorization: `Bearer ${token}`,
          },
        },
      }));

   const status = sub?.data;

   return {
      props: {
        isStatus: status === undefined ? null : status
      },
    };

For more info please refer to Clerk and Nextjs with SSR example

What do you think about this? Is there any other way that I haven't mentioned? Please please please let me know by commenting down below. I can't wait to hear that. Thanks

Happy Coding!!

Use Hooks + Context, not React + Redux

Shivam — Fri, 08 Jan 2021 17:52:46 +0000

Redux introduces a lot of complexity to our codebase with the excessive amount of code it requires. This makes it an imperfect solution for state management in React applications.
I will introduce the React Context API for state management and show you what makes React Hooks plus the Context API a better solution than Redux.

The React Context API
Context provides a way to pass data through the component tree without having to pass props down manually at every level.

The React Context API is React’s way of managing state in multiple components that are not directly connected.

To create a context, we’ll use the createContext method from React, which accepts a parameter for its default value:

import React from 'react';
const newContext = React.createContext({ color: 'black' });

The createContext method returns an object with a Provider and a Consumer component:

const { Provider, Consumer } = newContext;

The Provider component is what makes the state available to all child components, no matter how deeply nested they are within the component hierarchy. The Provider component receives a value prop. This is where we’ll pass our current value:

<Provider value={color: 'blue'}>
  {children}
</Provider>

The Consumer, as its name implies, consumes the data from the Provider without any need for prop drilling(threading):

<Consumer>
  {value => <span>{value}</span>}}
</Consumer>

Without Hooks, the Context API might not seem like much when compared to Redux, but combined with the useReducer Hook, we have a solution that finally solves the state management problem.

The useReducer Hook
he useReducer Hook came with React 16.8. Just like the reduce() method in JavaScript, the useReducer Hook receives two values as its argument — a reducer function and an initial state — and then returns a new state:

const [state, dispatch] = useReducer((state, action) => {
  const { type } = action;
  switch(action) {
    case 'action description':
      const newState = // do something with the action
      return newState;
    default:
      throw new Error()
  }
}, []);

In the above block, we’ve defined our state and a corresponding method, dispatch, handling it. When we call the dispatch method, the useReducer() Hook will perform an action based on the type that our method receives in its action argument:

...
return (
  <button onClick={() =>
    dispatch({ type: 'action type'})}>
  </button>
)

The useReducer Hook plus the Context API
let’s see what happens when we combine useReducer with Context API in order to get the ideal global state management solution for our application.
We’ll create our global state in a store.js file:

// store.js
import React, {createContext, useReducer} from 'react';

const initialState = {};
const store = createContext(initialState);
const { Provider } = store;

const StateProvider = ( { children } ) => {
  const [state, dispatch] = useReducer((state, action) => {
    switch(action.type) {
      case 'action description':
        const newState = // do something with the action
        return newState;
      default:
        throw new Error();
    };
  }, initialState);

  return <Provider value={{ state, dispatch }}>{children}</Provider>;
};

export { store, StateProvider }

In our store.js file, we used the createContext() method from React that is explained earlier to create a new context.
Remember that the createContext() method returns an object with a Provider and Consumer component. This time, we’ll be using only the Provider component and then the useContext Hook when we need to access our state.
When we need to manipulate our state, we’ll call the dispatch method and pass in an object with the desired type as its argument.
In our StateProvider, we returned our Provider component with a value prop of state and dispatch from the useReducer Hook.

Accessing our state globally
In order to access our state globally, we’ll need to wrap our root <App/> component in our StoreProvider before rendering it in our ReactDOM.render() function:

// root index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { StateProvider } from './store.js';

const app = (
  <StateProvider>
    <App />
  </StateProvider>
);
ReactDOM.render(app, document.getElementById('root'));

Now, our store context can be accessed from any component in the component tree. To do this, we’ll import the useContext Hook from react and the store from our ./store.js file:

// exampleComponent.js
import React, { useContext } from 'react';
import { store } from './store.js';

const ExampleComponent = () => {
  const globalState = useContext(store);
  console.log(globalState); // this will return { color: red }
};

Adding and removing data from our state
We’ve seen how we can access our global state.
In order to add and remove data from our state, we’ll need the dispatch method from our store context. We only need to call the dispatch method and pass in an object with type (the action description as defined in our StateProvider component) as its parameter:

// exampleComponent.js
import React, { useContext } from 'react';
import { store } from './store.js';

const ExampleComponent = () => {
  const globalState = useContext(store);
  const { dispatch } = globalState;

  dispatch({ type: 'action description' })
};

Conclusion

Redux works for state management in React applications and has a few advantages, but its verbosity makes it really difficult to pick up, and the ton of extra code needed to get it working in our application introduces a lot of unnecessary complexity.

On the other hand, with the useContext API and React Hooks, there is no need to install external libraries or add a bunch of files and folders in order to get our app working. This makes it a much simpler, more straightforward way to handle global state management in React applications.

JavaScript Callback Functions – What are Callbacks in JS and How to Use Them

Shivam — Fri, 04 Dec 2020 04:54:08 +0000

What is a Callback Function?
In JavaScript, functions are objects. Can we pass objects to functions as parameters? Yes.
So, we can also pass functions as parameters to other functions and call them inside the outer functions. Sounds complicated? Let me show that in an example below:

function print(callback) {  
    callback();
}

The print( ) function takes another function as a parameter and calls it inside. This is valid in JavaScript and we call it a “callback”. So a function that is passed to another function as a parameter is a callback function.

Why do we need Callback Functions?
JavaScript runs code sequentially in top-down order. However, there are some cases that code runs (or must run) after something else happens and also not sequentially. This is called asynchronous programming.

Callbacks make sure that a function is not going to run before a task is completed but will run right after the task has completed. It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors.

In JavaScript, the way to create a callback function is to pass it as a parameter to another function, and then to call it back right after something has happened or some task is completed. Let’s see how…

How to create a Callback
To understand what I’ve explained above, let me start with a simple example. We want to log a message to the console but it should be there after 3 seconds.

const message = function() {  
    console.log("This message is shown after 3 seconds");
}
setTimeout(message, 3000);

There is a built-in method in JavaScript called “setTimeout”, which calls a function or evaluates an expression after a given period of time (in milliseconds). So here, the “message” function is being called after 3 seconds have passed. (1 second = 1000 milliseconds)
In other words, the message function is being called after something happened (after 3 seconds passed for this example), but not before. So the message function is an example of a callback function.

What is an Anonymous Function?
Alternatively, we can define a function directly inside another function, instead of calling it. It will look like this:

setTimeout(function() {  
    console.log("This message is shown after 3 seconds");
}, 3000);

As we can see, the callback function here has no name and a function definition without a name in JavaScript is called as an “anonymous function”. This does exactly the same task as the example above.

Callback as an Arrow Function
If you prefer, you can also write the same callback function as an ES6 arrow function, which is a newer type of function in JavaScript:

setTimeout(() => { 
    console.log("This message is shown after 3 seconds");
}, 3000);

What about Events?
JavaScript is an event-driven programming language. We also use callback functions for event declarations. For example, let’s say we want users to click on a button:

<button id="callback-btn">Click here</button>

This time we will see a message on the console only when the user clicks on the button:

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("User has clicked on the button!");
});

So here we select the button first with its id, and then we add an event listener with the addEventListener method. It takes 2 parameters. The first one is its type, “click”, and the second parameter is a callback function, which logs the message when the button is clicked.

As you can see, callback functions are also used for event declarations in JavaScript.
---------------Thank you for reading!------------

Tips For Freshers

Shivam — Sun, 29 Nov 2020 10:03:11 +0000

Tips

Always try to keep improving yourself
- Learn New tech things, compete with yourself, aalas mat khao, you should learn to push yourself everyday.
- Everyday wake up and set your mind to work on your skills, try even if you are not able to concentrate..so that after sometime or somedays your interest will be created automatically.
- yaad rakho, sunna sab ka hai magar karna wahi hai jo tumhe thik lagta ho.
- Waqt barbaad mat karo warna ek din waqt tumhe barbaad kardega.
- Apne career pe hamesha concentrate karo, Dost, Ladki/Ladka, Gaadi wagera sab khud-ba-khud tumhare pas aajayegi ek din.
- In Simple Terms INVEST IN YOUR SELF
Always Explore early: Do mistakes
- When yo start exploring things early in your life, you can figure out where your passion lies.
- Committing mistakes is good but repeating the same in not.
- Remember: Jitni Galti Karoge sikhne waqt utni he aage badhoge, aane walle samay mai.
MONEY or PASSION
- Always Follow your passion rather than money, because money is not a big deal, what matters is you vision about your future.
- Your vision for yourself should be the main agenda.
- Skills, knowledge pe hamesha dhyan dena, paise apne aap aajayega.
Opportunities
- Always look to grab the opportunities, It is good to follow your dream but never ignore the opportunities that come in between.
- "If somebody offers you an amazing opportunity but you are not sure you can do it, say yes – then learn how to do it later!" -Richard Branson
Stick to professionalism
- The IT sector is that kind of an industry which requires you to be a professional to the core.
- If the task given by them are not able to solve then talk to them about it and tell them the issue you are facing in the task.
- Communicate
Expectations
- Remember one thing don't believe and Faith anyone who is saying that I'll help you out to get a job or I have a good source, you just shared me your resume.
- They all are useless, it's better to take your own responsibility.
College ke us paar tum duniya ko nachate the aur college ke is paar duniya tumhe nachayegi isliye zaruri hai ki jitna jaldi sudhar jaoge utna he behetar rahega aane walle dino mai.
- So welcome to this new cycle and remember one thing - “The more value you give to this world the more the world will pay you.” So start adding more values in yourself!!
It’s good to have intelligence but if you don’t know how to use your emotional quotient you’ll lose the race. Offices are made up of people, who make policies, systems and rules.
Last but not the least
Work Smartly, Grab opportunities, Make a Career Plan, Learn
Remember: Time Ek Chiz Lati Hai Aur Woh Hai Experience, Aur Experience Ka Bohot Value Hai!!

--------------✌️ Thank You For Reading 😄--------------

Deploy a Full Stack MERN App using Netlify and Heroku.

Shivam — Fri, 13 Nov 2020 19:00:39 +0000

A guide for newbie to deploy a Full stack MERN app using Netlify and Heroku

What is MERN?
MERN stands for MongoDB - Express - React - Node.

MongoDB for the database
Node & Express for the server-side
React for the client-side
There's also the MEAN stack, which uses Angular instead of React, and the... MEVN(?) stack... whatever, it uses Vue instead of React or Angular.

Project Structure:

>.vscode : VS Code settings and extensions JSON files.
>client : Client-Side Code
>server : Server-Side Code

Configuration of Project

client and server, both needs: .gitignore and package.json files.

.gitignore: To ignore the files and directories we don't want stored in our repo
package.json: To specify our separate dependencies and devDependencies

Process of Deployment

What we're going to do specifically is host our server code on Heroku and our client code on Netlify. So our React App hosted on Netlify will make API requests to our Express API hosted on Heroku.

This will assume that you have both client and server running correctly and that you have already connected your app to a hosted database on MongoDB.

Create both netlify and heroku account and login.
Install both netlify and heroku CLI to your pc(check on web) or in your project directory as npm i netlify-cli and npm i heroku-cli.
Go to netlify login in client side and heroku login in server side. * In heroku after login, This will prompt you to press any key, once you do it will take you to your browser where you will just need to click 'Log In'.
- Once this is successful you can close that browser window and navigate to your server folder of your project.
- In netlify just type netlify login in terminal and it will navigate to netlify account automatically and ask you to authorize it and once you click on authorize and you will be logged in and then you can close the browser window and navigate to your client folder in your project.
In MongoDB, We need to allow access to your MongoDB database now from a new IP address. For simplicity, I added all IP addresses to be allowed.
- Go to MongoDB site.
- Navigate to the Project you're deploying using the dropdown on the top left.
- Then click the Network Access tab on the left side bar.
- Click the green button on the right of the screen that says Add IP Address.
- A modal will popup. Click the button that says Allow Access from Anywhere. This will place 0.0.0.0/0 in the Whitelist Entry input. Then click Confirm.
Coming Back to project folder in server directory, If you are using Express the We must change what this Express server will listen for to app.listen(process.env.PORT || 5000) and add a file called Procfile and type web: npm run build and next edit index.js file as app.get('/', (req, res) => { res.send('Hello from Express!') because after deployment we can see this message.
Create a Heroku new app in Heroku.com and follow the steps whatever is displayed after creating a new app, like git init, git remote..., git add., etc. and then after successful deployment navigate to open app on top right corner there you can see the message which we have edited in index.js file in step.5
After step.6 Our server code is officially deployed and configured correctly. Now continue to client code with netlify.
After login to netlify from terminal in step.3 push your code to git repository(If you don't know how to push please go through YouTube), and open your netlify account click New site from Git and through GitHub proceed with deployment.
After deployment navigate to build and deploy option on left side of your screen and then click on edit settings and Change your Base directory to client, change your Build command to npm run build, and change your Publish directory to client/build. Then click the Save button on the bottom left.
After that, Near the top in the tabs located right under your team name and site name click on Deploys, Then click the Trigger deploy button which has a drop down with two options. Always use clear cache and deploy site to ensure a fresh build that has all changes we have made.
Lastly after we deploy our front-end React code we must ensure any requests we are sending from the client-side is changed to use our Heroku URL now instead of localhost.
- In my structure the requests were being made from client/api/index.js so navigate to that file and any request that contains http://localhost:5000 must be replaced by your Heroku URL, where we got a message on the browser after deployment.(step.5)

12.Ensure that you push these changes up to GitHub. netlify will trigger a redeploy when they detect changes to your master branch. So for this to work you must make those changes apparent to netlify essentially.

-------Successfully Deployed a MERN App------------

Thank You For Your Time.

if you get stuck anywhere feel free to comment below I'll help you.

10 Things to Do After College

Shivam — Fri, 06 Nov 2020 12:58:41 +0000

More and more college students are starting to take advantage of the few years of freedom post-graduation, choosing to pursue other paths instead of jumping right into a nine-to-five, full-time career.
If you're a recent graduate who's hesitant to jump into the "real" work world, consider doing something else with your time, like interning, volunteering, or traveling. However, whatever you choose to do, make sure you think hard about your decision, as you want to be sure you have quality experiences to list on your resume when you do choose to begin the job search for a more permanent career.

1. Adventure Guide
Are you the adventurous type? Whether you're into white water rafting, skydiving, rock climbing, abseiling, kayaking, snorkeling, bungee jumping—turn it into a part-time or even a full-time job. Many adventure companies look for young people to hire.
There are opportunities both within the United States and also internationally, as many companies look to hire eager, English-speaking guides due to the popularity of these types of activities among college students who are abroad.

2. Invest in Your Passion
Do you love yoga or pilates? Can't spend enough time on the ski slopes? Are you a rock-climbing pro? Love to paint? If you have a passion that you can turn into a part-time job, consider investing in a training course and get certified, or even teach it on your own.
Whatever you love to do, look into how you can make a job out of it. Not only will you have a blast at work, but you'll gain the experience and skills you need to turn your hobby into a job that you can always fall back on.

3. Pursue a Part-Time Job That You're Passionate About
If you don't feel you're ready to jump into a nine-to-five career, take the year off working a part-time job in an area you're passionate about, or somewhere you've always thought about working, like at a flower shop, for example, but never had the time to try it out.
Not only does this give you the opportunity to pad your bank account post-college, but, it could develop into more promising opportunities down the road.

4. Work Seasonal Jobs
If you want a range of colorful, varied positions to add to your resume, pursuing a few seasonal jobs for a year is a fun way to get diverse work experience while also enjoying yourself. There are many types of seasonal jobs - positions at ski resorts, beaches, resorts, and cruise ships. If you plan wisely, you can find employment for a full year in this way.

5. Travel Recreationally
The best time to travel is after college when you are free of obligations to a job. If you have the opportunity to travel, you should do so when you can, as it broadens your perspective and is an important life experience.
If you decide to travel, make the most of it and take photos, or blog about it. You can then share whatever you come up with as an example of your multimedia, writing, or web design skills.

6. Do a Gap Year Program
If you're interested in putting your time towards a good career, consider a gap year program like the Peace Corps, AmeriCorps, or City Year.
Not only do these programs provide essential life lessons, but they also strengthen your resume and will undoubtedly give you a lot of material to discuss during an interview. Moreover, having participated in a Gap Year program links you with other alumni who may be valuable resources later on in your job search.

7. Work at Your College
If you decide to continue living close to your college, consider pursuing a job there, whether it is in administration or education. There are many jobs to be had on college campuses.
These types of jobs can be especially convenient if you still live in your college town, and can also lead to further opportunities, like the funding of post-graduate classes or even a degree, as many universities will allow their employees to take classes for free.

8. Take a Continuing-Education Class
Whether you're interested in pursuing a field other than what you majored in or want to develop career-specific skills further, consider taking continuing-education classes at a community college or an adult-learning center in your area.
For example, if you were an English major but want to pursue a different field, like computer programming or graphic design, taking classes gives you a foundation to begin looking for entry-level jobs in that field.

9. Start your own business
If you have an idea for a great product or a strong passion, starting your own business can be the best way to create your dream job. For example, if you're passionate and knowledgeable about physical fitness and earned a degree in business, you are well situated to start your own personal training company.

10. Start a career in Youtuber, Vlogger, Blogger, but remember one thing where ever you go what ever you do do it passion, Work Hard

---------Hope, Hum Sabki Wishes Pori Hojaye-------

Sass

Shivam — Fri, 30 Oct 2020 18:16:46 +0000

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of document structurally.

Why..??

It is a pre-processing language which provides indented syntax (its own syntax) for CSS.
It provides some features, which are used for creating stylesheets that allows writing code more efficiently and is easy to maintain.
It is a super set of CSS, which means it contains all the features of CSS and is an open source pre-processor, coded in Ruby.
It provides the document style in a good, structured format than flat CSS.

Architecture:

[Link] https://hackernoon.com/saas-software-as-a-service-platform-architecture-757a432270f5

The SaaS provider hosts the application and data centrally — deploying patches .

Features:

It is more stable, powerful, and compatible with versions of CSS.
It is an open source pre-processor, which is interpreted into CSS.
It uses its own syntax and compiles to readable CSS.
It is a super set of CSS and is based on JavaScript.

SASS supports two syntaxes namely SCSS and Indented syntax.

The SCSS (Sassy CSS) is an extension of CSS syntax.
Indented-Using this form of syntax, CSS can be written concisely. SASS files use the extension .sass

Deprecated Syntax:

= - It was used instead of : when setting variables and properties to values of Sass Script.
||= - It was used instead of : whenever you are assigning default value of a variable.
! - Instead of $, ! was used as variable prefix. Functionality will not be changed when it is used instead of $.

SASS is more powerful and stable that provides power to the basic language by using extension of CSS.

You can use SASS in three different ways-

As a command line tool
As a Ruby module
As a plugin for Rack enable framework

The following lists are some of the CSS extensions used in SASS −

Nested Rules: It is a way of combining multiple CSS rules within one another.
Referencing Parent Selectors: It is the process of selecting parent selector by using the & character.
Nested Properties: It allows nesting of properties into other properties which leads to grouping of another related code.
Placeholder Selectors: Sass supports placeholder selector using class or id selector by making use of @extend directive.

SaaS is defined as the software distribution model deployed on the internet in which a cloud service provider provides applications. It is also known as "on-demand software" or "pay-as-you-go application".

Sass Variable:
The basic syntax for defining a variable is simple: Just use a $ before the variable name and treat its definition like a CSS rule:
$:;

Once it's been declared, you can use the variable just as though you were typing the variable:
$large-font: 50px;
p {
font-size: $large-font;
}
Sass - Data Types Eg:
SaaS Script includes seven different data types: numbers, strings, colors, Booleans, null, lists & maps.

Number:
test: 10 + 3; //"plain" numbers added together
test: 10px + 3; //"plain" number added to a pixel value
test: 10em + 3em; //two "em" values added together

String:
$default-font: 'Lucida';
p {
font-family: $default-font, "Ariel", sans-serif;
}

Color:
SaaS Script supports the same color expressions that are supported by CSS: hex values such as #0000, named values such as red, rgb expressions like rgb(100, 39, 153), rgba expressions such as rgba(100, 39, 153, 75), hsl expressions such as hsl(0, 30%, 100%), and hsla expressions such as hsla(0, 30%, 100%, 0.3)

List:
A SaaS Script list is a series of values separated by either spaces or commas.
$body-font: Helvetica, Arial, sans-serif;
$body-margin: 0 0 10px 15px;

Map:
In SaaS Script, maps are key-value pairs. Their syntax is slightly different from a list: They must be comma-separated, and the entire map must be wrapped in parentheses:
$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);

Booleans & Nulls:
SaaS Script supports two Boolean values, true and false, as well as the null value, null. These have no direct meaning in CSS, but they're useful in combination with the control directives.

Sass - Control Directives
SaaS is a declarative scripting language, an extension to CSS, not a procedural programming language like JavaScript. Despite that, it does have some limited procedural capabilities via its control directives.

Conditional Execution - @if
As you'd expect, the Sass @if directive and its companions @else if and @else , allow you to include Sass code in the CSS output only if certain conditions are met. The basic syntax is simple:

@if {

}

sccs: if Conditions

$test: 3;
p {
@if $test < 5 {
color: blue;

}
}

sccs: Nested if Conditions

$test: 3;
p {
@if $test < 5 {
color: blue;
@if $test == 3 {
text-color: white;
}
}
}

Conditional Looping - @while
The syntax of the @while directive is very similar to that of @if; just replace the keyword:

@while {

}

Unconditional Looping - @for

@for from through {

}

@each
Finally, the @each directive will execute a set of items in either a list or a map. For such a powerful structure, the syntax is quite straightforward:

@each in {

}

4 reasons leading you to React.js for SaaS applications

Reusability of code
- React.js creates components on single-page applications that eventually function independently.
- The components can be further reused for other projects by allowing the SaaS developers to create the base that can be used to build instead of building from the beginning.
Fast Rendering
- The virtual DOM model enables faster rendering. The virtual DOM is an updated version of the original DOM which leads to superior performance, great SEO and easy maintainability.
SEO-friendly
- SaaS applications also need effective Search Engine optimization apart from the other set of features. Google rankings and user experiences should be on the top to let people stay ahead of the competition.
Effortless transfer from web page to mobile app
- This also can be done smoothly as React.js can enable the easy transfer of a single-page application to a mobile app.

Conclusion
The full potential of React.js is being realized with companies and their SaaS applications continuously preferring React.js to either build it from scratch or modify the existing version. React.js goes down as a lightweight and simple library that is tailored to meet the modern needs of the developers.

The SaaS provides various applications such as:

CRM applications
Solution to Human Resource (HR)
Pre-existing Billing & Invoicing systems
Other daily usable application suites

Open SaaS:

Open SaaS uses those SaaS applications, which are developed using open source programming language. These SaaS applications can run on any open source operating system and database.

Open SaaS has several benefits listed below:

No License Required
Low Deployment Cost
Less Vendor Lock-in
More portable applications
More Robust Solution

--------Thanks for the read.---------

React-Hooks basics

Shivam — Fri, 30 Oct 2020 14:54:04 +0000

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class.

When to use a Hooks:
If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

Rules to use Hooks:

Only call Hooks from React functions,
Only Call Hooks at the Top Level.
Hooks can call other Hooks

Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

Don’t call Hooks from regular JavaScript functions. Instead, you can:

Call Hooks from React function components.
Call Hooks from custom Hooks.

*Hooks States with: *
Hook state is the new way of declaring a state in React app. Hook uses useState() functional component for setting and retrieving state.

Hooks Effect:
The Effect Hook allows us to perform side effects in the function components. It does not use components lifecycle methods which are available in class components. In other words, Effects Hooks are equivalent to componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.

Built-in Hooks:
Here, we describe the APIs for the built-in Hooks in React. The built-in Hooks can be divided into two parts, which are given below:

Basic Hooks

useState
useEffect
useContext

Additional Hooks

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

eg:

useState eg:

import React, {
useState
} from 'react';

function Demo1() {
const [count, setCount] = useState(0);
return (

Count: {count}
setCount(0)}>Reset
setCount(count + 1)}>+
setCount(count - 1)}>-

);
}
export default Demo1;

useEffect eg:

function Demo2() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = You clicked ${count} times;
});

return (

You clicked {count} times

setCount(count + 1)}>Click me

);
}

useContext eg:

const TestContext = React.createContext();

function Display() {
const value = useContext(TestContext);
return

{value}, I am learning react hooks.;
}

function App() {
return (

);
}

useRef eg:

function App() {
let [name, setName] = useState("Nate");

let nameRef = useRef();

const submitButton = () => {
setName(nameRef.current.value);
};

return (

{name}

  <div>
    <input ref={nameRef} type="text" />
    <button type="button" onClick={submitButton}>
      Submit
    </button>
  </div>
</div>

);
}

More advanced hooks:
The 3 hooks mentioned above are considered to be the basic hooks. It’s possible to write entire applications using only useState, useEffect, and useContext, you could get away with just the first two. The hooks that follow offer optimizations and increasingly niche utility that you may never encounter in your applications.
useCallback:
React has a number of optimizations that rely on props remaining the same across renders. One of the simplest ways to break this is by defining callback functions inline. That’s not to say that defining functions inline will cause performance problems — in many cases, it has no impact. However, as you begin to optimize and identify what’s causing frequent re-renders, you may find inline function definitions to be the cause of many of your unnecessary prop change.
import doSomething from "./doSomething";
const FrequentlyRerenders = ({ id }) => {
return (
onEvent={useCallback(() => doSomething(id), [id])}
/>
);
};
useMemo:
It's closely related to useCallback, but for optimizing data processing. It has the same API for defining what values it depends on as useEffect and useCallback.
const ExpensiveComputation = ({
data,sortComparator, filterPredicate}) => {
const transformedData = useMemo(() => {
return data
.filter(filterPredicate)
.sort(sortComparator);
},[data, sortComparator, filterPredicate]);
return

;
};
useRef:
useRef provides a mechanism for these cases. It creates an object that exists for as long as the component is mounted, exposing the value assigned as a .current property.
// DOM node ref example
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// current points to the mounted text input element
inputEl.current.focus();
};
return (
<>

Focus the input

</>
);
}// An arbitrary instance property

  function Timer() {
           const intervalRef = useRef();
           useEffect(() => {
              const id = setInterval(() => {
                // ...
              });
           intervalRef.current = id;
           return () => {
              clearInterval(intervalRef.current);
           };
         });
  }

useReducer:
This hook has interesting implications for the ecosystem. The reducer/action pattern is one of the most powerful benefits of Redux. It encourages modeling UI as a state machine, with clearly defined states and transitions. One of the challenges to using Redux, however, is gluing it all together. Action creators, which components to connect(), mapStateToProps, using selectors, coordinating asynchronous behavior.

Rarely used hooks:

_useLayoutEffect:_If I use any of these 3, I anticipate it will be useLayoutEffect. This is the hook recommended when you need to read computed styles after the DOM has been mutated, but before the browser has painted the new layout. This gives you an opportunity to apply animations with the least chance of visual artifacts or browser rendering performance problems. This is the method currently used by react-flip-move

_useMutationEffect:_This is the hook I’m having the hardest time wrapping my head around. It’s run immediately before React mutates the DOM with the results from render, but useLayoutEffect is the better choice when you have to read computed styles. The docs specify that it runs before sibling components are updated and that it should be used to perform custom DOM mutations. This is the only hook that I can't picture a use case for, but it might be useful for cases like when you want a different tool (like D3, or perhaps a canvas or WebGL renderer)

React Hooks Tutorial for Beginners: setting up the project
npx create-react-app exploring-hooks
(You should have one of the latest version of Node.js for running npx).

In React component, there are two types of side effects:
1.Effects Without Cleanup
2.Effects With Cleanup

Advantage of React.js :

Easy to Learn and Use
Creating Dynamic Web Applications Becomes Easier
Reusable Components
Performance Enhancement
The Support of Handy Tools
Known to be SEO Friendly
The Benefit of Having JavaScript Library
Scope for Testing the Codes

Disadvantage of React.js

The high pace of development
Poor Documentation
View Part
JSX as a barrier

In conclusion
Hooks have me excited about the future of React all over again. I’ve been using this tool since 2014, and it has continually introduced new changes that convince me that it’s the future of web development. These hooks are no different, and yet again substantially raise the bar for developer experience, enabling me to write durable code, and improve my productivity by extracting reused functionality.
I expect that React applications will set a new bar for end-user experience and code stability.

Questions:
Q. Which versions of React include Hooks?
Starting with 16.8.0, React includes a stable implementation of React Hooks for:
* React DOM
* React Native
* React DOM Server
* React Test Renderer
* React Shallow Renderer

Q. Do I need to rewrite all my class components?
No. There are no plans to remove classes from React.

Q. What can I do with Hooks that I couldn't with classes?
Hooks offer a powerful and expressive new way to reuse functionality between components.

Q. How much of my React knowledge stays relevant?
Hooks are a more direct way to use the React features you already know — such as state, lifecycle, context, and refs. They don't fundamentally change how React works, and your knowledge of components, props, and top-down data flow is just as relevant.

Q. How to test components that use Hooks?
From React point of view, a component using Hooks is just a regular component. If your testing solution doesn't rely on React internals, testing components with Hooks shouldn't be different from how you normally test components.

------Thanks for the read.---------