当前位置： 移动技术网 > IT编程>网页制作>CSS > react基础教程之react安装详细教程

react基础教程之react安装详细教程

2018年01月22日  | 移动技术网IT编程  | 我要评论

御龙在天感恩大礼包,购物袋批发,北京哪里做双眼皮好

一、react安装方式

引入方式：script标签引入

1.可以去react官网去下载，也可以直接使用 BootCDN 的 React CDN 库，地址如下： 
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
以上我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内 嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。 所以如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。
2.实例：实例中包括了react中如何定义组件，如何添加类，注意在react每个组件中有且只有一个根节点


	
	react基础01
	<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

.first{
    		color:#185;
    	}

 

<script type="text/babel">
	{
		// ReactDOM.render(
		// 	Hello React,
		// 	document.getElementById("example")
		// ); 
	}
		var Hello=React.createClass({
			render:function(){
				return(
					

						
第一个react组件

						
纠结 还是去 真是纠结啊

					

				)
			}
		});
		ReactDOM.render(,document.getElementById("example"));
	</script>

3.组件之间的传值 props





<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

 

<script type="text/babel">
		var ComponentOne=React.createClass({
			render:function(){
				return(
					

						{this.props.title},{this.props.hello}
					

				)
			}
		});
		var ComponentTwo=React.createClass({
			render:function(){
				var hello="hello react";
				return(
					
				)
			}
		});
		ReactDOM.render(,document.getElementById("example"));
	</script>4.react 中的事件响应




<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

 

<script type="text/babel">
		var EventTest=React.createClass({
			// 状态初始值 初始化
			getInitialState:function(){
				return{
					title:"点击更改"
				}
			},
			// 定义事件
			btnClick:function(){
				this.setState({
					title:"点击了按钮"
				})
			},
			render:function(){
				return(
					

						
{this.state.title}

						change
					

				)
			}
		});
		ReactDOM.render(,document.getElementById("example"));
	</script>npm 方法安装

一键搭建方式


$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

react到此就安装好了

						


                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
                        点击进行留言回复
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网