React学习笔记

鬼谷子叔叔 - 2018-05-25 10:52

1. 什么是React？

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

2. 安装React

建立一个html文件，在head部分引用react在线包（当然，您也可以下载下来使用）

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

3. 入门

React就是在html页面放一个root element，然后通过 render 方法对这个根对象进行渲染。

因为react的html都在jsx里，所以我们下面的例子就不提供html代码了，都是一样的。

<span id="test-react">

</span>

3.1. 文本渲染

script

const element = <h1>这是一段文本</h1>;
ReactDOM.render(
    element,
    document.getElementById('test-react')
);

3.2. 循环

script

const coll = [
    {id:1, text:'A'},
    {id:1, text:'B'},
    {id:1, text:'C'}
];
const listItems = coll.map(
    (item) =>
    <li>{item.text}</li>
);
ReactDOM.render(
    <ol>{listItems}</ol>,
    document.getElementById('test-react')
);

鬼谷子叔叔
跟福哥学编程吧~~

热度 1626

文章 212