react基础-从安装开始

最新推荐文章于 2024-04-18 20:01:52 发布

...lemon_...

最新推荐文章于 2024-04-18 20:01:52 发布

阅读量415

点赞数 1

分类专栏： frontEnd

本文链接：https://blog.csdn.net/qianqianNingmeng/article/details/79110528

版权

frontEnd 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

一、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>纠结 还是去 真是纠结啊</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到此就安装好了

...lemon_...

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react基础-从安装开始

一、react安装方式引入方式：script标签引入 1. 可以去react官网去下载，也可以直接使用 BootCDN 的 React CDN 库，地址如下：以上我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：react.min.js - React 的核心库react-dom.min.js -
复制链接

扫一扫

专栏目录