使用支持的 Node.js API 创建一个简单的 React.js 组件

概括

成为一名全栈 Web 开发人员需要经历一段艰难的学习过程，因为至少您必须学习如何在三个领域进行编码：1) 持久层、2) 提供逻辑的应用层和 3) 用于呈现用户可交互界面的视图层。在大多数情况下，每个层都将使用不同的编程语言实现，因此您需要学习的材料数量会更多。但是，使用 Javascript，您可以轻松使用一种涵盖所有三个层的编程语言，从而使学习体验更易于管理。

在本指南中，我们将介绍如何使用 Javascript Node.js 作为应用层、React.js 作为与后端交互的视图层来构建一个简单的后端服务器，以模拟全栈体验。

设置服务器

您将要创建的服务器应用程序将是一个返回 JSON 数据的模拟 API 端点。首先创建一个名为app.js的 Javascript 文件，其中包含以下内容：

      var http = require('http');

var hostname  = '127.0.0.1';
var port      = 3000;

var app = http.createServer(function(req, res) {
            res.setHeader('Content-Type', 'application/json');

            res.end(
              JSON.stringify({
                firstName: "John",
                lastName: "Doe"
              })
            );
          });

app.listen(port, hostname);
    

使用纯 Javascript 和 Node.js，您可以轻松创建充当端点的服务器应用程序服务器。行res.setHeader('Content-Type', 'application/json')强制响应以 JSON 形式返回数据。函数res.end()接受包含firstName和lastName的 JSON 对象的字符串版本，这将是此端点的有效负载。通过运行行app.listen(port, hostname)启动服务器应用程序，其参数设置为主机的 localhost 和端口号 3000。

运行服务器

在终端中发出以下命令来开始运行服务器：

      $ node app.js

使用浏览器访问 URL https://localhost:3000，您应该会看到以以下形式返回的 JSON 对象：

      {
  "firstName": "John",
  "lastName": "Doe"
}
    

一旦您验证了模拟端点正在工作，请执行相同的操作，但这次以编程方式使用 React.js 前端组件。

创建 React.js 前端

首先创建一个名为PersonComponent的 React 组件，代码如下：

      import React from 'react';
import $ from 'jquery';

export default class PersonComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: ""
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.firstName} {this.state.LastName}</h1>
      </div>
    );
  }
}
    

此 vanilla 组件将仅显示firstName和lastName状态值。最初，这些值设置为空字符串。

接下来，创建一个从后端 API 获取数据的方法，其端点为https://localhost:3000 。在组件中创建以下获取方法：

      fetch() {
  var context = this;

  $.ajax({
    url: 'http://localhost:3000',
    method: 'GET',
    success: function(response) {
      context.setState({
        firstName: response.firstName,
        lastName: response.lastName
      });
    }
  });
}
    

首先创建一个引用上下文，其值为this，引用组件的实例。代码成功调用 API 后端后，它将在成功函数的逻辑中使用。context将调用setState并更新来自response的 React.js 组件的状态值，而 response 又是 API 返回的 JSON 对象。

最后要做的是在首次挂载组件时自动调用fetch。为此，请使用以下逻辑重写 React.js 组件方法componentDidMount() ：

      componentDidMount() {
  this.fetch();
}
    

所有这些操作都是在组件成功安装后调用fetch。反过来，fetch将与 API 交互，更新状态，并强制使用更新的值重新渲染视图，从而完成循环。

总体代码

最终代码如下：

服务器应用程序

      var http = require('http');

var hostname  = '127.0.0.1';
var port      = 3000;

var app = http.createServer(function(req, res) {
            res.setHeader('Content-Type', 'application/json');

            res.end(
              JSON.stringify({
                firstName: "John",
                lastName: "Doe"
              })
            );
          });

app.listen(port, hostname);
    

ReactJS 前端

      import React from 'react';
import $ from 'jquery';

export default class PersonComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: ""
    }
  }

  componentDidMount() {
    this.fetch();
  }

  fetch() {
    var context = this;

    $.ajax({
      url: 'http://localhost:3000',
      method: 'GET',
      success: function(response) {
        context.setState({
          firstName: response.firstName,
          lastName: response.lastName
        });
      }
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.firstName} {this.state.LastName}</h1>
      </div>
    );
  }
}
    

结论

在本指南中，您了解了如何使用单一编程语言来实现应用程序的后端和前端组件。这缩短了学习曲线，因为您只需专注于学习一种编程语言，而不是处理系统不同层的多种语言。在大多数情况下，这可以证明是一种更灵活的应用程序构建方法，因为您可以花时间深入研究 Javascript 并理解其更高级的复杂性，同时仍然能够为技术堆栈的所有部分做出贡献。添加持久层也将更容易，因为您只需寻找一个同样用 Javascript 编写的抽象层，它为底层数据库提供 API 调用。

如果您有任何问题或疑虑，或者只是想聊聊编程方面的一般问题，请联系我@happyalampay！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文