您的位置：首页 > Web前端 > React

react基础-从安装开始

2018-01-19 21:23 465 查看

一、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每个组件中有且只有一个根节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react基础01</title>
<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>
<style>
.first{
color:#185;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
{
// ReactDOM.render(
// 	<h1>Hello React</h1>,
// 	document.getElementById("example")
// );
}
var Hello=React.createClass({
render:function(){
return(
<div className="first">
<p>第一个react组件</p>
<p&g
a073
t;纠结 还是去 真是纠结啊</p>
</div>
)
}
});
ReactDOM.render(<Hello/>,document.getElementById("example"));
</script>
</body>
</html>

3.组件之间的传值 props

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props传值</title>
<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>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ComponentOne=React.createClass({
render:function(){
return(
<div>
{this.props.title},{this.props.hello}
</div>
)
}
});
var ComponentTwo=React.createClass({
render:function(){
var hello="hello react";
return(
<ComponentOne title="react组件之间的传值" hello={hello}/>
)
}
});
ReactDOM.render(<ComponentTwo/>,document.getElementById("example"));
</script>
</body>
</html>4.react 中的事件响应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react event</title>
<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>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var EventTest=React.createClass({
// 状态初始值初始化
getInitialState:function(){
return{
title:"点击更改"
}
},
// 定义事件
btnClick:function(){
this.setState({
title:"点击了按钮"
})
},
render:function(){
return(
<div>
<p>{this.state.title}</p>
<button onClick={this.btnClick}>change</button>
</div>
)
}
});
ReactDOM.render(<EventTest/>,document.getElementById("example"));
</script>
</body>
</html>npm 方法安装
一键搭建方式

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

react到此就安装好了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航