chili 默默学编程

React 技术栈(三):基本用法3


原文在此:

https://github.com/ruanyf/jstraining/blob/master/docs/react.md


9、React 组件库

React 有很多写好的组件库,如:

React-Bootstrap:https://react-bootstrap.github.io/

ReCharts:http://recharts.org/


按文档说明使用

下面以 ReCharts 为例


- 引入库文件:

    <script src="react-with-addons.min.js"></script>
<script src="react-dom.js"></script>
<script src="react-dom-server.min.js"></script>
<script src="Recharts.min.js"></script>
<script src="babel.min.js"></script>


- 使用:

    <div id="example" style="width: 1000px;height: 800px;"></div>
<script type="text/babel">
const {LineChart, Line, XAxis, YAxis, CartesianGrid} = Recharts;
const data = [
{name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
{name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
{name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
{name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
{name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
{name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
{name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];

const TinyLineChart = React.createClass({
render () {
return (
<LineChart width={1000} height={400} data={data}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
<Line type="monotone" dataKey="amt" stroke="#ff0000" />
</LineChart>
);
}
})

ReactDOM.render(
<TinyLineChart />,
document.getElementById('example')
);

</script>


- 渲染效果:



- 解释:

    - LineChart 是画面中的组件

    - LineChart 以及它自己内部的零件(Line 线, XAxis x轴, YAxis y轴, CartesianGrid 直角网格)都是来自 Recharts

    - LineChart 的数据源来自 data,最终是 Line 使用了 data




reply ( 0 )