React Globe Animations

Welcome to another blog post!

So, usually in these blog posts I talk about some scientific paper or famous individual, but let's try something different this time. Let's take a look at some web development.

Quote of the Post

So, this summer I started learning about HTML, CSS, Javascript, React, and Next.js. In react, there are lots of cool libraries you can implement in your own projects. What does this mean? Well, other people write code to develop some fantastic applications, and it gets uploaded to something called the npm registry. You then use a package manager called npm to add all of these crazy cool pieces of code to your own projects.

react-globe.gl looks fantastic on web applications. Take a look at this: Globe Example 1. And take a look at this: Globe Example 2. Let's take a look at this: Globe Example 3. Awesome, right?

So, to add this to your project, you first have to create a react application. The Net Ninja has a great series on doing just that: The Net Ninja- React.

Then, we have to add react-globe.gl to our project. Write npm i react-globe.gl or yarn add react-globe.gl to your command line (I write it to the command line of VSCode). Now you can use the library.

Now create a file called World.jsx.

import React from "react";

import Globe from "react-globe.gl";

export const World = () => {
  return <Globe />;
};

Now, import World to your App.js.

import React from "react";

import { World } from "./World";

export default function App() {
  return (
    <div className="App">
      <World />
    </div>
  );
}

You now have a globe that looks like this: React Globe

You can play around with the code to see if you can create any of the other examples on this page: NPM- react-globe.gl

Thanks for reading!