React.js学习版1~
对于React的介绍,上面写说是用于构建用户界面的JavaScript库
首先 我们需要在页面当中引进 <script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
这三个文件 可以去react的官网下载 还有一个核心注意点就在于 以前我们引入js文件时,type类型写的是text/javascript,而现在在react中,我们书写的是text/babel 只有通过这个写法,react才能够被成功执行
ReactDOM.render() <body>
<div id="box"></div>
</body>
这一个结构,清晰明了~ <script type="text/babel"> ReactDom.render( <h1>Hello,world</h1>,document.getElementById('box') ); </script>
这里有一个非常重要的部分,我们之前熟悉的代码当中我写完document.getElementById(‘元素id名’);会习惯性的加一个分号,如果在这里添加的话 会有报错。 这个提示超级清晰明了~一看就会了 ReactDOM.render(
<img src="../images/1.jpg" alt="xi" >,document.getElementById('box')
)
最重要的东西一定不能遗漏,我们先看这个报错 单标签的结尾被我们漏掉了,应该写成 ReactDOM.render(
<img src="../images/1.jpg" alt="xi" />,document.getElementById('example')
)
这个时候就会出现一个完整的图片了~ JSX语法 例子 var names = ['1','2','3'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello,{name}!</div>
})
}
</div>,document.getElementById('box')
)
这个时候的页面效果就会呈现 JSX语法允许直接在模板上插入JavaScript变量。如果这个变量是一个数组,则会展开这个数组的所有成员。 var arr = [
<img src="../images/1.jpg" alt="图片" />,<img src="../images/2.jpg" alt="图片" />,<img src="../images/3.jpg" alt="图片" />
];
ReactDOM.render(
<div>{arr}</div>,document.getElementById('example')
);
这个时候就会展开三个图片~ 组件 React允许将代码封装成组件(component),然后像插入普通HTML标签一样,在网页中插入这个组件。 React.createClass()方法就是用来生成一个组件类。 var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>
}
});
ReactDOM.render(
<HelloMessage name="john" />,document.getElementById('box')
);
HelloMessage是一个组件类,模板插入时,会自动生成HelloMessage的一个实例。所有组件类都必须有自己的render方法,用于输出组件。 第一版先到这儿~ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |