项目-MMO游戏-DEV365 开发者社区

大家好！我叫Renardo Williams，此博客是关于我的Web应用程序MMO游戏的。

MMO Games应用程序是目前生活和繁荣的（MMO）游戏的目录。使用React JavaScript，React Bootstrap和CSS开发了第2页，MMO Games Project为您带来了重点的引人入胜的标题列表。无论您是经验丰富的播放器还是好奇的新人，您都可以使用此应用程序来发现您的下一个MMO体验。

MMO游戏是使用JavaScript React创建的。这是一个由Facebook开发的开源框架和库。它用于快速有效地构建交互式用户界面和Web应用程序，代码明显少于Vanilla JavaScript。

要创建一个新的React应用程序，您可以选择以下方法之一：

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

在我的Web应用程序的场景后面是DB.JSON文件，该文件使用JSON（JavaScript对象符号）API是一个应用程序编程接口相同的硬件设备或不同地理区域的不同计算机之间。

在MMO游戏的背景下，我使用API检索游戏列表以填充该应用程序。公共MMO Games API的修改版本用于制作phase-2-project-server。用于页面的API。

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

React JavaScript的好处

成分

让您将UI分为独立，可重复使用的零件，并孤立地思考每个作品。组件可以做很多事情，但是它们的最终目标始终是相同的：它们都必须包含一个代码段，以描述他们应该向DOM呈现的内容。
从概念上讲，组件就像JavaScript函数。他们接受任意输入（称为“ props”），并返回反应元素，描述了应该出现在屏幕上的内容。

钩子

useState在MMO Games应用程序中大部分时间都使用，讨论React中的状态。状态是您组件中动态的数据：随着用户与应用程序交互，它会随着时间而变化。组件的状态与组件的道具不同，可以在组件的生活中发生变化。

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>
  );
}

在这里，useState是一个钩子。我们将其称为函数组件中以添加一些局部状态。 React将在重新汇款之间保留这种状态。 useState返回一对：当前状态值和一个使您更新的函数。您可以从事件处理程序或其他地方调用此功能。

useEffect钩让您在功能组件中执行副作用：

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>
  );
}

通过使用此钩子，您告诉反应，渲染后您的组件需要做点什么。 React会记住您传递的功能（我们将其称为我们的效果），并在执行DOM更新后稍后将其称为。在此效果中，我们设置了文档标题，但是我们也可以执行数据获取或调用其他命令式API。

客户端路由

MMO Games应用程序使用React路由器使用“客户端路由”。

在传统网站中，浏览器从Web服务器请求文档，下载并评估CSS和JavaScript资产，并渲染从服务器发送的HTML。当用户单击链接时，它将重新启动该过程的新页面。

客户端路由允许您的应用程序从链接单击更新URL，而无需向服务器中另一个文档的其他请求。相反，您的应用程序可以立即渲染一些新的UI，并通过获取新信息更新页面。

这可以更快的用户体验，因为浏览器不需要为下一页请求全新的文档或重新评估CSS和JavaScript资产。它还可以通过动画等方式进行更多动态的用户体验。

通过创建路由器并链接/提交链接和

：
来启用客户端路由。

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} />
);

我项目存储库的链接在这里：

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

MMO Games是我的2期Flatiron School项目。我总是计划添加功能和升级，因为我了解更多。感谢项目的反馈。期待将来成长和做更多的项目！谢谢你，享受！

学分
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