React学习笔记

发表于 2018-05-25 10:52:42
阅读 14

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')
);


鬼谷子叔叔

跟福哥学编程吧~~
日志
212
浏览
1626

相关日志