kapehe-jorgenson

Kapehe is an R&D Content Engineer for Auth0 with a passion for learning and teaching. With her primary focus on ReactJS and JavaScript, she is impressed with what code can create for the web. Technology and web development are constantly evolving and naturally bring that need for continual learning. She enjoys writing tutorials, hosting local meetups, and learning with others to expand coding knowledge.

R&D Content Engineer

Kapehe Jorgenson



**TL;DR:** - In this article, we are going to go over the new updates and features added in the major release of the `create-react-app` tool. We will go over the changes that ReactJS announced and what we can find in this great update. We will also go over the addition of TypeScript support and how that can benefit your project.

## Create React App 2.0 - The Big Reveal

On October 1, 2018, [ReactJS tweeted](https://twitter.com/reactjs/status/1046933146736963587) their release announcement of [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html). 

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We’ve just released Create React App 2.0, including a year’s worth of improvements. <a href="https://t.co/O2AjlHOUjp">https://t.co/O2AjlHOUjp</a> <a href="https://t.co/sV8YbY7IED">pic.twitter.com/sV8YbY7IED</a></p>&mdash; React (@reactjs) <a href="https://twitter.com/reactjs/status/1046933146736963587?ref_src=twsrc%5Etfw">October 2, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## The Useful Create React App

Once released, developers were excited, to say the least. If you have used ReactJS, chances are you have used the bash command:

```bash
create-react-app name-of-app
```

Once that command starts running, you get to sit back and relax. You will see that ReactJS is taking care of all the setup and configuration. Once it’s finished, the `package.json` is compiled, starting dependencies are installed, and it gives you the initial project structure. What’s in this new and flashy Create React App 2.0? Let’s check it out!

<include src="TweetQuote" quoteText="On October 1, 2018, ReactJS tweeted their release announcement of Create React App 2.0. Once released, developers were excited, to say the least."/>

## Sass and CSS Modules

Have you ever had to install Sass loaders yourself? Have you had to configure [Sass](https://sass-lang.com/) throughout your project yourself? Well now, in Create React App 2.0, you can get Sass running in your project with a simple bash command and some file name changes. Run:

```bash
npm install node-sass
```

Change your `src/App.css` to `src/App.scss` and make sure to update that file name in the top part of `src/App.js` and you are ready to use and reuse your stylesheets. It’s great!

## Babel 7

[Babel](https://babeljs.io/) released their Babel 7 version this year as well and it did not take long for React to switch over. You can learn all about the new [Babel 7 features here](https://babeljs.io/blog/2018/08/27/7.0.0). Babel is important because it converts ES6 into code that browsers can read.  Babel 7 is faster, can now parse TypeScript syntax, and even gives support for the React fragment syntax.

Want to learn more about React fragments? Dive into the [React docs on Fragments](https://reactjs.org/docs/fragments.html#short-syntax).

## Webpack 4

React, having always used [Webpack](https://webpack.js.org/), has now updated to Webpack 4. Webpack 4 is much faster, decreases your build time, and allows you to set up a particular environment whether it's development or production.

![Webpack 4 logo - JavaScript module bundler](https://images.ctfassets.net/23aumh6u8s0i/72d1mUghQG0alzmyZsIM9r/87b1d6cf5fad0164df47e1e6f79c1079/webpack-4-logo)

In short, it is a module bundler for JavaScript applications and version 4 splits the bundles into a more intelligent and better performant way. There is so much that goes with Webpack 4, if you want to learn more about it, you can [visit the Webpack website here](https://webpack.js.org/).

<include src="TweetQuote" quoteText="React has now updated to Webpack 4, a module bundler for JavaScript applications."/>

## Jest 23

When Create React App 2.0 came out, they launched it with that latest version of [Jest](https://jestjs.io/). Jest 23 is more stable and much quicker, which will help you when running tests. You’ll feel more confident with more immediate feedback and reliable results.

![Jest logo - An open-source testing framework](https://images.ctfassets.net/23aumh6u8s0i/3lWxbu0X1JZtfNmfOZM2hg/d5d74ad73a0040712d26427e94de0eae/jest-logo)

Jest is an open-source testing framework that has just been updated to version 23. It has some great new features. One of those updates is the new watch menu option called Interactive Snapshot Mode. You are able to look through each snapshot and review your failed ones. While reviewing you can choose to update or skip each one. Jest has a great list of some of the updates that you can find [here on Jest’s blog](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode).

## PostCSS

PostCSS, a great tool with over 200 custom plugins has been added to Create React App 2.0. By using JavaScript, you are able to easily transform your CSS. Create React App did not have this neat feature, but the team at React thought that adding this in would be a great for developers. I would have to agree!

If you were to head over to [PostCSS.org](https://postcss.org/) you would see a list of features that come with PostCSS.

* Increased code readability
* Converts modern CSS into a more readable version for browsers
* Uses [CSS Modules](https://github.com/css-modules/css-modules) which keeps all class and animation names local
* Utilizes [stylelint](https://stylelint.io/), a modern CSS linter
* Offers a powerful grid system

## Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms

Imagine being able to use a third-party platform like [Apollo](https://www.apollographql.com/), [MDX](https://mdxjs.com/), or [Relay Modern](https://facebook.github.io/relay/) without extra configuration or setup. There is no longer the issue of being able to use Babel Macros without ejecting first, Create React App 2.0 is taking care of that setup for us.

Check out this tutorial on [how to create a React app with MDX](https://auth0.com/blog/how-to-build-an-app-with-react-and-mdx/?utm_source=linkedin&utm_medium=sc&utm_campaign=mdx_react).

## SVG

We have all seen an SVG tag:

```html
<svg width="100" height="100">
   <circle cx=“50” cy=“50” r=“40” stroke=“blue” stroke-width=“5” fill="black" />
</svg> 
```

This one is a simple circle but some SVG tags can get pretty long and confusing. SVG’s are great because they allow for cleaner looking lines, richer color, and change your images into code.

What if I told you that now you can import an SVG as a React component?

Simply import the component at the top:

`import SVGIcon from "./svgicon";`

And use it down within the file:

`<SVGIcon name="image" width={50} fill={red} />`
or
`<SVGIcon />`

This can give a lot of flexibility in where you use your SVG’s and allows for better readability.


## Yarn Plug’n’Play

Hmmm, getting rid of the `node_modules` seems far-fetched but this experimental [Yarn](https://yarnpkg.com/en/) Plug’n’Play allows for just that. If you look at the bullet points in [this GitHub PR conversation](https://github.com/yarnpkg/rfcs/pull/101), you’ll see that there are some awesome aspects to it:

* Installs ran using Plug'n'Play are up to 70% faster than regular ones.
* Starting from this PR, Yarn will now be on the path to make yarn install a no-op on CI (Continuous Integration).
* Yarn will now be able to tell you precisely when you forgot to list packages in your dependencies.
* Your applications will boot faster through a hybrid approach of static resolutions.

This is something that if you want to try out in your React project, go ahead. This feature is just a fun new add-on that is completely optional.

Here you'll see [Dan Abramov](https://twitter.com/dan_abramov) trying out Yarn Plug-n-Play:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I’m trying out Yarn Plug’n’Play and it’s pretty incredible. This GIF is *not* speeded up. I literally created a project in five seconds (on a warm cache). No node_modules. It works. <a href="https://t.co/AjJP5vXxEi">pic.twitter.com/AjJP5vXxEi</a></p>&mdash; Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/1047583342072406022?ref_src=twsrc%5Etfw">October 3, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Proxy Implementation

Want to configure your own proxy? Create React App 2.0 let’s you do that now!

All you need to do is install the dependency:

```bash
npm install http-proxy-middleware
```

And then create a file called `src/setupProxy.js`. Once you import that dependency, you are ready to go! It’s that easy to get it started!

## Use packages written for latest Node versions

Use any Node version package and with the help of Babel 7 and Webpack 4, it won’t break the build. You will not need to do any addition configuration and will feel confident that it’s being bundled correctly.

## A Smaller CSS Bundle

Chances are you are going to be pointing your project towards modern browsers. If you decide to only target those, maybe a smaller CSS bundle would be beneficial for your project and you could experience faster load times by making fewer requests.

Avoid targeting the following:

`-webkit`
`-ms`

in your CSS and that will help in keeping those bundled. Instead point the browsers to the `package.json`.

## Service Workers

Service workers are now opt-in and are built using [Google’s Workbox](https://developers.google.com/web/tools/workbox/). Workbox is a JavaScript library that gives offline support to your project. It can help with your project’s performance and resilience by caching assets such as: 

* Fonts
* Images
* JavaScript
* CSS
* Other files

## The Addition of TypeScript

[TypeScript](http://www.typescriptlang.org/), an Object-oriented programming language, can be beneficial to use versus JavaScript. Some strong benefits of using TypeScript are:

* It can help find errors more efficiently.
* Checks for "types" being correct.
* Same syntax as JavaScript, so easy to start with.

When starting your React project with `create-react-app`, simply add to the bash command:

```bash
--typescript
```

to add TypeScript to your project.

### Add TypeScript To Create React App Project

There are two ways to get TypeScript active in your project.

Add it into an already existing project:

```bash
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
```

or add it in at the beginning of a new project:

```bash
npx create-react-app name-of-app --typescript
```

Files that end in `.js` change to `.tsx` and you are good to go.

`src/index.js` --> `src/index.tsx`

If you add TypeScript to an already existing project, be sure to restart your development server to get the new changes going. You can find the documentation on this new [TypeScript addition here](https://facebook.github.io/create-react-app/docs/adding-typescript).

## Moving Forward with Create React App 2.0

With React’s new Create React App 2.0 being released, the next thought is, “Should I update all my past projects to 2.0?”. Unless it’s broken, just leave it as is. But in the future, when using the command `create-react-app` to start your project, you’ll know you have so many new features to help you build an amazing project.

To find out which version of Create React App you are using in a particular project, head on over to your `package.json` and find this line telling you which version you are currently utilizing:

```json
"react-scripts": "2.0.3"
```

This is also the place where you would update to 2.0 if desired.

Happy coding!

<include src="asides/AboutAuth0" />


Create React App 2.0: What's New?

bruno-krebs

I am passionate about developing highly scalable, resilient applications. I love everything from the database, to microservices (Kubernetes, Docker, etc), to the frontend. I find amazing to think about how all pieces work together to provide a fast and pleasurable experience to end users, mainly because they have no clue how complex that "simple" app is.

R&D Content Architect

Bruno Krebs

Learn how to make React and Redux control a bunch of SVG elements to create a game.

Developing Games with React, Redux, and SVG - Part 4



**TL;DR:** In this series, you will learn how to make React and Redux control a bunch of SVG elements to create a game. The knowledge acquired throughout this series will also allow you to create other types of animations that are orchestrated by React and Redux, not only games. You can find the final code developed in this article in the following GitHub repository: [Aliens Go Home - Part 3](https://github.com/auth0-blog/aliens-go-home-part-3)

---

## Implementing the Leaderboard Feature in Your React Game

The first thing you will do to make your game look like a real game is to implement the leaderboard feature. This feature will enable players to sign in, so your game can track their max score and show their rank.

## Integrating React and Auth0

To make Auth0 manage the identity of your players, you have to have an Auth0 account. If you don't have one yet, you can <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">**sign up for a free Auth0 account** here</a>.

After creating your account, you just have to create an [Auth0 Application](https://auth0.com/docs/applications) to represent your game. To do this, head to [the Applications page on the Auth0 dashboard](https://manage.auth0.com/#/applications) and click on the *Create Application* button. The dashboard will show you a form where you will have to inform the *name* of your application and its *type*. You can type *Aliens, Go Home!* as the name and choose the *Single Page Web Application* type (your game is an SPA based on React after all). Then, you can click on *Create*.

![Creating the Auth0 Application to represent your React game.](https://images.ctfassets.net/23aumh6u8s0i/5pj3GTmuI8ExyWUAnd8if3/160bb83f92bafa4bf91371474ce071bc/creating-the-auth0-client-for-your-react-game)

When you click this button, the dashboard will redirect you to the *Quick Start* tab of your new application. As you will learn how to integrate React and Auth0 in this article, you won't need to use this tab. Instead, you will need to use the *Settings* tab, so head to it.

There are three things that you will need to do in this tab. The first one is to add the `http://localhost:3000` value to the field called *Allowed Callback URLs*. As the dashboard explains, *after the player authenticates, Auth0 will only call back one of the URLs in this field*. So, if you are going to publish your game on the web, be sure to add its public URL there as well (e.g. `http://aliens-go-home.digituz.com.br`).

After inputting all your URLs on this field, hit the *Save* button or press `ctrl` + `s` (if you are using a MacBook, you will need to press `command` + `s` instead).

The last two things you will need to do is to copy the values from the *Domain* and *Client ID* fields. However, before using these values, you will need to code a little.

For starters, you will need to issue the following command in the root directory of your game to install the `auth0-web` package:

```bash
npm i auth0-web@1.7.0
```

As you will see, this package facilitates the integration between Auth0 and SPAs.

The next step is to add a login button in your game, so your players can authenticate via Auth0. To do this, create a new file called `Login.jsx` inside the `./src/components` directory with the following code:

```js
import React from 'react';
import PropTypes from 'prop-types';

const Login = (props) => {
  const button = {
    x: -300, // half width
    y: -600, // minus means up (above 0)
    width: 600,
    height: 300,
    style: {
      fill: 'transparent',
      cursor: 'pointer',
    },
    onClick: props.authenticate,
  };

  const text = {
    textAnchor: 'middle', // center
    x: 0, // center relative to X axis
    y: -440, // 440 up
    style: {
      fontFamily: '"Joti One", cursive',
      fontSize: 45,
      fill: '#e3e3e3',
      cursor: 'pointer',
    },
    onClick: props.authenticate,
  };

  return (
    <g filter="url(#shadow)">
      <rect {...button} />
      <text {...text}>
        Login to participate!
      </text>
    </g>
  );
};

Login.propTypes = {
  authenticate: PropTypes.func.isRequired,
};

export default Login;
```

The component that you have just created is agnostic in terms of what it will do when clicked. You will define this action when adding it to the `Canvas` component. So, open the `Canvas.jsx` file and update it as follows:

```js
// ... other import statements
import Login from './Login';
import { signIn } from 'auth0-web';

const Canvas = (props) => {
  // ... const definitions
  return (
    <svg ...>
      // ... other elements

      { ! props.gameState.started &&
      <g>
        // ... StartGame and Title components
        <Login authenticate={signIn} />
      </g>
      }

      // ... flyingObjects.map
    </svg>
  );
};
// ... propTypes definition and export statement
```

As you can see, in this new version, you have imported the `Login` component and the `signIn` function of the `auth0-web` package. Then, you have added your new component to the block of code that is shown only if players have not started the game. Also, you have indicated that, when clicked, the login button must trigger the `signIn` function.

With these changes in place, the last thing you will have to do is to configure the `auth0-web` with your Auth0 Application properties. To do this, open the `App.js` file and update it as follows:

```js
// ... other import statements
import * as Auth0 from 'auth0-web';

Auth0.configure({
  domain: 'YOUR_AUTH0_DOMAIN',
  clientID: 'YOUR_AUTH0_CLIENT_ID',
  redirectUri: 'http://localhost:3000/',
  responseType: 'token id_token',
  scope: 'openid profile manage:points',
});

class App extends Component {
  // ... constructor definition

  componentDidMount() {
    const self = this;

    Auth0.handleAuthCallback();

    Auth0.subscribe((auth) => {
      console.log(auth);
    });

    // ... setInterval and onresize
  }

  // ... trackMouse and render functions
}

// ... propTypes definition and export statement
```

> **Note:** You have to replace `YOUR_AUTH0_DOMAIN` and `YOUR_AUTH0_CLIENT_ID` with the values copied from the *Domain* and *Client ID* fields of your Auth0 application. Besides that, when publishing your game to the web, you will have to replace the `redirectUri` value as well.

The enhancements in this file are quite simple. This list summarizes them:

1. `configure`: You used this function to configure the `auth0-web` package with your Auth0 application properties.
2. `handleAuthCallback`: You triggered this function in [the `componentDidMount` lifecycle hook](https://reactjs.org/docs/react-component.html#componentdidmount) to evaluate if the player is returning from Auth0 after authenticating. This function simply tries to fetch tokens from the URL and, if it succeeds, fetches the player profile and persists everything in the `localstorage`.
3. `subscribe`: You used this function to log if the player is authenticated or not (`true` for authenticated and `false` otherwise).

That's it, your game is already [using Auth0 as its identity management service](https://auth0.com/learn/cloud-identity-access-management/). If you run your app now (`npm start`) and head to it in your browser ([`http://localhost:3000`](http://localhost:3000)), you will see the login button. Clicking on it will redirect you to [the Auth0 login page](https://auth0.com/docs/hosted-pages/login) where you will be able to sign in.

After you finish the sign in process, Auth0 will redirect you to your game again where the `handleAuthCallback` function will fetch your tokens. Then, as you have told your app to `console.log` any changes on the authentication state, you will be able to see it logging `true` in your browser console.

![Showing the login button on your React and Redux game](https://images.ctfassets.net/23aumh6u8s0i/57jV86VbI5EHf8c0GYHB4X/16b629d88c601fab2f0bb799e7e0be6d/showing-the-login-button-in-your-react-game)

<include src="TweetQuote" quoteText="Securing games with Auth0 is simple and painless."/>

## Creating the Leaderboard React Component

Now that you have configured Auth0 as your identity management system, you will need to create the components that will show the leaderboard and the max score for the current player. For that, you will create two components: `Leaderboard` and `Rank`. You will need to split this feature into two components because, as you will see, it's not that simple to show player's data (like max score, name, position, and picture) in a nice way. It's not hard either, but you will have to type some good amount of code. So, adding everything into one component would make it look clumsy.

As your game does not have any players yet, the first thing you will need to do is to define some mock data to populate the leaderboard. The best place to do this is in the `Canvas` component. Also, since you are going to update your canvas, you can go ahead and replace the `Login` component with the `Leaderboard` (you will add `Login` inside the `Leaderboard` in a moment):

```js
// ... other import statements
// replace Login with the following line
import Leaderboard from './Leaderboard';

const Canvas = (props) => {
  // ... const definitions
  const leaderboard = [
    { id: 'd4', maxScore: 82, name: 'Ado Kukic', picture: 'https://twitter.com/KukicAdo/profile_image', },
    { id: 'a1', maxScore: 235, name: 'Bruno Krebs', picture: 'https://twitter.com/brunoskrebs/profile_image', },
    { id: 'c3', maxScore: 99, name: 'Diego Poza', picture: 'https://twitter.com/diegopoza/profile_image', },
    { id: 'b2', maxScore: 129, name: 'Jeana Tahnk', picture: 'https://twitter.com/jeanatahnk/profile_image', },
    { id: 'e5', maxScore: 34, name: 'Jenny Obrien', picture: 'https://twitter.com/jenny_obrien/profile_image', },
    { id: 'f6', maxScore: 153, name: 'Kim Maida', picture: 'https://twitter.com/KimMaida/profile_image', },
    { id: 'g7', maxScore: 55, name: 'Luke Oliff', picture: 'https://twitter.com/mroliff/profile_image', },
    { id: 'h8', maxScore: 146, name: 'Sebastian Peyrott', picture: 'https://twitter.com/speyrott/profile_image', },
  ];
  return (
    <svg ...>
      // ... other elements

      { ! props.gameState.started &&
      <g>
        // ... StartGame and Title
        <Leaderboard currentPlayer={leaderboard[6]} authenticate={signIn} leaderboard={leaderboard} />
      </g>
      }

      // ... flyingObjects.map
    </svg>
  );
};

// ... propTypes definition and export statement
```

In the new version of this file, you defined a constant called `leaderboard` that holds an array of fake players. These players have the following properties: `id`, `maxScore`, `name`, and `picture`. Then, inside the `svg` element, you added the `Leaderboard` component with the following parameters:

- `currentPlayer`: This defines who the current player is. For now, you are using one of the fake players defined before so you can see how everything works. The purpose of passing this parameter is to make your leaderboard highlight the current player.
- `authenticate`: This is the same parameter that you were adding to the `Login` component in the previous version.
- `leaderboard`: This is the array of fake players. Your leaderboard will use it to show the current ranking.

Now, you have to define the `Leaderboard` component. To do this, create a new file called `Leaderboard.jsx` in the `./src/components` directory and add the following code to it:

```js
import React from 'react';
import PropTypes from 'prop-types';
import Login from './Login';
import Rank from "./Rank";

const Leaderboard = (props) => {
  const style = {
    fill: 'transparent',
    stroke: 'black',
    strokeDasharray: '15',
  };

  const leaderboardTitle = {
    fontFamily: '"Joti One", cursive',
    fontSize: 50,
    fill: '#88da85',
    cursor: 'default',
  };

  let leaderboard = props.leaderboard || [];
  leaderboard = leaderboard.sort((prev, next) => {
    if (prev.maxScore === next.maxScore) {
      return prev.name <= next.name ? 1 : -1;
    }
    return prev.maxScore < next.maxScore ? 1 : -1;
  }).map((member, index) => ({
    ...member,
    rank: index + 1,
    currentPlayer: member.id === props.currentPlayer.id,
  })).filter((member, index) => {
    if (index < 3 || member.id === props.currentPlayer.id) return member;
    return null;
  });

  return (
    <g>
      <text filter="url(#shadow)" style={leaderboardTitle} x="-150" y="-630">Leaderboard</text>
      <rect style={style} x="-350" y="-600" width="700" height="330" />
      {
        props.currentPlayer && leaderboard.map((player, idx) => {
          const position = {
            x: -100,
            y: -530 + (70 * idx)
          };
          return <Rank key={player.id} player={player} position={position}/>
        })
      }
      {
        ! props.currentPlayer && <Login authenticate={props.authenticate} />
      }
    </g>
  );
};

Leaderboard.propTypes = {
  currentPlayer: PropTypes.shape({
    id: PropTypes.string.isRequired,
    maxScore: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    picture: PropTypes.string.isRequired,
  }),
  authenticate: PropTypes.func.isRequired,
  leaderboard: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    maxScore: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    picture: PropTypes.string.isRequired,
    ranking: PropTypes.number,
  })),
};

Leaderboard.defaultProps = {
  currentPlayer: null,
  leaderboard: null,
};

export default Leaderboard;
```

Don't be scared! The code of this component is quite simple:

1. You are defining the `leaderboardTitle` constant to set how the leaderboard title will look like.
2. You are defining the `dashedRectangle` constant to style a `rect` element that will work as the container of the leaderboard.
3. You are calling the `sort` function of the `props.leaderboard` variable to order the ranking. After that, your leaderboard will have the highest max score on the top and the lowest max score on the bottom. Also, if there is a tie between two players, you are ordering them based on their names.
4. You are calling the `map` function on the result of the previous step (the `sort` function) to complement players with their `rank` and with a flag called `currentPlayer`. You will use this flag to highlight the row where the current player appears.
5. You are using the `filter` function on the result of the previous step (the `map` function) to remove everyone who is not among the top three players. Actually, you are letting the current player stay on the final array if they don't belong to this select group.
6. Lastly, you are simply iterating over the filtered array to show `Rank` elements if there is a player logged in (`props.currentPlayer && leaderboard.map`) or showing the `Login` button otherwise.

Then, the last thing you will need to do is to create the `Rank` React component. To do this, create a new file called `Rank.jsx` beside the `Leaderboard.jsx` file with the following code:

```js
import React from 'react';
import PropTypes from 'prop-types';

const Rank = (props) => {
  const { x, y } = props.position;

  const rectId = 'rect' + props.player.rank;
  const clipId = 'clip' + props.player.rank;

  const pictureStyle = {
    height: 60,
    width: 60,
  };

  const textStyle = {
    fontFamily: '"Joti One", cursive',
    fontSize: 35,
    fill: '#e3e3e3',
    cursor: 'default',
  };

  if (props.player.currentPlayer) textStyle.fill = '#e9ea64';

  const pictureProperties = {
    style: pictureStyle,
    x: x - 140,
    y: y - 40,
    href: props.player.picture,
    clipPath: `url(#${clipId})`,
  };

  const frameProperties = {
    width: 55,
    height: 55,
    rx: 30,
    x: pictureProperties.x,
    y: pictureProperties.y,
  };

  return (
    <g>
      <defs>
        <rect id={rectId} {...frameProperties} />
        <clipPath id={clipId}>
          <use xlinkHref={'#' + rectId} />
        </clipPath>
      </defs>
      <use xlinkHref={'#' + rectId} strokeWidth="2" stroke="black" />
      <text filter="url(#shadow)" style={textStyle} x={x - 200} y={y}>{props.player.rank}º</text>
      <image {...pictureProperties} />
      <text filter="url(#shadow)" style={textStyle} x={x - 60} y={y}>{props.player.name}</text>
      <text filter="url(#shadow)" style={textStyle} x={x + 350} y={y}>{props.player.maxScore}</text>
    </g>
  );
};

Rank.propTypes = {
  player: PropTypes.shape({
    id: PropTypes.string.isRequired,
    maxScore: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    picture: PropTypes.string.isRequired,
    rank: PropTypes.number.isRequired,
    currentPlayer: PropTypes.bool.isRequired,
  }).isRequired,
  position: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired
  }).isRequired,
};

export default Rank;
```

Nothing to be scared of about this code either. The only unordinary thing that you are adding to this component is [the `clipPath` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath) and a `rect` inside the `defs` element to create a rounded portrait.

With these new files in place, you can head to your app ([`http://localhost:3000/`](http://localhost:3000/)) to see your new leaderboard feature.

![Showing the leaderboard in your React Game](https://images.ctfassets.net/23aumh6u8s0i/7zDgzmih6wVEW0uuJfBP17/177147d358e6db1b41eb1ff9a6c29f2b/showing-the-leaderboard-in-your-react-game)


"svg"