Forem: Pratham

Does GraphQL replace REST API ?

Pratham — Sat, 05 Mar 2022 05:39:02 +0000

GraphQL is gaining popularity because of its ability to develop APIs more efficiently, powerful, and flexible as compared to REST.
We all know REST is the traditional method to work with APIs but after the launch of GraphQL in 2015 it has really taken off with developers.

GraphQL is the query language for your API which allows you to get exactly the data you need (no more, no less) whenever you need it. It was developed by Facebook & now it's maintained by a large open-source community.

GraphQL Advantages

Let's take a look at an example: Suppose we want to make a blog app & we want to display the name, title, followers of a specific user. With REST API, we might have to send the request to multiple endpoints in order to fulfill our data needs.

for example:

/users/{id}/name
/users/{id}/posts/title
/users/{id}/followers

With REST API you will end up sending 3 requests to the server. In the case of GraphQL, we just have to send a single query to the GraphQL server & then the server will respond with JSON data.

query {
 User {
   name
      posts {
        title
        comments {
          comment
        }
     }
     followers {
       name
     }
  }
}

and we will get a response like this:

{
  "data": 
  {
    "user": {
      "name": "John Doe",
      "posts": [
      {
        "title": "How to fetch data from an API",
        "comments": [
        {
          "comment": "Great post."
        }
       ]
     },
     {
       "title": "How to build REST API with Node.js",
       "comments": [
        {
          "comment": "So neat & precisely written."
        }
       ]
     }
    ]
    "followers": [
    {
      "name": "Ben Smith"
    }
   ]
  }
 }
}

No over and under-fetching

Over-fetching means the client downloads more data than required & Under-fetching means that the specific endpoint doesn't provide enough data which the client needs.

In REST API each endpoint has a fixed data structure which means most of the time we fetch more data than we actually need or we need to call multiple endpoints to fulfill our data needs.

In the case of GraphQL, it allows clients to request data from several resources with a single request which solves the problem of overfetching & underfetching.

Speeds up the development process

Suppose you're working on a project whose product requirements change suddenly & the worst case happens: the REST API requires a new endpoint. Now In this case front-end developer team will get blocked on their work & will be entirely dependent on the backend developer team.

GraphQL makes front-end developers' lives easier because the data consumed on the client is no longer coupled to an endpoint's resource which speeds up the development process for both frontend & backend developer teams.

Comparing GraphQL with REST

Popularity

GraphQL is gaining popularity exponentially over the last few years.
According to the State of API Integration Report 2021,
75% of respondents expect GraphQL to be the dominant future query language for APIs. For reference, in 2020 only 40% said GraphQL would be the predominant approach in the future

But REST remains the most popular among the respondents of API report 2021 as they believe GraphQL is lagging behind industry adoption.

Usability

It's simple to get the precise data you need from your database using GraphQL's queries. This makes data consumption much easier as you get predictable results.

Compared to REST It returns all the data available from the specific endpoint. This can lead to data dumps where the client has to download unnecessary data which is not used.
Arguably GraphQL is easier to use as compared to REST.

Performance

Customized queries in GraphQL improve efficiency in a variety of ways, from lowering the number of API requests to ensuring the proper amount of data is returned.
But wait… REST API might be better when it comes to performance
To return cached results quicker, REST APIs use the built-in HTTP caching mechanism which can perform better in circumstances where caching is required to fast-track API calls. Caching is also available in GraphQL, but not to the same extent as it is in REST.

Pros and Cons

GraphQL pros
Provides consistent, uniform data.
Eliminates over-fetching & under-fetching.
Speeds up the development process

GraphQL cons
Lacks built-in caching.
Complicated error handling.
Lacks industry adoption & support.

REST API pros
Supports different data formats (Html, JSON, etc.)
Popular & has great adoption & support from the community.

REST API cons
Multiple requests to the server to fetch all the data needed.
No specific method for structuring API.

Conclusion

I am not an API expert but I find it really interesting & fascinating to work with GraphQL. If you're looking for an answer to which one is better you probably are at the wrong place. It really depends on every application's use-cases to decide which API form is better.

I suggest just trying experimenting with them both & see if that fits your development workflow.

Comment down below If you got an opinion that you want to share.
I hope you liked the article.
Keep learning!

How to use Styled Components with React.js

Pratham — Sun, 06 Feb 2022 09:12:21 +0000

Styled Components is react library that allows us to style react components individually.

In this tutorial, you will learn about styled-components & how to use styled-components in your React application.

We can use styled-components in React & react-native applications but this guide will focus only on using styled-components with React.

What are Styled-components ?

Styled Components allows us to write CSS in JavaScript

It is a component-based framework specially developed for react & react-native applications which uses component-based approach to manage our styles.

It removes the mapping between components and styles. This means that when you're defining your styles, you're actually creating a normal React component, that has your styles attached to it.

But why Styled-components ?

Reusable styles: You're writing CSS in a component-based approach which means once you define your styles you can use that anywhere inside your project.

No class name bugs: In styled-components you don't have to worry about naming conventions, the library provides unique class name that eliminates duplication, overlap or misspellings errors.

Easy to manage CSS: You never have to find different files affecting the styling which makes it easier to manage CSS.

Eliminates unused code: If any specific styled-component is unused it automatically deletes all its styles.

Installing styled-components

Start by creating react application

npx create-react-app styled-components-tutorial

To use styled-components, you first have to install it using npm or yarn.

    # with npm
    npm install --save styled-components

    # with yarn
    yarn add styled-components

or if you're not using any package manager you can use styled-components with CDN, just add this to bottom of your html file.

    <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

Getting started

styled-components uses tagged template literals to style your components.

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

    // Creating a Heading styled-component that'll render an <h1> tag with some additional styles
    const Heading = styled.h1`
      font-size: 1.5em;
      color: #2F9ED8;
    `;

    // Creating a Container styled-component that'll render an <section> tag with some additional styles
    const Container = styled.section`
      padding: 4em;
      background: #B6585F;
    `;

    function App() {
      return (
        <div>
          <Container>
            <Heading>Styled Components</Heading>
          </Container>
        </div>
      );
    }

You can visit codesandbox & see the output.

In the above example we created styled-components inside existing component file. we can also create a separate file for styled-components.

    // Heading.js
    import styled from 'styled-components';

    const Heading = styled.h1`
      font-size: 1.5em;
      color: #2F9ED8;
    `;

    export default Heading;

Now you can use Heading Component in any component of the project.

    // App.js
    import React from 'react';
    import styled from 'styled-components';

    // import the styled component:
    import Heading from './Heading';

    const App = () => {
      return (
         <div>
            <Heading>Styled Components</Heading>
        </div>
      )
    }
    export default App;

Props in styled components

Styled components are functional components which means we can style components dynamically.
To make our components styles dynamic we use props.

Let's take a look at example

Suppose you want different buttons in your application (for ex. Primary, Danger, etc)

    const Button = styled.button`
      background: ${props => props.primary ? "blue" : "white"};
      color: ${props => props.primary ? "white" : "blue"};

      font-size: 1em;
      margin: 1em;
      padding: 0.25em 1em;
      border: 2px solid blue;
      border-radius: 3px;
    `;

    return(
      <div>
        <Button>Normal</Button>
        <Button primary>Primary</Button>
      </div>
    );

We are rendering two button components, one normal button & one with "primary" as prop.

Live code example here.

Make it Responsive

To make your components responsive we can use media-queries just as we use them in plain CSS.

    const Button = styled.button`
      background: ${props => props.primary ? "blue" : "white"};
      color: ${props => props.primary ? "white" : "blue"};

      font-size: 1em;
      margin: 1em;
      padding: 0.25em 1em;
      border: 2px solid blue;
      border-radius: 3px;

      @media (min-width: 768px) { 
        padding: 1rem 2rem;
        width: 11rem;
      }

      @media (min-width: 1024px) { 
        padding: 1.5rem 2.5rem;
        width: 13rem;
      }
    `;

    return(
      <div>
        <Button>Normal</Button>
        <Button primary>Primary</Button>
      </div>
    );

Overriding styles

To change a component slightly we can extend the style for a single use case.

For example:

    const Button = styled.button`
      color: blue;
      font-size: 1em;
      margin: 1em;
      padding: 0.25em 1em;
      border: 2px solid palevioletred;
      border-radius: 3px;
    `;

    const TomatoButton = styled(Button)`
      color: tomato;
      border-color: tomato;
    `;

    return(
      <div>
        <Button>Normal Button</Button>
        <TomatoButton>Tomato Button</TomatoButton>
      </div>
    );

Global Styling

Thankfully, we have a bult-in function createGlobalStyle in styled-components to apply global styles to our component.

We can use createGlobalStyle to set same font-family, override default-browser styling, etc. (you got the point.)

    // App.js
    import React from 'react';
    import styled, { createGlobalStyle } from 'styled-components';
    import { Container, Nav, Content } from '../components';

    const GlobalStyle = createGlobalStyle`
      body {
        margin: 0;
        padding: 0;
        background: teal;
        font-family: Open-Sans, Helvetica, Sans-Serif;
      }
    `;

    const App = () => {
      return (
        <>
          <GlobalStyle />
          <Container>
            <Nav />
            <Content />
          </Container>
        </>
      )
    }
    export default App;

Note: Styles created with createGlobalStyle do not accept any children

and that's it!

give yourself a pat on the back if you've made it till the end.

Conclusion

We covered the fundamentals & some basic concepts of styled-components & they are enough to get you rolling.

Now don't stop here use styled-components in your next project and see how it goes.

Don't forget to check out styled-components documentation.

Everything about React JS.

Pratham — Sun, 30 Jan 2022 18:39:58 +0000

React is free, open-source & component-based front end library which is responsible for the frontend of the application. It is developed and maintained by Facebook.

React was the most popular JavaScript library in 2021.

React is flexible, easy to learn & has a great community support.

If you want to learn the framework that will give you the best odds of landing a job in 2022, your best bet is still React.

Prerequisites

Node.js installed on your computer
Basics of HTML, CSS & JavaScript
Basic understanding of the DOM.

In this blog

Essential React Concepts (creating react app, Components, JSX, Props, State, Hooks)
Counter Application
How to fetch data from an API in React

Setup & Installation

Open your favorite text editor & let's get started.
(I will be using Visual Studio Code)

Open your command prompt (windows) or terminal (Mac).

Make sure you have installed Node JS (npx comes with Node JS)

In your terminal:

npx create-react-app react-basic-concepts

This will create a new react app with name react-basic-concepts

You can see React app is installed in my ADMIN folder.

Now, let's run our application. In your terminal

cd react-basic-conecpts
npm start

This will run our app on localhost:3000

Now open react-basic-concepts folder in your text editor

Let's understand the project structure, you'll see a /public and /src directory with the regular node_modules (conatins all dependencies), .gitignore, README.md, and package.json.

In /public, our important file is index.html
The /src directory will contain all our React code.

Let's do some cleanup & remove unnecessary files.

In src directory keep these files & delete rest of them.

Your index.js file should look like this

Delete everything from App.js
Open App.js file & let's create our first component.

import React from "react";  // importing React

const App = () => {         // creating App component
  return (
    <div>                   // JSX (we'll look into this later)
      <h1>Hello, world!</h1>
    </div>
  );
};

export default App;         // exporting App

Save your file & go to your browser, you'll see Hello, world!

Congratulations on creating your first React Component!

Basic Concepts

Components

React components let you break up the UI into separate pieces that can then be reused in your entire project.

Components are independent & reusable pieces of code.

There are two ways of creating a component in React

Function Components

A React functional components is nothing but a regular JavaScript function that returns JSX.

import React from "react";

const App = () => {   component
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

export default App;

Class Components

A class component is JavaScript class with render method.

export default class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello, world!
      </div>
    );
  }
}

Functional components are short, simple, easy to read & maintain.

However, the rendering time and performance in either components do not make a lot of differences.

Note: Always start component names with a capital letter.

JSX: JavaScript + XML

Instead of putting JavaScript into HTML,
JSX allows us to put HTML into JavaScript.

Take a look at the below code:

const jsx = <h1>This is JSX</h1>

JSX stands for JavaScript XML.
It is simply a syntax extension of React.
It allows us to directly write HTML in React.

To add JavaScript inside JSX, we need to write it in curly brackets:

const App = () => {
 const name = "Pratham";
 return (
  <div className="App">
   <p>Hello, {name}</p>
  </div>
 );
};

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.
For example, class becomes className in JSX, and tabindex becomes tabIndex.

Props

Props is short for properties and they are used to pass data between React components.

To use props, you have to pass props as argument in our JS function.
Take a look at example below:

/src/App.js

import React from "react";
import Names from "./Components/Names";

const App = () => {
  return (
    <div>
      <Names name="Pratham" />
      <Names name="Pratik" />
      <Names name="Saif" />
    </div>
  );
};

export default App;

Create new folder in /src & name it components, then create Name.js file in /src/components

/src/Components/Names.js

import React from "react";

const Names = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  );
};

export default Names;

Open localhost:3000 you should see:

Hooks

Hooks allow us to add state to add state to functional components and to share logic across components.

(Note: Hooks can only be used inside function components.)

React have few built-in hooks like useEffect, useState, etc. You can also create your own custom hooks in React.

Let's take a look at useState hook by creating a counter application

Basic Counter application

Create new component in /src/Components

import React, { useState } from 'react';

function Counter() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

count stores the initial value & setCount is used to update that value.

Here, the initial value of the count is 0, then setCount function is used to update the value of count.

Render Counter in App.js & open localhost:3000 in your browser

import React from "react";
import Counter from "./Components/Counter";

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

export default App;

You can learn more about React hooks here.

Working with API in React

To fetch data from an API in react we will be using useEffect hook.

To understand the useEffect hook you first need to understand lifecycle of the component. The lifecycle of the component contains three main parts i.e. mounting, updating and unmounting.

mounting: when the page loads
updating: when the state updates
unmounting: when user leaves the page

In this case, we will fetch our data:

useEffect(() => {
 // data fetching here
}, []);

The above code will fetch data when component mouts, that means, on the first render when the page loads.

Let's fetch data from books API.

// + add the useEffect import
import { useState, useEffect } from "react";

function App() {
  const [books, setBooks] = useState(null);

  // + adding the use
  useEffect(() => {
    getData();

    // we will use async/await to fetch this data
    async function getData() {
      const response = await fetch(
        "https://www.anapioficeandfire.com/api/books"
      );
      const data = await response.json();

      // store the data into our books variable
      setBooks(data);
    }
  }, []);

  return (
    <div>
      <h1>Game of Thrones Books</h1>

      {/* display books from the API */}
      {books && (
        <div className="books">
          {/* loop over the books */}
          {books.map((book, index) => (
            <div key={index}>
              <h2>{book.name}</h2>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

Now open localhost:3000 & see the magic

Some resources to learn React

Official documentation

Practical React series by Ben awad

30 days of React

That was hell lot of a knowledge.
I'm proud of you if you've managed to make it till here.

IF YOU ENJOYED THIS, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANK YOU

Happy coding!

Node Js for beginners + First Node Js program

Pratham — Mon, 22 Nov 2021 17:12:44 +0000

So recently I started learning Node.js and I was looking for some blogs that can help me get started with Node.js and I didn't find any good blogs that give a brief introduction to Node.js So I thought why not write one.

In this article, we will look at:

Introducing Node.js
The Node architecture
How Node.js works
Installing Node.js
Your first Node.js program

Introduction to Node.js

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on Chrome's V8 engine and executes JavaScript code outside a web browser.
Node. js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

(Chrome's V8 Engine is a fast Javascript to the machine-code compiler to load, optimize and run Javascript code which is written in C++)

Node is single-threaded, based on event-driven architecture, and non-blocking based on the I/O model.

Why we use Node.js ?

We use Node to build backend services such as Application Programming Interface(API) and the backend of our web apps.

Node.js is ideal for building data-intensive, highly scalable, and real-time applications such as Chat apps, E-commerce apps, Streaming apps, etc.

The Node Architecture

Node.js uses the “Single Threaded Event Loop” architecture to handle multiple concurrent clients. Node.js Processing Model is based on the JavaScript event-based model along with the JavaScript callback mechanism.

The Node Runtime

Node API: JavaScript utilities like file and network I/O, and a whole host of others, like cryptography and compression
The Node core: a set of JavaScript modules that implement the Node API. (Apparently, some of the modules depend on libuv and other C++ code but that’s an implementation detail).
JavaScript engine: Chrome’s V8 Engine: A fast JavaScript-to-machine code compiler to load, optimize, and run your JavaScript code
The event loop: implemented using an event-driven, non-blocking I/O library called libuv to make it lightweight and efficient (and scalable)

Event Loop

Event-loop is the place where all our asynchronous code is executed.

Node uses Libuv as the event loop implementation. To use a Node asynchronous API, you pass a callback function as an argument to that API function, and during the event loop, your callback is executed.

How Node.js works

Node JS is a single-threaded javascript runtime environment. Basically, Node JS creator( Ryan Dahl ) concern was that parallel processing using multiple threads is not the right way or too complicated.

If node.js doesn't use threads how does it handle concurrent requests in parallel?

Ans: It's a completely wrong sentence when you say it doesn't use threads, Node Js use threads but in a smart way. It uses a single thread to serve all the HTTP requests & multiple threads in the thread pool(in libuv) for handling any blocking operation

Libuv: A library to handle asynchronous I/O.

What does the event I/O model mean?

Ans: The right term is non-blocking I/O. It almost never blocks as the Node.js official site says. When any request goes to the Node server it never queues the request. It takes request and starts executing if it's blocking operation then it's been sent to the working threads area and registered a callback for the same as soon as code execution gets finished, it triggers the same callback and goes to the event queue and processed by the event loop again after that create a response and send to the respective client.

Installing Node.js

Installing Node on your machine is pretty much easy. If you are on windows, open up your command prompt, and if you use a Mac, open up your terminal. First things first. Let's check if you already have node installed on your machine:

On your command prompt/terminal, run:

node --version

As you can see in the picture above, I'm running node version 14.4.0 In this tutorial, I'll run you through how to install the latest version of Node on Windows.

How to install Node on windows
The first step in building any Node.js application is by installing Node on the client system. To perform the installation of Node.js on a Windows machine, follow the steps below:

Step1) Navigate to Nodejs.org in a web browser. Click the Windows Installer button to download the latest default version.

Step2) Once downloaded, double-click on the downloaded.msi file to start the installation. On the first screen, click the Run button to begin the installation.

Step3) You will be welcomed to the Node.js set-up wizard- click Next

Step4) Following that, you will be directed to review the license agreement. Click Next if you agree to the terms and conditions.

Step5) The installer will prompt you to choose a default location. Click Next if you're okay with the default location or change it if need be.

Step6) The wizard will prompt you to install some other components. Again, click on Next if you have no specific needs

Step7)Click on the install button to complete the installation

Your first Node.js program

In our first Node program, we will be creating a simple hello world program

Step1) Go to your command prompt (for Windows users) or your terminal (for Mac users) and type the following lines of code:

mkdir helloworld
cd helloworld

The first command will create a new folder inside the directory that you're currently in, mkdir = "make directory". While the latter, cd = "change directory", in this case, to navigate to the new dir helloworld

Step2) Still on your command prompt/terminal, let's initialize our project and link it to npm-acronym for (Node Package Manager) in our folder.

Run:

npm init

Running npm init creates a package.json file in our helloworld folder. This file contains references to all npm packages you will download for use on your application.

Step5) Next, go to your preferred text editor and create a file- let's call it index.js

Inside index.js, write the following lines of code:

var http = require("http");

http.createServer(function (request, response) {
   // Send the HTTP header 
   // HTTP Status: 200 : OK
   // Content Type: text/plain
   response.writeHead(200, {'Content-Type': 'text/plain'});

   // Send the response body as "Hello World"
   response.end('Hello World\n');
}).listen(8081);

// Console will print the message
console.log('Server running at http://127.0.0.1:8081/');

Let's quickly explain the code snippet above.

Step 1 - Import Required Module
We use the require directive to load the HTTP module and store the returned HTTP instance into an HTTP variable

Step 2 - Create Server
We use the created HTTP instance and call http.createServer() method to create a server instance and then we bind it at port 8081 using the listen method associated with the server instance. Pass it a function with parameters request and response. Write the sample implementation to always return "Hello World".

Step6) Run the app Now to run the app, go back to your command prompt/terminal, and run:

node index.js

Now you will see

Server running at http://127.0.0.1:8081/

Make a Request to the Node.js Server
Open http://127.0.0.1:8081/ in any browser and observe the result.

Find this article useful? Kindly like/leave a comment.

IF YOU LIKED THE POST, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANK YOU

Thanks for reading

All you need to know about React Hooks.

Pratham — Wed, 17 Nov 2021 13:48:23 +0000

What are React Hooks ?

React hooks are nothing but JavaScript functions that let you hook into React state and lifecycle features from function components.

(Note: Hooks can only be used inside function components.)

Hooks allow you to add state to add state to functional components and to share logic across components.

Benefits of using React hooks.

There are three key advantages to using React Hooks: reusability, readability, and testability.

Hooks made the React lifecycle easier

When using lifecycle in class components, the componentDidMount(), componentDidUpdate(), componentWillUnmount() methods are handled individually, but when using React hooks, you can just do everything through the useEffect hook.

Rules of Hooks.

We can use React Hooks inside function components only.
Only call hooks at top level. You cannot call hooks inside loops, conditions, or nested functions, they should always be called at the top of function component.
You cannot call hooks from regular JavaScript functions.

Built-in and Custom hooks.

React have few built-in hooks like useEffect, useState. You can also create your own custom hooks in React.

Some common built-in hooks

useState

useState hook allows you to add state variables in functional components. In useState you pass the initial state to the function and it returns a variable with a value and one function to update the value.

Let's look at the example below



import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The above example increments the counter on the handler function parameter itself.
Here, the initial value of the counter is 0, then setCount function is used to update the value of counter.

useEffect

To understand the useEffect hook you first need to understand lifecycle of the component. The lifecycle of the component contains three main parts i.e. mounting, updating and unmounting.

mounting: when the page loads
updating: when the state updates
unmounting: when user leaves the page

Example:



import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

Conclusion

Thank you for reading, If you enjoyed this post drop a like and comment your thoughts.

IF YOU LIKED THE POST, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANK YOU

Follow me on twitter.

Happy coding!

How to Set up a Node.js Express Server for React

Pratham — Sun, 25 Jul 2021 12:12:49 +0000

React is a JavaScript library used to build user interfaces and develop single-page applications using reusable UI components. React is used for building front-end apps that can communicate with the back-end server.

A React front-end connected to a Node back-end is a rock-solid combination for any application you want to build.

This guide is designed to help you create full-stack projects with React as easily as possible.

Prerequisites

A text editor
Node.js installed on your computer
Prior knowledge of React, Node, and npm

Tools You Will Need

Make sure Node and NPM are installed on your computer. You can download both at nodejs.org (NPM is included in your Node installation)
Use a code editor of your choice. I am using and would personally recommend using VSCode. You can download VSCode at code.visualstudio.com.
Make sure you have Git installed on your computer. You can get it at git-scm.com

STEP 1: BACKEND

First, create a folder of your project, name it as react-node-app , open this folder in your text editor

To create our Node project open your terminal and run the following command

npm init -y

By running this you will see package.json file has been created in our folder, This file will help us to manage dependencies our app needs.

Now, in our terminal we will install express as a dependency

npm i express

After that, we will create a script in package.json that will start our web server when we run it with npm start:

...
"scripts": {
  "start": "node server/index.js"
},
...

Our package.json file should look like this

{
  "name": "react-node-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Now, create a new folder in our project and name it server.
Inside server create index.js file.

We'll use Express to create a simple web server for us which runs on port 3001

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

We can now run our app using this script npm start in our terminal

npm start

> node server/index.js

Server listening on 3001

Step 2: Create an API Endpoint

We want to use our Node and Express server as an API, so that it can give our React app data.

set a GET route that we will, later on, fetch from our client-side React App.

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from Express!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Make sure you put this above app.listen

Here, we are simply sending "Hello from Express" to our react app

Since, we have made changes to our server we have to restart our server
To do that, open your terminal press commmand/ctrl + c, amd then restart the server by running npm start

Now we can simply visit http://localhost:3001/api in our browser and see our message:

{"message": "Hello from Express"}

Step 3: Creating React front-end

Let's move to our front-end part now

Open another terminal tab and use create-react-app to create a new React project with the name client:

npx create-react-app client

Setting up proxy

In this step, the Webpack development server was auto-generated when we ran the create-react-app command.

Webpack Development Server (WDS) is a tool that helps the developers make changes to the web app’s frontend and renders them to the browser with no need to refresh the browser.

The only change we have to make is to add a property called proxy to our package.json file.

This will allow us to make requests to our Node server without having to provide the origin it is running on (http://localhost:3001) every time we make a network request to it:

// client/package.json

...
"proxy": "http://localhost:3001",
...

The modified package.json file will look like this

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:3001"
}

Now we can start up our React app by running its start script, which is the same as our Node server. First make sure to cd into the newly-created client folder.

After that, will start up on localhost:3000:

cd client
npm start

Compiled successfully!

You can now view client in the browser.

http://localhost:3000

Step 4: Make HTTP Requests from React to Node

Now that we have a working React app, we want to use it to interact with our API.

Let's see how to fetch data from the /api endpoint that we created earlier.

To do so, we can head to the App.js component in our src folder and make an HTTP request using useEffect.

We will make a simple GET request using the Fetch API to our backend and then have our data returned as JSON.

Once we have the data returned to us, we will get the message property (to grab our greeting that we sent from the server) and then put it in a state variable called data.

This will allow us to display that message in our page if we have it. We are using a conditional in our JSX to say that if our data is not there yet, show the text "Loading...".

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

Conclusion

A lot can be done with Express backend, like make calls to the database, but on this guide, we have concentrated on how to quickly connect to the backend Express server from client-side React App.

The code snippets and files used in this guide can be accessed at the GitHub repository here .

IF YOU LIKED THE POST, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANK YOU

Happy coding!

Forem: Pratham

Does GraphQL replace REST API ?

GraphQL Advantages

No over and under-fetching

Speeds up the development process

Comparing GraphQL with REST

Pros and Cons

Conclusion

How to use Styled Components with React.js

Table of contents:

What are Styled-components ?

But why Styled-components ?

Installing styled-components

Getting started

Props in styled components

Make it Responsive

Overriding styles

Global Styling

Conclusion

Everything about React JS.

Prerequisites

In this blog

Setup & Installation

Basic Concepts

Components

JSX: JavaScript + XML

Props

Hooks

Basic Counter application

Working with API in React

Some resources to learn React

Node Js for beginners + First Node Js program

In this article, we will look at:

Introduction to Node.js

The Node Architecture

How Node.js works

Installing Node.js

Your first Node.js program

All you need to know about React Hooks.

What are React Hooks ?

Rules of Hooks.

Built-in and Custom hooks.

Conclusion

How to Set up a Node.js Express Server for React

Prerequisites

Tools You Will Need

STEP 1: BACKEND

Step 2: Create an API Endpoint

Step 3: Creating React front-end

Setting up proxy

Step 4: Make HTTP Requests from React to Node

Conclusion