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>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel"> ReactDOM.render( <h1>Hello,world!</h1>,document.getElementById('example') ); </script>
</body>
</html>
我们也可以在单独的文件中引入js代码: ReactDOM.render(
<h1>Hello,document.getElementById('example')
);
然后在html文件中加入: <script type="text/babel" src="src/helloworld.js"></script>
需要特别注意的是,script的type标签是: 为什么我们选择React?React其实就是一个JavaScript库,Facebook 和 Instagram都是用React来建立用户界面,它相当于是MVC中的View。 利用React,我们可以更好的搭建那些具有动态数据的大型应用。 React可以在数据变动的时候自动的更新UI,并且仅仅更新有变动的部分。 利用React,我们要做的唯一的事情就是搭建components(元素/模块),这些元素封装得很好,使得代码的利用率很高,测试性强,并且易于分离。 数据显示React使得数据显示变得很容易,并且,可以自动更新。 下面是一个helloworld例子: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel"> // ** Your code goes here! ** </script>
</body>
</html>
下面,是JavaScript代码,放在上面代码的注释部分。 var HelloWorld = React.createClass({
render: function() {
return (
<p>
Hello,<input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function() {
ReactDOM.render(
<HelloWorld date={new Date()} />,document.getElementById('example')
);
},500);
tips:如上代码可以在本章开头提供的链接里面进行测试喔~ 在测试的结果页面里,我们可以向input标签中输入数据:注意到,React仅仅在更新时间,而我们输入的数据不会受到影响。而我们没有为此写什么多余的代码,这一切都是React为我们完成的。 也就是说,React仅仅在必要的时候才会修改DOM,并且,它会使用最高效的方式来操作DOM。 注意,this.props只读!它用来向JSX中传递数据,并且是不可变的。 元素 & 函数元素例如: 注意:React的元素仅可以渲染一个根结点,如果需要返回多个结点,请将所有结点包裹在一个根结点中。 JSX 句法JSX就是用HTML的语法来创建JavaScript对象。 React.createElement('a',{href: 'https://facebook.github.io/react/'},'Hello!')
上面的代码是使用纯JS语言来创建的一个链接标签。 它生成了: <a href="https://facebook.github.io/react/">Hello!</a>
同时,根据用户需求的不同,JSX对于React并不是必须的。你也可以只是使用一般的JavaScript代码来创建React元素: var child1 = React.createElement('li',null,'First Text Content');
var child2 = React.createElement('li','Second Text Content');
var root = React.createElement('ul',{ className: 'my-list' },child1,child2);
ReactDOM.render(root,document.getElementById('example'));
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- xml – WSDL:什么是和之间的区别
- reactjs – 是否可以使用React Router访问当前路由组件
- c# – 如何在RichTextBox控件中获取当前行?
- Flex中自定义组件ItemRenderer,数据绑定dataprovider,刷新
- Oracle之静默安装
- reactjs – React.render()和ReactDOM.render()之间有什么区
- cocos2dx源码:相框PhotoFrame
- 基于DDD的现代ASP.NET开发框架--ABP系列之14、ABP领域层——
- ios – xCode/Swift’filename使用两次“构建错误
- 如何从C#应用程序自动化Firefox?