react基础

最新推荐文章于 2022-03-31 20:53:33 发布
最新推荐文章于 2022-03-31 20:53:33 发布
阅读量152 收藏
点赞数
分类专栏： React 文章标签： reac的样式 react事件机制 react基础写法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/keep789/article/details/82346234
版权

理论知识在本博客开始就有介绍，这里不再重复。本篇主要从react结构写法，css修饰以及简单的逻辑事件操作来学习react。

react框架自13年5月份提出来，发展的主要有15版跟16版，两个版本差异还是蛮大的。react15,低版支持高版；而react16,高版拒绝低版。主要原因还是react更多的遵循原生js的语法，15版的话，封装了很多函数之类的，可以直接来用，支持高版。而高版更接近原生js的写法，在低版里面有的是不支持的。

第一，写react基本结构，首先就要引入文件

  •             react.min.js--------包含了组件构建以及核心diff算法
  •             react-dom.min.js----将虚拟dom渲染真实dom
  •             browser.min.js------jsx语法的翻译器

以上是低版的引入，高版的话是react.production.min.js、react-dom.production.min.js和browser.min.js三个文件，作用同上。

第二步就是敲代码了，上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>react低版</title>
		<script src="../js/react/react.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--容器1-->
		<div id="out"></div>
		<hr />
		<!--容器2-->
		<div id="inner"></div>
	</body>
	<script type="text/babel">
		//创建react组件
		var Demo = React.createClass({
			render(){
				return(
					<div>
						<div>I am react15</div>
						<div>你好 react低版</div>
					</div>
				)
			}
		})
		
		var Demo1 = React.createClass({
			render(){
				return(
					<div>
						<div>hello react15</div>
						<div>你好   react15</div>
						<Demo2 />
					</div>
				)
			}
		})
		//低版中写入高版
		class Demo2 extends React.Component{
			constructor(props){
				super(props)
			}
				
			render(){
				return(
					<div>
						<h1>低版写高版</h1>
					</div>
				)
			}
			
		}
		//渲染
		ReactDOM.render(<Demo />,document.getElementById("out"))
		ReactDOM.render(<Demo1 />,document.getElementById("inner"))
//		ReactDOM.render(<Demo2 />,document.getElementById("inner"))
		//会覆盖，所以当做嵌套组件写入<Demo1 />
	</script>
</html>

以上是react15版本的写法，主要就三步，创建组件，渲染到容器，修改script脚本解析的是babel语言。下面是react16版本的写法，也类似，知识16版遗弃了React.createClass这种写法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>高版react</title>
		<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="out">
			
		</div>
	</body>
	<!--解析jsx语法-->
	<script type="text/babel">
		//创建react
		class Demo extends React.Component{
			constructor(props){
				super(props)
			}
			
			render(){
				return(
					<div>
					     <h1>我是高版react</h1>
					</div>
				)
			}
		}
		//渲染
		ReactDOM.render(<Demo />,document.getElementById("out"))
	</script>
</html>

第三，以高版为例，来写入一些css样式

  • 内部样式的css
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>高版react</title>
		<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			p{
				background: pink;
			}
			.red{
				color: red;
			}
			#blue{
				color: blue;
			}
			.yellow{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="out"></div>
		<hr />
		<!--这里不写闭合可以，但是在return里面的结构标签必须要严格闭合-->
		<input type="text">
		<p class="red">我是红色的</p>
		<p id="blue">我是蓝色的</p>
		<p class="yellow">我是黄色的</p>
	</body>
	<script type="text/babel">
		//小写首字母对应 DOM 元素     大写首字母对应组件元素自然
		class Demo extends React.Component{
			constructor(props){
				super(props)
			}
			render(){
				return(
					<div>
					     <h1>我是高版react</h1>
					     <input type="text" />
					     <p class="red">我是红色的</p>
					     <p id="blue">我是蓝色的</p>
					     <p class="yellow">我是黄色的</p>
					</div>
				)
			}
		}
		ReactDOM.render(<Demo />,document.getElementById("out"))
	</script>
</html>

高版里面的class内部样式还是生效的，但是在低版里面class是不生效的，需要改成className

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>react低版</title>
		<script src="../js/react/react.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			p{
				background: pink;
			}
			.red{
				color: red;
			}
			#blue{
				color: blue;
			}
			.yellow{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="out"></div>
	</body>
	<script type="text/babel">
		//创建react组件
		var Demo = React.createClass({
			render(){
				return(
					<div>
						<div>I am react15</div>
						<div>你好 react低版</div>
						{/*<p class="red">我是红色的</p>*/}
						<p className="red">我是红色的</p>
					    <p id="blue">我是蓝色的</p>
					    {/*<p class="yellow">我是黄色的</p>*/}
					    <p className="yellow">我是黄色的</p>
					</div>
				)
			}
		})

		ReactDOM.render(<Demo />,document.getElementById("out"))

	</script>
</html>
  • 行间样式的写法
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>高版react</title>
		<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="out"></div>		
	</body>
	<script type="text/babel">
		//全局写法：代码可复用，提高代码复用率
		var sty={
			background:"yellow",
			color:"pink",
			fontSize:"32px"
		}
		class Demo extends React.Component{
			constructor(props){
				super(props)
			}
			render(){
				return(
					<div>
					    <h1>我是高版react</h1>
					     {/*行间样式写法*/}
					    <p style={{color:"red",fontSize:"22px"}}>我是红色的</p>
					    {/*全局的调用*/}
						<p style={sty}>我背景是黄色的</p>
						{/*原生链调用*/}
						<p style={this.sty}>我背景是粉色的</p>
					</div>
				)
			}
		}
		//原生链写法：保证代码的私有性，只是组件所有，不会影响其他组件
		Demo.prototype.sty={
			background:"pink"
		}
		ReactDOM.render(<Demo />,document.getElementById("out"))
	</script>
</html>

低版写法也就这三种，跟高版是一样的。

注意：

  • reactjs 行内       样式均是以json形式存在{color：'red'},react将变量嵌套jsx中，style={变量名称}
  • html的转义

React 会将所有要显示到 DOM 的字符串转义，防止 XSS。

后台传过来的数据带页面标签的是不能直接转义的，具体转义的写法如下：

var content='<strong>content</strong>';  

React.render(

    <div dangerouslySetInnerHTML={{__html: content}}></div>,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>高版react</title>
		<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="out"></div>		
	</body>
	<script type="text/babel">
		var str = "hello"
		var str1 = "<span>hello</span>"
		class Demo extends React.Component{
			constructor(props){
				super(props)
			}
			render(){
				return(
					<div>
					    <h1>我是高版react</h1>
						<h1>{str}</h1>
						<h1 dangerouslySetInnerHTML={{__html:str1}}></h1>
					</div>
				)
			}
		}
		ReactDOM.render(<Demo />,document.getElementById("out"))
	</script>
</html>

  • 在jsx中写逻辑   --要写在render和return之间

  • jsx中注释标签的方法          {/**标签**/}    或者{/*标签*/}

  • 组件嵌套       不能多个节点渲染，否则最后一个组件覆盖前面的

第四，事件机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>高版react</title>
		<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="out"></div>	
	</body>
	<script type="text/babel">{{
		//1.全局写法
		var tap=function(){
			console.log("aa，事件一")
		}
		class Demo extends React.Component{
			//2.直接写事件机制，私有属性方法
			tap(){
				console.log("事件二")
			}
			constructor(props){
				super(props)
			}
			render(){
				return(
					<div>
					    <h1>我是高版react</h1>
					    <button onClick={tap()}>事件1</button>
					    <button onClick={tap.bind(this)}>事件2</button>
					    {/*全局*/}
					    <button onClick={tap}>事件一</button>
					    {/*组件私有方法*/}
						<button onClick={this.tap}>事件二</button>
						{/*原型链*/}
						<button onClick={this.tap1}>事件三</button>
						{/*如果组件私有方法和原型链同名，那么调用的都会是原型链的函数*/}
					</div>
				)
			}
		}
		//3.原型链写法
		Demo.prototype.tap1=function(){
			console.log("事件三")
		}
		ReactDOM.render(<Demo />,document.getElementById("out"))
	}}</script>
</html>

 

 

 

keep789
关注
专栏目录
React16入门到入土
weixin_44872023的博客
09-05 1064
README.md:这个文件主要作用就是对项目的说明。: 这个文件是webpack配置和项目包管理文件。：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再时大家的依赖能保证一致。gitignore: 这个是git的选择性上传的配置文件。:这个文件夹就是我们项目的依赖包。public：公共文件，里边有公用模板和图标等一些东西。src： 主要代码编写文件index.js: 这个就是项目的入口文件index.css：这个是index.js里的CSS文件。
react16：函数组件中使用props
richest_qi的博客
04-01 1701
函数组件中也可以使用props。看个简单的例子，如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
react16：props的使用
richest_qi的博客
03-31 463
文章目录props的基本使用props的语法糖限制props props的基本使用 props的基本使用：<Person name="张三" gender="男" age="18"/>。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
React 16.x 学习笔记（第二课）、react组件创建的3种方法~
知野ggの博客
03-11 398
组件创建之一：
React16的简单上手之路
qq_42181069的博客
11-26 330
小伙伴想学习的可以参考技术胖的教程哦，这是我最喜欢的前端大佬，地址http://www.jspang.com/posts/2019/05/04/new-react-base.html# 1、安装 安装脚手架： npm install -g create-react-app 创建项目： create-react-app demo01 //用脚手架创建React项目 运行：...
react 基础
weixin_38822843的博客
11-08 1892
什么是react？ react脚手架的基本使用 jsx react组件的使用 state的基本使用 目录 什么是react？ react脚手架的基本使用 jsx react组件的使用 state的基本使用
React基础.pdf
06-17
### React基础知识点详解 #### 一、React简介与特点 **React**是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它通过一种创新的方法，实现了高效、灵活且可维护的UI开发流程。React的核心优势在于...
回顾Javascript React基础
10-16
## Javascript React基础回顾 ### 前言 在现代前端开发中，React已经成为了一种不可忽视的技术。它不仅仅是一个库，更是一个能够通过组件化的方式构建用户界面的强大平台。React 的核心理念是声明式的、高效的以及...
react基础文档、学习文档资料
07-11
一、React基础 1. JSX语法：React引入了一种名为JSX的语法糖，它是JavaScript和XML的混合体，允许我们在JavaScript中编写类似HTML的结构，便于创建和操作虚拟DOM。 2. 组件化：React的核心理念是组件。组件是可复用...
react基础文件.zip
06-04
"react基础文件.zip"可能包含一系列学习React基础的资源，如代码示例、教程文档等。让我们深入探讨React的基础知识。 1. **React组件**：React的核心概念是组件，它是可重用的代码块，可以独立渲染HTML到DOM。组件...
JavaScript：前端框架入门：React基础
最新发布
07-14
### JavaScript：前端框架入门：React基础 #### 一、React简介与环境搭建 ##### 1. React的历史与特点 **1.1 React的历史** React是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它最初在2013年...
React16入门
Ruebass的博客
12-11 1047
环境搭建 安装node 安装官方脚手架create-react-app npm install -g create-react-app 创建项目 进入文件夹，进入cmd运行命令 mkdir ReactDemo //创建ReactDemo文件夹 create-react-appdemo //用脚手架创建React项目 cd demo //等创建完成后，进入项目目录 npm start //预览项目，如果能正常打开，说明项目创建成功 脚手架生成目录介绍 README.md 这个文件主要作用就是对项目的说
React 16.0+ 新特性初探(How to use)
weixin_34400525的博客
08-01 193
React 16.0之后的改动还是很大的，除了新增加了很多新特性之外，还明确表示未来会增加async render，增加async render之后，将会在17.0的版本完全废除当前版本的三个生命周期，对于已经习惯现在写法的小伙伴来说感觉有点方（至少我有点方），所以还是提前熟悉一下，做好升级的准备吧~ 个人觉得升级是必然的事情，所以，还是提前准备一下，做好升级准备！ 我技术没有大牛的水平，所以...
React 版本16以后，React.createClass({})创建组件的方式失效。
qq_38719039的博客
03-29 4918
// React创建组件的一种方式: /*const EmptyRowsView = React.createClass({ //React版本16以后,暂时还不知道怎样这么写。 render() { return (&lt;div className="ant-table-placeholder"&gt;&lt;span&gt;&lt;i className="anticon...
React动态添加类名className和样式style
热门推荐
keep789的博客
04-24 2万+
一、React动态添加类名 已知变量：value = { class: 'class1', class2: 'class2', value: '你好' }，想得到结果如下： <div class="class1 class2">你好</div> 实现方式如下： // React实现 双类名/多类名 // 常用 // （字符串写法） <d...
关于React高、低版本的整理
keep789的博客
08-04 6565
React在2013年5月份开源以来，版本就一直在更新。13-17年主要是低版的（15版），17年9月份出的高版（16版），两个版本之间差别还是蛮大的，改动的小细节也不少，本文就这些改动做一个整理。 先说高版 1.引入的基本文件   react.production.min.js  react-dom.production.min.js  browser.min.js 2.定义组件的方式...
React学习的小总结（一）
keep789的博客
08-04 1605
一、React简介 1.React由来 React是为解决两个问题而生的，一是：构建大型网站过程中，数据绑定需要大量操作真实DOM，性能成本较高；二是：双向数据流导致网站的数据流向太混乱，不好控制。这两大问题也是facebook在构建instagram网站时候遇到的，当时市场调研过MVC框架，发现并不能满意，于是提出react框架，并于2013年5月份开源。 结论：用react原因-----...
react父子组件之间的传值
keep789的博客
01-02 640
父传子------------- 父组件 constructor(props){   super(props) this.state={ message:"我是父组件传来的" } } render(){    return(       &lt;div style={{background:"red",padding:"30px"}}&gt; ...
webpack构建react项目----实战篇
keep789的博客
09-04 381
可以用脚手架搭建react环境，比较快一点；但实际开发，公司常需要不使用现有的方法来搭建，这时候就需要自己去使用webpack自动化构建工具来搭建react项目的环境了。以下是简单的搭建步骤： 1.创建目录，项目名为wpro   2.项目初始化      npm init 3.安装webpack依赖    npm i webpack     webpack-cli     webpack-de...
React基础教程：state与组件生命周期详解
"React基础与State管理" 在React开发中，`state`是管理组件内部数据的关键部分。本文将深入探讨React中的`state`以及React基础用法。 首先，React是一个用于构建用户界面的JavaScript库，它允许我们通过声明式编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值