Question

我刚开始学习ReactJS，我在这里学习本教程。 egghead.io我刚刚完成了第一个视频并开发了一个应用程序，如视频中所示，但有些我如何看到html部分但未能加载来自App.js的动态内容以下是我的代码：

App.js

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

var tableView: UITableView!
let baseURL = “<url>”
var items = [UserObject]()

override func viewDidLoad() {
  super.viewDidLoad()
  let frame:CGRect = CGRect(x: 0, y: 100, width: self.view.frame.width, height: self.view.frame.height-100)
  self.tableView = UITableView(frame: frame)
  self.tableView.dataSource = self
  self.tableView.delegate = self
  self.view.addSubview(self.tableView)
  getJSON()
}

//5 rows
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  print("count /(self.items.count)")
  return self.items.count
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  var cell = tableView.dequeueReusableCellWithIdentifier("CELL")
  if cell == nil {
    cell = UITableViewCell(style: UITableViewCellStyle.Value1, reuseIdentifier: "CELL")
  }
  let user = self.items[indexPath.row]
  print(self.items)
  cell!.textLabel?.text = user.name
  cell!.detailTextLabel?.text = user.date // UPDATE
  return cell!
}


func getJSON() {
  let url = NSURL(string: baseURL)
  print(url)
  let request = NSURLRequest(URL: url!)
  let session = NSURLSession(configuration: NSURLSessionConfiguration.defaultSessionConfiguration())
  let task = session.dataTaskWithRequest(request) { (data, response, error) -> Void in
    if error == nil {
      let swiftyJSON = JSON(data: data!)
      let results = swiftyJSON.arrayValue
      for entry in results {
        self.items.append(UserObject(json: entry))
      }
      dispatch_async(dispatch_get_main_queue(),{
        self.tableView.reloadData()
      })
    } else {
      print("error \(error)")
    }
  }
    task.resume()
  }
}

的index.html：

import React from 'react';
class App extends React.Component {
  // always expected to return
  render() {
    return '<div><h4>Hello World of ReactJS</h4></div>'
  }
}
export default App;

main.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReactJS Tutorial</title>
</head>
<body>
  <h1>ReactJS First Project</h1>
  <div id="app">
  </div>
  <script src="index.js"></script>
</body>
</html>

的package.json

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

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

webpack.config.js：

{
  "name": "App",
  "version": "1.0.0",
  "description": "First application of ReactJS",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "AD",
  "license": "Apache",
  "dependencies": {
    "babel-core": "^6.13.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.1",
    "babel-preset-react": "^6.11.1",
    "react": "^15.3.0",
    "react-dom": "^15.3.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^1.9.0"
  }
}

需要一些帮助来运行它，不确定。我按照视频中的要求安装了所有内容，我使用的是节点6.2.2。

Answer 1

在main.js中，更改：

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

到

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

报价是问题所在。您想要渲染导入的组件，而不是某些String。如果你在控制台收到警告，我也会感兴趣。

面对ReactJS第一个程序的一些问题

1 个答案: