How to build a react application using Codiga Smart Code Snippets?

Today we will be building a simple react application using Smart Code Snippets on Codiga’s Coding Assistant tool. We will be building a React application that fetches data from Github API. Before starting, you need the below dependencies:

Before jumping directly into building the application, let's look at what we will make today.

Here is a video for the same.

Note that all the smart code snippets used in building this application are in this Codiga cookbook.

Now, let's Build the application

Step 1: Setup the react application

We will build the application on react; let us first set up a react application using the npx command.

npx create-react-app github-api-demo

It might take a while to set up the application, so you can take a coffee break or explore Codiga Smart Code Snippets.

Once the react application is set up, we will be using the react+bootstrap combination. We need to link bootstrap to the index.html file for the same.

Step 2: Linking bootstrap to the application

There are two ways to link a bootstrap file to your application. Either by downloading the source code or by using the content delivery network.

For this example, we will be using the content delivery network.

Traditionally, the code to link bootstrap CSS using a content delivery network looks somewhat like this:

<Link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Similarly, linking the bootstrap javascript also requires an extended code like above.

We have made a Smart Code Snippet. Use the below shortcuts with the Codiga extension installed to ease your work.

for bootstrap CSS: bootstrap.css , use this shortcut under <head> tag. for bootstrap JS: bootstrap.js, use this under <body> tag.

Your index.html file should look like this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <title>GitHub Demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Step 3: Clear existing code

We don’t need the existing code present in the starter template. So please clear all of the existing code in the src folder. We will just need the App.js file and a component folder to add our components.

This application is divided into two components; the first one is the navbar and the second bar is the form. Next, let's walk through how we will create a navbar for the application.

Step 4: Creating the Navigation Bar for application

Under the components folder, create a Nav.js file. Using the navbar Smart Code Snippet, create a navbar using bootstrap.

navbar.0

Here, we have to change the application's name on the Navbar. Here let us name it Github API.

Now you can see how easy it is to make a navbar this time. Right? That’s the power of Codiga’s Smart Code Snippets (LOL).

Step 5: Creating the Form Component

You can create a form component without any issue. Just use this Smart Code Snippet, and you are done.

bootstrap.form.0

Make sure you edit the form titles.

We will use cards to display the details fetched from the GitHub API. Let's create the card in the same Form.js file.

Step 6: Creating card for displaying data from Github API

A simple card can be created using this Smart Code Snippet.

bootstrap.cards.1

Since everything is set up within minutes, we can now focus on the code logic.

Step 7: The Code Logic

The logic of the code can be found below.

The set username function:

const [username, setUsername] = useState("");

const onChangeHandler = (e) => {
  setUsername(e.target.value);
};

Make sure you give the form a onChange & onSubmit handler function.

The onSubmit function


const [data , setData] = useState({});

const onSubmiteHandler = (e) => {
    e.preventDefault();
    fetch(`https://api.github.com/users/${username}`)
    .then((result) => {
        return result.json();
    }).then((values) => {
        console.log(values);
        setData(values);
    }
    )

Make sure you give the form input username value.

Give forms values from the result.json file

<div className="container">
  <div className="card p-3">
    <div className="d-flex align-items-center">
      <div className="image">
        <img src={data.avatar_url} className="rounded" width="155" />
      </div>
      <div className="ml-3 w-100">
        <h3 className="mb-0 mt-0">{data.login}</h3>
        <span>{data.bio}</span>
        <div className="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats">
          <br />
          <div className="d-flex flex-column">
            {" "}
            <span className="articles">Repo</span> <span className="number1">
              {data.public_repos}
            </span>{" "}
          </div>
          <div className="d-flex flex-column">
            {" "}
            <span className="followers">Followers</span> <span className="number2">
              {data.followers}
            </span>{" "}
          </div>
          <div className="d-flex flex-column">
            {" "}
            <span className="rating">following</span> <span className="number3">
              {data.following}
            </span>{" "}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And you are good to go!. The application is made. If you are stuck anywhere, you can refer to this video.

Wrapping up

In this blog post, we made an application within minutes. Using Smart Code Snippets, we could write the code quickly to focus on the code logic. We used pre-made boilerplate code snippets made by Codiga and modified them as per our need. For more on Coding Assistant and our Smart Code Snippets can save you valuable time and energy, click here to get started or chat with us on Discord here.