使用Fusion.js建立一个'Hello World!'应用程序在5分钟内应用

0.
使用Fusion.js建立一个'Hello World!'应用程序在5分钟内应用

Fusion.js,Uber的开源通用Web框架旨在使Web开发更容易,生产轻量级,高性能的应用程序。我们最初建造融合.js.要改进自己的网站,并且自以来将其提供给社区作为开源项目。

在本教程中,我们演练如何开始使用Fusion.js并拥有“Hello World!”在5分钟内应用并运行。教程遍历三个简单的步骤,从创建应用程序到显示“Hello World!”在浏览器中。'Hello World!'应用程序是那些寻求深入了解Fusion.js框架的良好起点。

第1步:创建样板应用程序

创建Fusion.js应用程序很容易。在本教程中,我们将使用是在Facebook创建的开源包管理器,为我们的应用程序设置Fusion.js脚手架。yarn替换使用NPM客户端或其他包管理器的现有工作流,同时仍与NPM注册表兼容。它具有与现有工作流相同的功能,同时运行更快,更安全,更可靠。

笔记:如果您已完成此步骤,请跳至第2步:运行您的应用程序

在您的终端中,运行以下内容命令创建样板应用程序,你好世界 - 应用程序

纱线创建Fusion-app hello-world-app

该命令将创建一个新目录,你好世界 - 应用程序,其中包含设置和运行Fusion.js所需的所有文件。当纱线成功完成时,终端将显示该消息“成功!您已创建了一个Fusion.js项目“。现在转到新创建的源目录你好世界 - 应用程序

光盘Hello-World-app / src

跑步LS.查看文件结构你好世界 - 应用程序


├──页面
│├──Home.js.
│└──pagenotfound.js.
├──主要.js.
└──root.js.

目录页面包含反应渲染演示页面的代码和“未找到页面”页面。文件main.js.是应用程序的入口点,还有root.js.包含路由。

第2步:运行您的应用程序

您现在可以开始在步骤1.在终端中开始创建的应用程序,运行以下内容项目根目录中的命令:

纱线开发

这对Fusion.js Demo页面提供了服务,如下所示,在http:// localhost:3000上。

Fusion.js开始页面

第3步:说'你好世界!'

In the final step of this tutorial, you will rewrite the default Fusion.js demo page to make it say ‘Hello World!’ To simplify this step, you must replace the demo code in the existing home.js file with new code that can render the ‘Hello World!’ text in your browser. This means the routes will remain the same and no other code changes are required.

  1. 打开home.js.并删除现有代码,以便文件完全为空。
  2. 复制并粘贴代码片段下面home.js.。此代码段导入用于渲染'Hello World!'文本的React Libraries。
// src / pages / home.js

进口反应“反应”;

consthome =()=>(

);

出口默认家;

  1. 添加'Hello World!'文本之间
    标签。
// src / pages / home.js

进口反应“反应”;

consthome =()=>(
<div>你好,世界!div>
);

出口默认家;

  1. 最后,重新运行纱线开发重新运行您的申请。只要服务器再次启动,通过访问http:// localhost:3000来访问您的文件。留言构建在x.xxx中完成将在服务器重新启动时显示在终端中。在您的浏览器中,您现在应该看到您的应用程序主页显示“Hello World!”

Fusion.js Hello World页面

做得好!您刚刚学习了如何使用Fusion.js创建一个简单的应用程序!渴望了解有关Web框架的更多信息?阅读我们的教程如何创建插件Fusion.js.

如果构建大规模的Web应用程序,请考虑申请职务在优步的网络平台团队!

注释