VS 代码中的 Reactjs 和 Nodejs 通信答案

【问题标题】：Reactjs and Nodejs Comunication in vs codeVS 代码中的 Reactjs 和 Nodejs 通信
【发布时间】：2017-05-20 21:40:22
【问题描述】：

我对 React 和 node js 非常陌生。我在 reactjs 中创建了一个“Hello World”项目。它工作正常。

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>Helllloooooooo</div>

    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';


// var Books = require('./apicall.js');

// var books = JSON.parse(document.getElementById('initial-data').getAttribute('data-json'));  
// ReactDOM.render(<Books books={books} />, document.getElementById('root')); 

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
  </body>
</html>

我在节点 js 的 src 文件夹中创建了一个新的 js 文件用于 api 调用，

var Client = require('node-rest-client').Client;

var client = new Client();
client.registerMethod("jsonMethod", "http://webapi.com/Service.svc/xyz/value/1?format=json", "GET");

client.methods.jsonMethod(function (data, response) {
    // parsed response body as js object 
    console.log(data);
    // raw response 


});

我如何调用这个节点 api 来做出反应，以便我可以看到 json 格式的响应。请帮忙！！

【问题讨论】：

这应该通过 http 完成，使用称为 ajax 调用的东西。谷歌这个，你会找到你需要的所有信息。
基本上 ajax 的意思是，浏览器在不加载新页面的情况下向服务器发出另一个请求（这可以在浏览器内的 JavaScript 中完成）

标签： javascript json node.js reactjs visual-studio-code

【解决方案1】：

你可以看这个演示。

github link

运行：npm run dev

【讨论】：

试过了，但是没用。是 React 的 redux 插件吗？
是的，react+redux。但是你可以从前端发送ajax请求。