如何使用Meteor创建应用程序？

它是一个用于开发 Web 和移动应用程序的全栈 JavaScript 平台。流星使用一组技术与 Node.js 和 JavaScript 一起实现我们的目标。它期望最少的开发工作并提供最佳性能。在本文中，我们将了解如何在流星上启动项目。

下面是一步一步的实现。

第 1 步：安装

• Linux 和 OS： cURL 命令用于通过指定服务器的位置与服务器交互，在这里我们接收到从流星提供的资源中安装流星的代码，而 sh 命令正在安装它。

curl https://install.meteor.com/ | sh

• Windows：在 Windows 中，我们需要节点包管理器来安装流星。

npm install -g meteor 

第 2 步：使用流星创建项目非常简单，只需在终端中编写流星创建命令以及一些配置即可。

meteor create app-name --option

• 配置：
  app-name –这将是我们的应用程序名称。
  option –流星支持的 JavaScript 库/框架的名称，即 Vue、Svelte、React、Blaze 和 Angular。此外，meteor 提供了更多选择。

例如，这里我们使用`meteor create hello-world –react`创建一个基于反应的应用程序

项目结构：成功初始化后，这将是我们的文件夹结构。

第 3 步：运行应用程序。在运行流星使所有文件更改保持同步后，编写以下命令以运行您的流星应用程序。

meteor run 

类似这样的内容将显示在您的终端上。

输出：当我们在浏览器中打开http://localhost:3000来查看我们的应用程序时，会出现如下截图所示的内容。这是流星应用程序的默认前端视图。

有了这个，我们的流星项目就准备好了，我们可以开始在其中编写我们的数据库模型、服务器逻辑和前端设计。

示例 1：在此示例中，我们将替换流星的默认前端内容。在imports/ui目录中存在一个App.jsx文件，我们可以在其中编写我们的反应代码。

文件名：App.jsx

Javascript

import React from 'react';
  
export const App = () => (
  

    
Hello, GFG Learner!
   
);

输出：

示例 2：这是如何在Meteor的帮助下从数据库中获取数据并在前端呈现数据的示例。首先，我们要创建 mongo 集合，这里我们创建了一个名为gfglinks的集合并将其导出，以便可以在其他文件中使用。

文件名：links.js

Javascript

import { Mongo } from 'meteor/mongo';
  
export const LinksCollection = new Mongo.Collection('gfglinks');

说明：创建集合后，我们可以向其中插入数据。在后端，我们将一些数据插入到集合中。 Meteor.startup 在服务器启动时执行一些给定的功能。 请注意，我们正在导入从links.js文件中导出的 LinksCollection。 insert 方法将给定的数据插入到数据库中。

文件名：main.js

Javascript

import { Meteor } from 'meteor/meteor';
import { LinksCollection } from '/imports/api/links';
  
function insertLink({ title, url }) {
  LinksCollection.insert({title, url});
}
  
Meteor.startup(() => {
    insertLink({
      title: 'Competitive Programming Guide',
      url: 
'https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=shm'
    });
  
    insertLink({
      title: 'Data Structures Tutorial',
      url: 
'https://www.geeksforgeeks.org/data-structures/?ref=shm'
    });
  
    insertLink({
      title: 'Algorithmic Tutorial',
      url: 
'https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm'
    });
});

说明：当数据在我们的数据库中时，我们可以将其提取到前端。在这里，我们正在渲染在最后一步中插入数据库的所有数据。 useTracker是流星中的一个钩子，负责处理组件的所有反应性。 LinkCollection 是我们从 link.js 文件中导出的那个，find 方法查找其中的所有数据。

稍后我们将在 map函数的帮助下简单地渲染一些li标签。

文件名：App.jsx

Javascript

import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { LinksCollection } from '../api/links';
  
const App = () => {
  const links = useTracker(() => {
    return LinksCollection.find().fetch();
  });
  
  return (
    

      
Hello, GeeksforGeeks Learner
H
      
Explore the Articles provided by GFG
      
{links.map(
        link => 

          {link.title}  Click Here!
           
        
      )}
    
  );
};
export default App;

输出：在所有这些过程之后，我们的应用程序已准备好运行，使用流星运行将显示如下所示的 GIF。