Back

Introduction to React for Beginners Part 3

Introduction to React for Beginners Part 3

7. API Calls with Axios

Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js¹[1][4][5][7][8][9]10. Making HTTP requests to fetch or save data is one of the most common tasks a client-side JavaScript application will need to do.

Here's an example of a GET request with axios:

import axios from "axios";

axios
  .get("https://api.example.com/data")
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error("Error fetching data: ", error);
  })
  .finally(() => {
    console.log("Finished fetching data.");
  });

In this example, axios.get() makes a GET request to the URL. It returns a promise that resolves to the response of the request. The then() function logs the data from the response, and catch() logs an error if one occurred during the request¹[1][4][5][7][8][9]10.

8. JWT Authentication

JSON Web Token (JWT) is an open standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. In terms of security, JWTs can be signed using a secret or a public/private key pair¹[1][4][5][7][8][9]10.

Here's an example of a login function that uses axios to make a POST request with a username and password, and saves the JWT from the response:

import axios from "axios";

function login(username, password) {
  return axios
    .post("https://api.example.com/login", { username, password })
    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      }
      return response.data;
    });
}

9. CSS Styling in React

In React, there are several ways to style your components¹[11]12:

9.1 Inline Styling

You can use the style attribute in your React components to specify styles inline. This can be convenient if you only need to apply a few styles to a single element¹[11]12.

function MyComponent() {
  return (
    <div style={{ color: "red", fontSize: "32px" }}>
      This text is red and 32px
    </div>
  );
}

9.2 CSS Stylesheet

You can create a CSS file and import it into your React components. This is useful if you have a set of styles that you want to reuse across multiple components¹[11]12.

import "./App.css";

function MyComponent() {
  return <div className="red-text large-text">This text is red and 32px</div>;
}

9.3 CSS Modules

CSS Modules are convenient for components that are placed in separate files. The CSS inside a module is available only for the component that imported it¹[11]12.

import styles from "./mystyle.module.css";

function MyComponent() {
  return <div className={styles.bigblue}>This text is blue and large</div>;
}

10. Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a set of utility classes, enabling developers to create a wide range of styles without writing custom CSS²[4]5. Instead of defining CSS rules, you apply utility classes directly to your HTML elements²[4]5.

Here's an example of using Tailwind CSS classes:

import "tailwindcss/tailwind.css";

function MyComponent() {
  return (
    <div className="bg-blue-500 text-white text-center py-4">
      <h1 className="text-4xl font-bold">Welcome to Tailwind CSS</h1>
      <p className="mt-4">A utility-first CSS framework.</p>
    </div>
  );
}

In this example, we're using several Tailwind CSS utility classes to style a div element and its child elements²[4]5.

Remember, this is just a brief introduction. To fully understand and master these topics, you'll need to dive deeper into each of these topics and practice building your own React applications. Happy coding! 😊

Back to top