这里有新鲜出炉的ReactJS入门教程,程序狗速度看过来!
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
本篇文章主要介绍了ReactJs设置CSS样式的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在一些模块上遇到了不晓得阻力,又苦于网上没有找到那么多资源.于是打算先放一段时间,还是回过头来看ReactJs吧.
React颠覆了html的传统思维,代码基本都写在<script type="text/babel"></script>标签里面.我开发的时候采用的是IDEA,当然也可以使用atom或者webstor.使用IDEA时,需要在settings里面的Language & Framework设置Javascript language version为JSX Harmony.否则,编辑器可能会对你的正确语法进行报错.
- <script src="../js/react.js"></script>
- <script src="../js/react-dom.js"></script>
- <script src="../js/browser.min.js"></script>
- <script src="../js/jquery-1.7.2.min.js"></script>
html文件header标签里面引用上面前三个文件,就可以进行react开发了,但是由于jquery的ajax请求比较方便,所以这里我引用了jquery,当然也可以自己封装一个类似于ajax的方法,或者使用原生http请求与后台交互.
今天主要说说设置react样式的问题:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>React Js</title>
- <script src="../js/react.js"></script>
- <script src="../js/react-dom.js"></script>
- <script src="../js/browser.min.js"></script>
- <script src="../js/jquery-1.7.2.min.js"></script>
- <style rel="stylesheet">
- .hello{
- color: #ffffff;width: 200px;height: 30px;border: none;background-color: #00a0e9;line-height: 30px;text-align: center;font-size: 14px;
- font-family: "Microsoft YaHei UI";cursor: pointer;
- }
- .redBack{
- background-color: #f00;overflow: hidden;
- }
- </style>
- </head>
- <body>
- <div id="msg"></div>
- </body>
- <script type="text/babel">
- var colorStyle={
- color: '#ffffff',
- width: 200,height: 30,border: 'none',backgroundColor: '#00a0e9',textAlign: 'center',fontSize: 14,
- fontFamily: "Microsoft YaHei UI",cursor: 'pointer',float:'left',lineHeight:'30px'
- };
- var Http=React.createClass({
- getInitialState: function () {
- return{
- videoSrc:"../src/demo1.mp4"
- }
- },
- handPost:function () {
- // var HTTPrequest=new XMLHttpRequest();
- // HTTPrequest.open("GET","/json/city");
- // HTTPrequest.send();
- // HTTPrequest.onreadystatechange =function () {
- // if(HTTPrequest.readyState==4 && HTTPrequest.status==200){
- // console.log(JSON.parse(HTTPrequest.responseText));
- // }
- // }
- $.ajax({
- type:'GET',
- url:'/json/city',
- dataType:'json',
- success: function (data) {
- console.log(data)
- }
- })
- },
- render:function () {
- return(
- <div className="redBack">
- <video src={this.state.videoSrc} style={{float:'left',width:300,border:'5px solid #ffffff'}} controls="controls"></video>
- <div onClick={this.handPost} style={colorStyle}>点击请求城市资源</div>
- </div>
- )
- }
- });
- ReactDOM.render(
- <Http/>,document.getElementById('msg')
- )
- </script>
- </html>
如上代码所示,我觉得设置样式有三种方法:
1.如蓝色字体部分所示,直接写行内样式
2.在js代码中定义一个变量,然后在元素标签内部调用变量,如红色字体所示.
3.设置标签的className,如绿色字体部分
下面附上截图:
来源: http://www.phperz.com/article/17/0824/338778.html