react初始（1）
前言：react框架的出现是因为Facebook在建设Instagram交流平台的时候要处理大量的数据流，但是行业流行的MVC框架并不能适合Facebook公司的要求，他们就组织了自己的人力来开发react框架，发现很好用，并且在2013年实现了开源，react框架最求的目标就是只需要一个框架，在PC端mobile端和server上都能够运行。作为前端开发人员了来说掌握这种框架应该是必须的吧，只可惜我是菜鸟啦，现在这个时候才开始学习react，感觉会不会太晚呢，前几天微信的小程序出来了，各位大神们仿佛要吹捧上了天，这么几天过去了没见有一个做好的小程序发布出来，要说它可能颠覆移动app我并不是太看好，首先你得让所有用户去下载微信，然后再用你得微信，说极端点儿，手机里大部分的应用都移植到到了小程序里，那么手机是不是不需要一直在出高配的呢，那还需要手机做出来那么多功能干什么呢？所以我本人觉得微信小程序的出现会让一些不出名的APP看到希望，但对于那些早已经进入民众潜意识里的应用，在未来几年内用户还是青睐下载的，所以小程序和APP并存的现象会继续很长一段儿时间的。
貌似扯远了，还是继续我的react之路吧，小程序我也玩了会儿，现在才发现他的底层原理和react好像啊，那么我更要抓紧学好 react了。恩，先甩个链接react官网的链接：https://facebook.github.io/react/docs/getting-started.html天才第一步当然是下载他们的框架啦：
<!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://unpkg.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>
恩，知道了我们要先在我们的文档中引入react.js--ract-dom.js--browser.min.js(采用外部引入的方式，断网的时候不可用哦)肿么办呢，还好复制这个链接到浏览器的地址栏https://unpkg.com/babel-core@5.8.38/browser.min.js恩我们就看到了压缩版的js源码，那就动动的小手Ctrl+C+V了，然后新建一个js脚本文件
把咱们复制的代码粘贴到里面就好了，这样我们就有了browser.min.js了，开心的用吧！
万事俱备开始我的第一个小demo的练习吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="App"></div>
</body>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
<script type="text/babel">//类型不要写成了text/javascript
var HelloReact = React.createClass({ //1.创建react组件,组件名首字母必须大写
render : function(){
return(
<div>This is my first react!</div>
)
}
})
ReactDOM.render(<HelloReact/>,document.getElementById("App")); //2.渲染组件并把它插入html节点里面
//1.react.min.js里有一个核心对象--React.createClass
//2.render 我们创造的组件都在render里面
//3.react.min.js reactDOM.render(</组件名>,要插入的节点);
</script>
</html>
抱歉，中午睡了一觉现在都应两点了，留给我自己的时间并不是很多了
那么我们能在文档中插入元素了，如何给元素添加样式呢？我们再看下一个例子咯：谨记--可以直接给我们生成的元素加id或则直接加className然后通过styel标签加样式，但是react并不支持 这种行为，它不能体现react额组件化，应该是每个组件与自己的内容和样式。所以我们采取变量的方式来给元素加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="App"></div>
</body>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
<script type="text/babel">//类型不要写成了text/javascript
var HelloReact = React.createClass({
render : function(){
var style1 = {fontSize:"18px",color:"red"};
var style2 = {textDecoration:"underline"};
var style3 = {fontSize:"20px"};
return(
<div style={style1}>This is my first React!
<span style={style2}>这是一个span标签</span><b style={style3}>这是一个b标签</b>
</div>
)
}
});
ReactDOM.render(<HelloReact/>,document.getElementById("App"));
</script>
</html>
这种方式如果标签比较多的时候就显得代码很臃肿了，并不是那么优雅所以就有了下面的方法：
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
<script src="style.js"></script> //把我们的样式写在一个syle.js文件里面
<script type="text/babel">//类型不要写成了text/javascript
var HelloReact = React.createClass({
render : function(){
return(
<div style={style.style1}>This is my first React!
<span style={style.span1}>这是一个span标签</span><b style={style.b1}>这是一个b标签</b>
</div>
)
}
});
ReactDOM.render(<HelloReact/>,document.getElementById("App"));
</script>
style.js 文件夹里面的写法如下：
var style = {
style1 : {fontSize:"20px",color:"red"},
span1 : {fontSize:"24px",color:"black"},
b1 : {fontSize:"14px",color:"orange"}
}
还能通过给我们创建的组件的prototype来给元素加样式，真的很神奇哦（原谅我的无知）：
我们给标签加样式可以采用如下两种：1.局部变量的样式 2.定义全局样式
<script type="text/babel">//类型不要写成了text/javascript
var HelloReact = React.createClass({
Click : function(){
alert("被点击了！");
},
render : function(){
return(
<button onClick={this.Click}>按钮</button>
)
}
});
HelloReact.prototype.css = {
size : {fontSize:"40px;"}
}
ReactDOM.render(<HelloReact/>,document.getElementById("App"));
</script>
如果采用全局的样式具体写法如下，但是我自己造了一个Bug到现在都没有解决
<script type="text/babel">//类型不要写成了text/javascript
var HelloReact = React.createClass({
var Ev = {
Click : function(){
alert("被点击了！"); //貌似问题出现在我这里
}
}
render : function(){
return(
<button onClick={Ev.Click}>按钮</button>
)
}
});
HelloReact.prototype.css = {
size : {fontSize:"40px;"}
}
ReactDOM.render(<HelloReact/>,document.getElementById("App"));
</script>
另外一种加事件的方式是通过prototype，这里我就不再介绍了。
想要在页面中加入多个标签怎么办呢？react也给我们提供一种方式，原谅我不知道开发者为什么要这样考虑，暂且这样用啦！代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="App"></div>
</body>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
<script src="style.js"></script>
<script type="text/babel">//类型不要写成了text/javascript
var Header = React.createClass({
render : function(){
return(
<header>这是头部</header>
)
}
});
var Content = React.createClass({
render : function(){
return(
<section>这是主体</section>
)
}
});
var Footer = React.createClass({
render : function(){
return(
<footer>这是底部</footer>
)
}
});
var Root = React.createClass({ //关键一步在这里
render : function(){
return(
<div>
<Header/>
<Content/>
<Footer/>
</div>
)
}
});
ReactDOM.render(<Root/>,document.getElementById("App"));
</script>
</html>
老是包这样的错误很烦人啊，不过貌似是因为文档的加载顺序错误有关，那么我就把script标签里的内容加到body标签里面看看有没有什么变化：
恩，这放置之后就没有什么问题了，看来我 还是太嫩了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
<script src="style.js"></script>
<script type="text/babel">
var Header = React.createClass({
render : function(){
return(
<div>
<ul style={style1.style2}>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<ul style={style1.style3}>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul> </div>
)
}
});
ReactDOM.render(<Header/>,document.getElementById("App"));
</script>
<div id="App"></div> </body> </html>
刚才写了一个小demo气得不行，自己的逻辑绝逼差的要死，卡了我至少20分钟！
原创文章，转载请注明出处 蜗蜗牛在路上[http://www.cnblogs.com/wowoniuzailushang]
同步发表于:http://blog.csdn.net/wowoniuzailushang CSDN
react初始（1）的更多相关文章
- react初始（2）
既然我开始了react的学习,就没有停下来的理由了,我应该很幸运我还有这个时间去学习react,我不认为我聪明,但是我认为我够努力.我先在或许是一个不知道未来该是怎样的人,我们的迷茫和无知源于你不去接 ...
- react初始
一.一些基础概念 1.框架:基于整个项目的 2.库:在某个模块中单独使用,轻量级的 在vue中,DOM的操作时DOM指令调用js 在react中,所有的DOM 渲染都是由JS完成的 组件基于视图 模块 ...
- [转] React同构思想
React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想. 出于篇幅原因,本文不会介绍React基础,所以,如果你还不清楚React的state/ ...
- React 同构思想
作者:yangchunwen React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想. 出于篇幅原因,本文不会介绍React基础,所以,如果你还 ...
- 搭建一个简单的React项目
我是使用了create-react-app来搭建的基本框架,其中的原理和vue-cli差不多的脚手架.(当然也可以自己配置项目目录,这里我偷了一下懒) npm install -g create-re ...
- 二、React初体验之React组件创建
(中间因为应付各种考试,处理其他事情,隔了好时间没更新,现在终于有时间了,续上!) 本文为React初始体验,因此先不考虑文件如何组织,尽量以最简单的方式让大家了解React其中的原理. 在创建组件( ...
- 【转】Virtual DOM
前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React.Virtual DOM 的文章.但是直到前不久我专门花时间去学习 ...
- 初学React，setState后获取到的thisstate没变，还是初始state？
问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state?描述: getInitialState(){ return {data:[]}; } ...
- 初始React Native
1.何是React Native: React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开 ...
随机推荐
- 在.Net中实现自己的简易AOP
RealProxy基本代理类 RealProxy类提供代理的基本功能.这个类中有一个GetTransparentProxy方法,此方法返回当前代理实例的透明代理.这是我们AOP实现的主要依赖. 新建一 ...
- Hyper-V无法文件拖拽解决方案~~~这次用一个取巧的方法架设一个FTP来访问某个磁盘，并方便的读写文件
异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 服务器相关的知识点:http://www.cnblogs.com/dunitia ...
- 逆天通用水印支持Winform，WPF，Web，WP，Win10。支持位置选择（9个位置 ==》[X]）
常用技能:http://www.cnblogs.com/dunitian/p/4822808.html#skill 逆天博客:http://dnt.dkil.net 逆天通用水印扩展篇~新增剪贴板系列 ...
- 谱聚类（spectral clustering）原理总结
谱聚类(spectral clustering)是广泛使用的聚类算法,比起传统的K-Means算法,谱聚类对数据分布的适应性更强,聚类效果也很优秀,同时聚类的计算量也小很多,更加难能可贵的是实现起来也 ...
- iOS逆向工程之KeyChain与Snoop-it
今天博客的主题是Keychain, 在本篇博客中会通过一个登陆的Demo将用户名密码存入到KeyChain中,并且查看一下KeyChain中存的是什么东西,把这些内容给导出来.当然本篇博客的重点不是如 ...
- PHP static静态属性和静态方法
这里分析了php面向对象中static静态属性和静态方法的调用.关于它们的调用(能不能调用,怎么样调用),需要弄明白了他们在内存中存放位置,这样就非常容易理解了.静态属性.方法(包括静态与非静态)在内 ...
- ADFS3.0与SharePoint2013安装配置(原创)
现在越来越多的企业使用ADFS作为单点登录,我希望今天的内容能帮助大家了解如何配置ADFS和SharePoint 2013.安装配置SharePoint2013这块就不做具体描述了,今天主要讲一下怎么 ...
- linux 如何对文件解压或打包压缩
tar命令用与对文件打包压缩或解压,格式: tar [选项] [文件] 打包并压缩文件: tar -czvf 压缩包名 .tar.gz 解压并展开压缩包: tar -xzvf 压缩包名 .tar. ...
- Linux的locale、LC_ALL和LANG
如果你是一个Linux新手,并且刚刚安装了一个新的英文系统但想要设置成中文系统,肯定会接触到上面几个变量,在网上搜索了一系列解决方法,给一些变量赋一下值,再export一下,或者写到配置文件里面,然后 ...
- 12个小技巧，让你高效使用Eclipse
集成开发环境(IDE)让应用开发更加容易.它们强调语法,让你知道是否你存在编译错误,在众多的其他事情中允许你单步调试代码.像所有的IDE一 样,Eclipse也有快捷键和小工具,这些会让您感觉轻松许多 ...