## What is React?
React is a free and Open Source Front End JavaScript Library for building complex User Interfaces by dividing your application into smaller components. It is maintained by Facebook and a community of Developers.

## Pre-requisites for learning React
Before learning React or trying to learn React, I would say to familiarize yourself with HTML, CSS, & JavaScript.You can learn HTML and CSS within 2-3 weeks as they are used for creating layouts for your web application. JavaScript takes some time to lean as it is a programming language. Spend at least a month or two learning JavaScript. Don't just learn and learn, but also create small projects to implement the knowledge that you have gained. You can create some mini projects like **To-Do Lists**, **Calculator**, **Random Jokes Generator** etc.

## JavaScript 
While learning JavaScript, you have to avoid some mistakes that I made. When I was learning JavaScript, I thought that I have to become a **absolute master of JavaScript** to write React code (which is non-sense). I started learning advanced concepts (as a beginner), failing which, I thought I am not good enough. But, let me tell you, as a beginner you need to learn just enough ,so that you can create basic projects in vanilla JavaScript. Some topic to learn and understand deeply are 

- Variables
- if/else conditions and switch statements
- Difference between var, let & const
- Functions
- Arrays
- Array methods like **filter**, **map**, **reduce** etc.
- ES6 Concepts
- Promises
- Callbacks
- Async/await
- Classes and OOPs Concepts
- Working with APIs
Again, don't just learn, **APPLY!!**

## React
At this point of time, when you have learned JavaScript essentials, it is time for you to dive into React. You can start learning React by taking a look at React Official Docs or by taking their React Official Tutorial to get some idea of how React works. React Docs are very well written covering the fundamentals of React. Learn these topics very well to understand React fundamentally.
- JSX
- Components (Functional and Class based)
- Lifecycle Methods
- State
- Props
- Handling events
- Forms
- Conditional Rendering
- Working with third-party APIs.
Once you have gained understanding of these topics, it is time for you to create projects in order to implement them. You can create new projects or the remake the ones you made while learning vanilla JavaScript using React.

## React Router
Learn about React router. React router is a routing library for react which will help you to navigate through different pages in your React App. Learn about loading specific page's content, passing params in the URL, redirecting etc. Also, understand that react router is not a part of React, it's a routing library made for React.

## Advanced React
Now, that you have basic React knowledge and also created some basic projects, it is time to learn some advanced concepts like **Hooks**, **Context** etc. Take a look at React Docs and learn these concepts.
- Context
- Hooks
- Error Boundaries
- Higher Order Components
- Code Splitting
- Refs
- Forwarding Refs
- Render props

## Some extra stuff!
You can also learn some extra libraries like **Material UI**, **reactstrap**, **tailwindcss**, **Semantic UI** etc, once you have learned the basics of React. These libraries will help you in your day-to-day React Dev life. However, it is not compulsory to learn everything, you can try and learn them once you are done with React basics and can make projects.

## Congratulations 🥳
You are a React Developer. Now you just have to hone you skills by creating projects and visiting React Docs often and learning new things.

## Some resources to learn React - 
- [React JS Crash Course 2021 by Traversy Media](https://www.youtube.com/watch?v=w7ejDZ8SWv8)
- [Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks By FreeCodeCamp](https://www.youtube.com/watch?v=4UZrsTqkcW4)
- [Full Modern React Playlist by The Net Ninja](https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d)

## Some useful tips
- Don't try to learn everything at once, understand and accept the fact that you a beginner and spend enough amount of time to learn these concepts.

- Don't be afraid of writing bad code. Like I mentioned earlier, you are a beginner, at some point everyone is. Understand that `Progress >>>> Perfection`

- Avoid **Tutorial Hell 🤯**. Tutorial Hell refers to the term when you follow a tutorial after tutorial, and you think you are learning, when in fact you learn nothing. If you watching Youtube tutorials, don't just watch video after video. Realize that you are stuck in Tutorial Hell and stop watching more videos and start creating your own projects.

- Make Google, StackOverflow, articles & blogs your best friend. Start googling your questions, there is a high probability that your problem/error has already been solved by someone else on the internet.

Find me here - 
Github - [shaan-alam](https://github.com/shaan-alam)
Twitter - [shaancodes](https://twitter.com/shaancodes)
Instagram - [shaancodes](https://instagram.com/shaancodes)
LinkedIn - [Shaan Alam](https://www.linkedin.com/in/shaan-alam-01784018a/)

What is React?   React is a free and Open Source Front End JavaScript Library for building...

How to learn React - The Effective way

Shaan Alam

## Intro

Hey ya folks!
Have you ever wondered how to implement Google Authentication in your React applications? Well, worry not, because today I am gonna show you exactly how is it done.

## But, why is it needed?

OAuth is a Open Standard Authorization protocol that provides appliactions the scopes of the user's data without sharing their password to other applications. It also makes authentication process a lot easier both for the developer and the user. For example, you might have seen "Login with Google" button on some websites. When you click that button, a request is made to Google's servers and the user's data (without password) is returned to the client side. This response can also be used against our own API to authenticate the user.

![google login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w737260lqyx4751bll5.png)

## What are we gonna make?

We are gonna be creating a React App which will use Google OAuth to authenticate the user. For the simplicity of the application I'm gonna store the user's data inside the component state.

## What you will learn?

- Implementing Google Authentication in your React App (pretty obvious 😅)
- Creating a Node REST API 💻
- Using TypeScript on client and server side 😎

## Folder Structure

## Client Side

📦client
┣ 📂 public
┣ 📂 src
┃ ┣ 📂 components
┃ ┃ ┣ 📜 GoogleAuth.tsx
┃ ┣ 📂 pages
┃ ┃ ┃ ┗ 📜 Login.tsx
┃ ┣ 📜 App.tsx
┃ ┣ 📜 index.tsx
┃ ┣ 📜 .env

### Server side

📦server
┣ 📂 src
┃ ┣ 📂 controllers
┃ ┃ ┗ 📜 auth.controller.ts
┃ ┣ 📂 models
┃ ┃ ┗ 📜 user.model.ts
┃ ┣ 📂 routes
┃ ┃ ┗ 📜 auth.route.ts
┃ ┗ 📜 index.ts
┣ 📜 .env

## Let's Go!! 🏃

### Create a Google Cloud Project
Go to [Google Developer Console](https://console.cloud.google.com/apis/dashboard). Create a new Project. You'll need to configure your **OAuthc consent screen**. Give your application a name, user supported email, app logo etc. Goto **Credentials** tab and create credentials. 
Select OAuth Client ID and choose the application type as web.
Give your application a name and mention authorized JavaScript origins and redirect origins.
You will get your **Client ID**. Save this client ID as .env file for both client and server.

![google console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7w5gfb19tcqoj8a1sb2j.png)

### Initial Project Setup

First of all, we need to setup our backend and create a REST API to authenticate our user. Create a folder called **server** and inside it initialize an empty project.

```bash
yarn init -y

OR

npm init -y
```

Install the following dependencies.

```bash
yarn add cors dotenv express google-auth-library mongoose
```

Since I already mentioned that we are going to use TypeScript for our application, we will need to install type definitions for these dependencies. We will install the type definitions as **dev dependencies** because they are not needed in production.

```bash
yarn add @types/cors @types/express @types/mongoose -D
```

We will also be needing **nodemon**, **ts-node** and **typescript**, let's install them as well

```bash
yarn add nodemon ts-node typescript -D
```

Next, we need to generate a **tsconfig.json** file. This file contains all the configuration for our TypeScript project like rootDir, compiler options etc.

```bash
npx tsc --init
```

We need to make some changes in the **tsconfig.json** file.

![tsconfig.jsona](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddbyu556ena6azqgbi0m.png)
![tsconfig.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svbf4rjihfebcep79sca.png)

Also, add the following scripts to your **package.json**

```json
"scripts": {
    "dev": "nodemon ./src/index.ts",
    "build": "rm -rf && tsc"
  },
```

### Creating an express server

Before creating an express server, I'd like to show you an overall flowchart of how we will be creating our express server.

![flowchart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c8m169weria801a0cv1.png)

Create a file **src/index.ts** and inside it we will create a basic express server.

```ts
import express from "express";
import authRoutes from "./routes/auth.route";
import mongoose from "mongoose";
import dotenv from "dotenv";
import cors from "cors";

dotenv.config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());
app.use("/auth", authRoutes);

mongoose.connect(`${process.env.MONGO_URI}`);

const db = mongoose.connection;
db.once("open", () => console.log("Connected to Mongo DB!!"));
db.on("error", (error) => console.error(error));

app.listen(PORT, () =>
  console.log(`The server is up and running on PORT ${PORT} 🚀`)
);
```

Let me explain you what is happening here,

```ts
import express from "express";
import authRoutes from "./routes/auth.route";
import mongoose from "mongoose";
import dotenv from "dotenv";
import cors from "cors";

dotenv.config();
```

First we import all these dependencies and the configure dotenv to load our environment variables.

```ts
app.use(cors());
app.use(express.json());
app.use("/auth", authRoutes);
```

Then we define some middlewares here. We make a middleware to use cors(). The second middleware will help us recieve JSON data through requests. And the third middleware is a route middleware.

```ts
const db = mongoose.connection;
db.once("open", () => console.log("Connected to Mongo DB!!"));
db.on("error", (error) => console.error(error));

app.listen(PORT, () =>
  console.log(`The server is up and running on PORT ${PORT} 🚀`)
);
```

Then we finally connect to our MongoDB database and listen to our express server on PORT 5000.

### The User Model

Next, we need to create a **user model** to save the user documents into the database. Create a **models/user.model.ts** file.

```ts
import mongoose from "mongoose";

interface UserDocument extends mongoose.Document {
  email: string;
  avatar: string;
  name: string;
}

const UserSchema = new mongoose.Schema({
  email: {
    type: String,
    required: true,
  },
  avatar: {
    type: String,
    default: "",
  },
  name: {
    type: String,
    required: true,
  },
});

export default mongoose.model<UserDocument>("User", UserSchema);
```

Notice, we are only implementing google auth here, so I haven't specified the password field here, however if you are creating an authentication system by yourself, you might probably want to have a password field too.

### Controller

We have to create a controller for authenticating our user and sending back the response to the client.

Create a file **controllers/auth.controller.ts**.

```ts
import { Request, Response } from "express";
import { OAuth2Client } from "google-auth-library";
import User from "../models/user.model";

const googleClient = new OAuth2Client({
  clientId: `${process.env.GOOGLE_CLIENT_ID}`,
});

export const authenticateUser = async (req: Request, res: Response) => {
  const { token } = req.body;

  const ticket = await googleClient.verifyIdToken({
    idToken: token,
    audient: `${process.env.GOOGLE_CLIENT_ID}`,
  });

  const payload = ticket.getPayload();

  let user = await User.findOne({ email: payload?.email });
  if (!user) {
    user = await new User({
      email: payload?.email,
      avatar: payload?.picture,
      name: payload?.name,
    });

    await user.save();
  }

  res.json({ user, token });
};
```

Let me explain what's happening here.

```ts
import { Request, Response } from "express";
import { OAuth2Client } from "google-auth-library";
import User from "../models/user.model";

const googleClient = new OAuth2Client({
  clientId: `${process.env.GOOGLE_CLIENT_ID}`,
});
```

First we import all the necessary dependencies and libraries we want, and then we initialize our google client using the client ID we received from google.

Next, we create and export a **authenticateUser** function, which is basically our controller.

Inside the **authenticateUser** function, we grab the token from **req.body**. (We will send the token from the client)

```ts
const { token } = req.body;
```

```ts
const ticket = await googleClient.verifyIdToken({
  idToken: token,
  audient: `${process.env.GOOGLE_CLIENT_ID}`,
});

const payload = ticket.getPayload();
```

And then we verify the token and get a payload which will contain the details of our user.

```ts
let user = await User.findOne({ email: payload?.email });
if (!user) {
  user = await new User({
    email: payload?.email,
    avatar: payload?.picture,
    name: payload?.name,
  });

  await user.save();
}

res.json({ user, token });
```

Next, we check if the user received from google already exists in our database. If it exists then we return the same user along with the token, or else, we create and save a new user in our database.

### Routes

Now we need to run this controller whenever the server hits the **/auth** endpoint. For that we need to specify routes to our express server. Create a **routes/auth.route.ts** file. Import the controller and specify it for the **/** POST route.

```ts
import express from "express";
import { authenticateUser } from "../controllers/auth.controller";

const router = express.Router();

router.post("/", authenticateUser); // (This is actually /auth POST route)

export default router;
```

## Client side

Now, that we have our backend ready, it's time for us to work on front end. Initialize a React App.

```bash
yarn create react-app --typescript google-login-project
cd google-login-project
```

Install the following dependencies

```bash
yarn add react-google-login react-router-dom axios
yarn add @types/react-router-dom -D
```

## Creating UI

Let's create UI for our application. Inside **App.tsx** make the following changes

```ts
import { Switch, Route } from "react-router-dom";
import GoogleAuth from "./components/GoogleAuth";

const App = () => {
  return <GoogleAuth />;
};

export default App;
```

### GoogleAuth Component

In **App.tsx** you have seen that we've used a GoogleAuth component. Let's make that one in the components directory.

```ts
// /components/GoogleAuth.tsx
import { useState } from "react";
import axios, { AxiosResponse } from "axios";
import GoogleLogin from "react-google-login";

interface AuthResponse {
  token: string;
  user: User;
}

interface User {
  _id: string;
  name: string;
  email: string;
  avatar: string;
}

const GoogleAuth = () => {
  const [user, setUser] = useState<User | null>(null);
  const onSuccess = async (res: any) => {
    try {
      const result: AxiosResponse<AuthResponse> = await axios.post("/auth/", {
        token: res?.tokenId,
      });

      setUser(result.data.user);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="h-screen w-screen flex items-center justify-center flex-col">
      {!user && (
        <GoogleLogin
          clientId={`${process.env.REACT_APP_CLIENT_ID}`}
          onSuccess={onSuccess}
        />
      )}

      {user && (
        <>
          <img src={user.avatar} className="rounded-full" />
          <h1 className="text-xl font-semibold text-center my-5">
            {user.name}
          </h1>
        </>
      )}
    </div>
  );
};

export default GoogleAuth;
```

Since this is a simple application I've used conditional rendering here rather than routing. If the user is not set in state, we will render the Google login component else we will display the user's details (avatar and name). 

However, if you want, you can store the user's data in redux store or Context API which seems more practical.

## Wrapping up ✨
That was it. We've sucessfully implemented Google OAuth in our React Application. 
Github repo - [https://github.com/shaan-alam/google-login](https://github.com/shaan-alam/google-login)

## Find me here 🌍
Github - [shaan-alam](https://github.com/shaan-alam)
Twitter - [shaancodes](https://twitter.com/shaancodes)
LinkedIn - [Shaan Alam](https://www.linkedin.com/in/shaan-alam-01784018a/)
Instagram - [shaancodes](https://instagram.com/shaancodes)


Intro   Hey ya folks! Have you ever wondered how to implement Google Authentication in your...

How to implement Google Authentication in your React Applications!!

Okay! Before you declare me crazy and ask **“How the hell can anyone build a second braing using Next.JS?”** Let me tell you that I am not talking about a physical brain. I am talking about a repository of all the knowledge and information you have gathered over the years which you can visit anytime for ideas and inspiration.

## What is second brain? 🤔

Our brain is meant for generating ideas and not storing them. So, how do we store them then? There comes the use of second brain. Second brain is where we store all our ideas, insights, experience, ideas, notes etc. It is perfect system for remind us of all the things we’ve gathered over the period of time which otherwise we would have easily forgotten. As **[Tiago Forte](https://fortelabs.co/)** puts it in his words - 

> We feel a constant pressure to be learning, improving ourselves, and making progress. We spend countless hours every year reading, listening, and watching informational content. And yet, where has all that valuable knowledge gone? Where is it when we need it? Our brain can only store a few thoughts at any one time. Our brain is for having ideas, not storing them.
> 

> Building A Second Brain is a methodology for saving and systematically reminding us of the ideas, inspirations, insights, and connections we’ve gained through our experience. It expands our memory and our intellect using the modern tools of technology and networks.
> 

## Why to create second brain? 🤷‍♂️

Having a second brain as your knowledge base can be useful to you further down the line. It is a good way to document your learnings and experiences. It’s like writing notes for your future-self. You’re gonna thank yourself at later point in life for docmenting your learnings. The sooner you start documenting, the better!! 

## How can we developers use this concept? 🙂

We as developers have to constantly keep up to the latest tech. In this day & age, it can be overwhelming to keep up with all the knowledge. I figured a way for this problem. How about we have a personal space on the internet where we keep all our ideas & notes so we won’t have to google the same thing every time? 

I did it by creating a personal documentation site for myself where I now keep all my development related notes and practices. I can hear you say, “But I don’t want to spend time building a site for this!!” 

That’s exactly what I thought. This is why I went with Nextra.

## What is Nextra? 😲

**Nextra** is a **Static Site Generator** based on Next.JS. As the official site says - 

> It supports Markdown and React components ([MDX](https://nextra.vercel.app/features/mdx)), automatically generated [sidebar and anchor links](https://nextra.vercel.app/get-started#sidebar-and-anchor-links), file-system based routing, built-in syntax highlighting, image
optimization, custom layouts, i18n, and all the features you love about
Next.js.
> 

**Nextra** is a perfect solution for our problem. When we create a site using Nextra, we only need to create MDX files and mention those files in a **“meta.json”** file so that Nextra could automatically generate a sidebar for you to navigate through your files. Here’s an example of the [site](http://shaan-docs.vercel.app) that I built for myself.

![Nextra Nextjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/daits7hisd07rmvgo4zx.png)

## Nextra Features

- **MDX** - With Nextra all your `.md` and `.mdx` files will be rendered under the pages directory. The good thing with `.mdx` files are that they support React components. So you can create your own custom React components and use them. You can check more on MDX on their official [docs](https://mdxjs.com/docs/getting-started/).
- **SSG** - Nextra is built using Next.JS. So, obviously it supports **Static Static Generation (SSG)**. Static Site Generation means your webpages will be generated at build time and statically served to users. You can read more about **SSG**  with Next.JS [here](https://nextjs.org/docs/basic-features/pages#static-generation-recommended).
- **Next Image** - You can use Next Image component inside the `.mdx` files just like any other component.
- **Syntax Highlighting** - Nextra comes with in-built syntax highlighting. However, when I created my site the syntax highlighting feature doesn’t seem to be working. So, I ended up creating my own syntax-highlighting component with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
- **Dark mode** - Nextra comes with the support of dark mode. Also, it uses Tailwind CSS under the hood for styling purposes.
- **Easy Configuration** - The best thing is that you can configure your site according to the way you want. To configure the theme, you just have to edit **theme.config.js** file in the root directory.

## How can you build your own documentation site?

1. Visit [Nextra](https://nextra.vercel.app/) homepage and click on **Get Started** link from the sidebar.
2. Click on the **Deploy** button on the **Get Started** page. ![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1h9xbtge1zyghpyyh2n.png)
3. You will be redirected to vercel.com. Choose a Repository name and whether you want it to be private or not and then click on create. The deployment process will start automatically.![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhu2nc01rwnabhzb7pxa.png)
4. Visit the Git Repository and clone it onto your system. `npm install && npm run dev` your website and **TADA**!! 🎉 You got your own documentation site..
![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqxowj0sd1rr0bf2ofzc.png)
5. To add a page, just create a `.mdx` files inside the pages directory and also mention that newly created file inside the **meta.json** file. Nextra will automatically generate sidebar links for your pages.


![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hazaup6bj2rqbj5igru2.png)

![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwvdzsskynhqhq8qwc3h.png)

You can now use this site to store all your development knowledge here. For example, I’m using this site to 

- Write code snippets (that I usually forget 😅). It saves me time googling the same thing everytime.
- Write anything I learn about.
- Revise/go through my notes whenever I’m free

## Wrapping up!!

This is a great way of storing your inspirations, ideas, knowledge etc. It’s like you’re building your own knowledge network/database. 

## Connect with me

Twitter - [shaancodes](https://twitter.com/shaancodes)
Github - [shaan-alam](https://github.com/shaan-alam)
YouTube - [shaancodes](https://www.youtube.com/channel/UC9eR4oVH9IWR8SVvrw61Cog)
Instgram - [shaancodes](https://instagram.com/shaancodes)

Okay! Before you declare me crazy and ask “How the hell can anyone build a second braing using...

Hi, I amShaan Alam 👋

I Code & Design Things!

Some of my writings

How to learn React - The Effective way

How to implement Google Authentication in your React Applications!!

How I built my second brain using Next.JS