反应启动项目

Created: November-22, 2018

关于这个项目

这是一个简单的样板项目。这篇文章将指导你为 ReactJs + Webpack + Bable 设置环境。

让我们开始吧

我们将需要节点包管理器来启动快速服务器并管理整个项目中的依赖关系。如果你是节点包管理器的新手，可以在此处查看。注意：此处需要安装节点包管理器。

创建一个具有合适名称的文件夹，然后从终端或 GUI 导航到该文件夹。然后转到终端并键入 npm init 这将创建一个 package.json 文件，没什么可怕的，它会问你几个问题，比如你的项目名称，版本，描述，入口点，git 存储库，作者，许可证等。这里的入口点很重要，因为节点在运行项目时最初会查找它。最后，它会要求你验证你提供的信息。你可以键入 yes 或修改它。好吧就是这样，我们的 package.json 文件准备好了。

快速服务器设置运行 npm install express @ 4 –save 。这是我们为这个项目所需的所有依赖项。这里保存标志很重要，没有它， package.js 文件将不会被更新。 package.json 的主要任务是存储依赖项列表。它将添加快速版本 4.你的 package.json 将看起来像 "dependencies": { "express": "^4.13.4", ............. },

完成下载后，你可以看到 node_modules 文件夹和我们的依赖项的子文件夹。现在在项目的根目录下创建新的文件 server.js 文件。现在我们正在设置快递服务器。我将通过所有代码并稍后解释。

var express = require('express');
// Create our app
var app = express();

app.use(express.static('public'));

app.listen(3000, function () {
  console.log('Express server is using port:3000');
});

var express = require（’express’）; 这将为你提供整个快递 api 的访问权限。

var app = express（）; 将快递库称为功能。 app.use（）; 让我们为你的快速应用程序添加功能。 app.use（express.static（ ‘公共’））; 将指定将在我们的 Web 服务器中公开的文件夹名称。 app.listen（port，function(){}） 这里我们的端口将是 3000 ，我们正在调用的函数将验证 Web 服务器是否正常运行。这就是快递服务器的设置。

现在转到我们的项目并创建一个新文件夹 public 并创建 index.html 文件。 index.html 是你的应用程序的默认文件，Express 服务器将查找此文件。该 index.html 的是简单的 HTML 文件，它看起来像

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
</head>

<body>
  <h1>hello World</h1>
</body>

</html>

然后转到终端的项目路径并输入 node server.js 。然后你会看到* console.log（‘Express 服务器正在使用端口：3000’）; *。

转到浏览器并在导航栏中键入 http：// localhost：3000 ，你将看到 hello World 。

现在进入公共文件夹并创建一个新文件 app.jsx 。JSX 是一个预处理器步骤，它为你的 JavaScript 添加 XML 语法。你绝对可以使用 React 而不使用 JSX，但 JSX 使 React 更加优雅。以下是 app.jsx 的示例代码 **

ReactDOM.render(
  <h1>Hello World!!!</h1>,
  document.getElementById('app')
);

现在转到 index.html 并修改代码，它应该是这样的

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23                                              /browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">                           </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js">    </script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

有了这个，你就完成了，我希望你会发现它很简单。