React笔记：开始吧~

React官方网站为初学者提供了学习React的Hello World 测试页面：https://jsfiddle.net/reactjs/69z2wepo/

同时，还可以在如下网址下载starter kit：http://reactjs.cn/react/downloads/react-15.3.1.zip

里面有很多demo，可以帮助初学者很快的了解React。

如下是hello world的示例代码：

<!DOCTYPE html>@H_403_11@
@H_403_12@<html@H_403_11@>@H_403_11@
  @H_403_12@<head@H_403_11@>@H_403_11@
    @H_403_12@<Meta@H_403_11@ charset@H_403_11@="UTF-8"@H_403_11@ />@H_403_11@
    @H_403_12@<title@H_403_11@>@H_403_11@Hello React!@H_403_12@</title@H_403_11@>@H_403_11@
    @H_403_12@<script@H_403_11@ src@H_403_11@="build/react.js"@H_403_11@>@H_403_11@@H_403_11@@H_403_12@</script@H_403_11@>@H_403_11@
    @H_403_12@<script@H_403_11@ src@H_403_11@="build/react-dom.js"@H_403_11@>@H_403_11@@H_403_11@@H_403_12@</script@H_403_11@>@H_403_11@
    @H_403_12@<script@H_403_11@ src@H_403_11@="https://npmcdn.com/babel-core@5.8.38/browser.min.js"@H_403_11@>@H_403_11@@H_403_11@@H_403_12@</script@H_403_11@>@H_403_11@
  @H_403_12@</head@H_403_11@>@H_403_11@
  @H_403_12@<body@H_403_11@>@H_403_11@
    @H_403_12@<div@H_403_11@ id@H_403_11@="example"@H_403_11@>@H_403_11@@H_403_12@</div@H_403_11@>@H_403_11@
    @H_403_12@<script@H_403_11@ type@H_403_11@="text/babel"@H_403_11@>@H_403_11@ ReactDOM.render( @H_403_12@<h1@H_403_11@>@H_403_11@Hello,world!@H_403_12@</h1@H_403_11@>@H_403_11@,document.getElementById('example') ); @H_403_11@@H_403_11@@H_403_12@</script@H_403_11@>@H_403_11@
  @H_403_12@</body@H_403_11@>@H_403_11@
@H_403_12@</html@H_403_11@>@H_403_11@

我们也可以在单独的文件中引入js代码：

ReactDOM.render(
  @H_403_12@<h1@H_403_11@>@H_403_11@Hello,document.getElementById('example')
);

然后在html文件中加入：

@H_403_12@<script@H_403_11@ type@H_403_11@="text/babel"@H_403_11@ src@H_403_11@="src/helloworld.js"@H_403_11@>@H_403_11@@H_403_11@@H_403_12@</script@H_403_11@>@H_403_11@

需要特别注意的是，script的type标签是：<script type="text/babel">

为什么我们选择React？

React其实就是一个JavaScript库，Facebook 和 Instagram都是用React来建立用户界面，它相当于是MVC中的View。

利用React，我们可以更好的搭建那些具有动态数据的大型应用。

React可以在数据变动的时候自动的更新UI，并且仅仅更新有变动的部分。

利用React，我们要做的唯一的事情就是搭建components(元素／模块)，这些元素封装得很好，使得代码的利用率很高，测试性强，并且易于分离。

数据显示

React使得数据显示变得很容易，并且，可以自动更新。

下面是一个helloworld例子：

<!DOCTYPE html>@H_403_11@
@H_403_12@<html@H_403_11@>@H_403_11@
  @H_403_12@<head@H_403_11@>@H_403_11@
    @H_403_12@<Meta@H_403_11@ charset@H_403_11@="UTF-8"@H_403_11@ />@H_403_11@
    @H_403_12@<title@H_403_11@>@H_403_11@Hello React@H_403_12@</title@H_403_11@>@H_403_11@
    @H_403_12@<script@H_403_11@ src@H_403_11@="https://npmcdn.com/react@15.3.1/dist/react.js"@H_403_11@>@H_403_11@@H_403_11@@H_403_12@</script@H_403_11@>@H_403_11@
    @H_403_12@<script@H_403_11@ src@H_403_11@="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"@H_403_11@>@H_403_11@@H_403_11@@H_403_12@</script@H_403_11@>@H_403_11@
    @H_403_12@<script@H_403_11@ src@H_403_11@="https://npmcdn.com/babel-core@5.8.38/browser.min.js"@H_403_11@>@H_403_11@@H_403_11@@H_403_12@</script@H_403_11@>@H_403_11@
  @H_403_12@</head@H_403_11@>@H_403_11@
  @H_403_12@<body@H_403_11@>@H_403_11@
    @H_403_12@<div@H_403_11@ id@H_403_11@="example"@H_403_11@>@H_403_11@@H_403_12@</div@H_403_11@>@H_403_11@
    @H_403_12@<script@H_403_11@ type@H_403_11@="text/babel"@H_403_11@>@H_403_11@ // ** Your code goes here! **@H_403_11@ @H_403_11@@H_403_12@</script@H_403_11@>@H_403_11@
  @H_403_12@</body@H_403_11@>@H_403_11@
@H_403_12@</html@H_403_11@>@H_403_11@

下面，是JavaScript代码，放在上面代码的注释部分。

var@H_403_11@ HelloWorld = React.createClass({
  render: function@H_403_11@()@H_403_11@ {@H_403_11@
    return@H_403_11@ (
      <p>
        Hello,<input type="text"@H_403_11@ placeholder="Your name here"@H_403_11@ />!
        It is@H_403_11@ {this@H_403_11@.props.date.toTimeString()}
      </p>
    );
  }
});

setInterval(function@H_403_11@()@H_403_11@ {@H_403_11@
  ReactDOM.render(
    <HelloWorld date={new@H_403_11@ Date()} />,document.getElementById('example'@H_403_11@)
  );
},500@H_403_11@);

tips：如上代码可以在本章开头提供的链接里面进行测试喔～

在测试的结果页面里，我们可以向input标签中输入数据：注意到，React仅仅在更新时间，而我们输入的数据不会受到影响。而我们没有为此写什么多余的代码，这一切都是React为我们完成的。

也就是说，React仅仅在必要的时候才会修改DOM，并且，它会使用最高效的方式来操作DOM。

注意，this.props只读！它用来向JSX中传递数据，并且是不可变的。

元素 & 函数

元素例如：var HelloWorld其实很简单，我们可以就将它们看作是包含参数props和state的函数，并且它们可以渲染HTML。

注意：React的元素仅可以渲染一个根结点，如果需要返回多个结点，请将所有结点包裹在一个根结点中。

JSX 句法

JSX就是用HTML的语法来创建JavaScript对象。

React.createElement('a'@H_403_11@,{href: 'https://facebook.github.io/react/'@H_403_11@},'Hello!'@H_403_11@)

上面的代码是使用纯JS语言来创建的一个链接标签。

它生成了：

@H_403_12@<a@H_403_11@ href@H_403_11@="https://facebook.github.io/react/"@H_403_11@>@H_403_11@Hello!@H_403_12@</a@H_403_11@>@H_403_11@

同时，根据用户需求的不同，JSX对于React并不是必须的。你也可以只是使用一般的JavaScript代码来创建React元素：

var@H_403_11@ child1 = React.createElement('li'@H_403_11@,null@H_403_11@,'First Text Content'@H_403_11@);
var@H_403_11@ child2 = React.createElement('li'@H_403_11@,'Second Text Content'@H_403_11@);
var@H_403_11@ root = React.createElement('ul'@H_403_11@,{ className: 'my@H_403_11@-list@H_403_11@' },child1@H_403_11@,child2@H_403_11@);@H_403_11@
ReactDOM.render(root,document@H_403_11@.getElementById('example'@H_403_11@));

React笔记：开始吧~

为什么我们选择React？

数据显示

元素 & 函数

JSX 句法

猜你在找的React相关文章