Project - MMO Games

Hello everyone! My name is Renardo Williams and this blog is about my web application MMO Games.

MMO games app is a catalog of (MMO) games that are currently live and thriving. The paged is developed using React JavaScript, React Bootstrap, and CSS, the MMO Games project brings you a focused list of engaging titles. Whether you are a seasoned player or a curious newcomer you can use this app to discover your next MMO experience.

MMO games was created using JavaScript React. This is a framework and library that is open-source which is developed by Facebook. It is used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript.

To create a new React app, you may choose one of the following methods:

npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app

Behind the scenes of my web application is a db.json file which uses JSON (JavaScript Object Notation) API is an application programming interface designed for lightweight data interchange (text-based data exchange format) between two computer applications operating on the same hardware device or between different computers in different geographical areas.

In the context of MMO games, I used API to retrieve a list of games to populate the app. A modified version of the public MMO Games API was used to make phase-2-project-server. The API used for the page.

fetch(`http://localhost:3001/games/`)
   .then(data => data.json())

Benefits of React JavaScript

Components

let you split the UI into independent, reusable pieces, and think about each piece in isolation. Components can do many things, but their end goal is always the same: they all must contain a snippet of code that describes what they should render to the DOM.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Hooks

useState is used majority of the time in MMO games app, talk about what state is in React. State is data that is dynamic in your component: it changes over time as users interact with your application. A component's state, unlike a component's props, can change during the component's life.

import React, { 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>
  );
}

Here, useState is a Hook . We call it inside a function component to add some local state to it. React will preserve this state between re-renders. useState returns a pair: the current state value and a function that lets you update it. You can call this function from an event handler or somewhere else.

The useEffect Hook lets you perform side effects in function components:

import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.

Client Side Routing

MMO games app utilizes "client side routing" using React Router.

In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders the HTML sent from the server. When the user clicks a link, it starts the process all over again for a new page.

Client side routing allows your app to update the URL from a link click without making another request for another document from the server. Instead, your app can immediately render some new UI and make data requests with fetch to update the page with new information.

This enables faster user experiences because the browser doesn't need to request an entirely new document or re-evaluate CSS and JavaScript assets for the next page. It also enables more dynamic user experiences with things like animation.

Client side routing is enabled by creating a Router and linking/submitting to pages with Link and

import * as React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

The link to my project Repo is here:

https://github.com/Renardo1985/Phase-2-Project.git

MMO Games is my Phase-2 Flatiron School project. I always plan to add features and upgrades as I learn more. I appreciate feedback on projects. looking forward to growing and doing a lot more projects in the future! Thank you and enjoy!

Credits
https://legacy.reactjs.org/docs/components-and-props.html
https://create-react-app.dev/docs/getting-started/
https://my.learn.co/courses/652/pages/react-components-basics?module_item_id=86197
https://my.learn.co/courses/652/pages/react-state?module_item_id=86213
https://legacy.reactjs.org/docs/hooks-effect.html
https://reactrouter.com/en/main/start/overview
https://www.pcgamesn.com/10-best-pc-mmos