vs代码中的Reactjs和Nodejs Comunication

时间:2017-01-06 06:44:56

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

我是React和节点js的新手。我创建了一个" 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文件夹中为api调用创建了一个新的js文件,

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格式的响应。请帮忙!!

1 个答案:

答案 0 :(得分:0)

你可以看到这个演示。

github link

运行:npm run dev