React note2（基础开发环境搭建&使用JSX编写&react常用语法逻辑）

最新推荐文章于 2023-11-30 20:35:49 发布

weixin_43297321

最新推荐文章于 2023-11-30 20:35:49 发布

阅读量157

点赞数

分类专栏： React 笔记非原创文章标签： react

本文链接：https://blog.csdn.net/weixin_43297321/article/details/107981170

版权

React 笔记非原创专栏收录该内容

14 篇文章 0 订阅

订阅专栏

React 开发环境搭建

（一）依赖文件介绍

react.js文件是创建React元素和组件的核心文件，react-dom.js文件用来把React组件渲染为DOM，此文件依赖于react.js文件，需在其后被引入。

Babel的主要用途是将ES6转成ES5 ，同时可以把JSX 语法转换新标准的JavaScript代码，让现今的浏览器兼容。babel对react很重要。

使用React并非必须使用JSX，JSX只是一种直观的创建React nodes的方法，它是对React.createElement（）方法的抽象，通过Babel，JSX语句也可以直接在浏览器中运行了。

使用JSX，可以极大的简化React元素的创建，JSX抽象化了React.createElement()函数的使用，不过方便的一点是其语法风格类似于HTML语法风格。

通过Babel，JSX会把转换为使用React.createElement()类的ES5的语句，以使得其能被现今的浏览器引擎识别。

有了Babel，其实你可以把JSX当做写在JavaScript里的HTML代码。

参考：React和Babel的基本使用 https://blog.csdn.net/zengxuzhu/article/details/90022345

（二）React 依赖包下载

react核心包： npm install react --save
react-dom： npm install react-dom --save
babel包： npm install babel-standalone --save

当然也可以直接一句话搞定：cnpm install --save react react-dom babel-standalone，注意react与react-dom依赖顺序不要变。

注意：下载好的文件在node_modules目录。
1、找到 react 目录，找到这个目录下的 umd 目录下 react.development.js 。
2、在 react-dom／umd 目录下找到 react-dom.development.js 。
3、node_modules目录下找到 babel-standalone 目录下的 babel.js 。

然后新建html页面，引入三个包：
在这里插入图片描述

（三）React — 根DOM节点

页面中需要有一个div容器，容器中的内容都会被React Dom所管理。这个容器叫就做根DOM节点。

注意：通常React 开发应用时一般只会定义一个根节点。
在这里插入图片描述
下面这种看起来有些奇怪的标签语法既不是字符串也不是 HTML。

const element = <h1>Hello, world!</h1>;

那它是啥，其实是在JSX中使用的一种语法。

（四）React — JSX

JSX = javascript xml ，就是Javascript 和 XML结合的一种格式，是JavaScript 的语法扩展。 React推荐在 React 中使用 JSX 来描述用户界面。

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

百度百科：https://baike.baidu.com/item/JSX/1686693?fr=aladdin

总之记住一句话：JSX中，遇到<>当html解析，遇到{}当js解析 。

jsx优点：

JSX 执行更快，因为它在编译为JavaScript代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

React 使用JSX

（一）编写React渲染组件 ReactDOM.render()

ReactDOM.render(element, container[, callback])是 React 的最基本方法，用于将模板转为 HTML 语言，并插入页面指定的根DOM 节点。

在这里插入图片描述
我的第一个react小栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入三个依赖文件 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="./node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
	<!-- 创建一个div容器，又名根DOM节点 -->
    <div id="demoSky"></div>
    <!-- type="text/babel" 必须得写 -->
    <script type="text/babel">
        let name="我叫sky";
        function fun(){
            return "我是方法";
        }
		// jsx中遇到 <>当html解析，遇到{}当js解析，所以可以解析变量和函数等
        let myCon = <h1>hello {name} {fun()} world</h1>
        ReactDOM.render(myCon, document.querySelector("#demoSky"))
    </script>
</body>
</html>

注意：Jsx中的HTML标签必须按照w3c规范来写标签必须闭合。

（二）JSX中的注释

在JSX语法区域中的html标签内使用花括号将注释包裹起来，如｛/* 我是注释内容 */｝。为什么能这么写？原因：遇到花括号当js解析。

在这里插入图片描述

如果有多个 HTML 标签，需要使用一个父元素包裹，然后养成使用圆括号包裹的好习惯。

在这里插入图片描述

（三）JSX中使用表达式（变量、函数、数组、逻辑运算）

可以任意地在 JSX 当中使用 JavaScript表达式，当然 JSX 当中的表达式要包含在大括号里。

比如这样：
在这里插入图片描述

1、变量、函数

为什么能计算呢？因为 jsx 遇到花括号就解析成 js，所以js能做的事情，花括号{}里面的也能干。

<script type="text/babel">
	let i=9;
	let k=7;
	function fun2(data){
	    return data;
	}
    let con2 = (
        <div>
            <h1>数据渲染</h1>
            <p>{i*k}</p>
            <p>{i+k}</p>
            <p>{fun2(i-k)}</p>
        </div>
    )
    ReactDOM.render(con2,document.querySelector("#demoSky"))
</script>

在这里插入图片描述

2、逻辑判断三元运算

比如我们let bool=true；然后展示{bool}，发现只是写 {bool}无法展示，但我们可以通过{bool?“真”:“假”} 来看bool是true还是false。（注意：别跟vue中的混了，vue中直接{{bool}}是能够看到值的）

<script type="text/babel">
    let bool = true;
    let con4 = (
        <div>
            无法在页面上直接展示bool的取值{bool}，
            ------
            但是我们可以通过三元运算来判断下bool的取值为{bool?"true":"flase"}
        </div>
    )
    ReactDOM.render(con4,document.querySelector("#demoSky"));
</script>

在这里插入图片描述

3、渲染数组

<script type="text/babel">
    let arr=["111","222","333"];
    let arr2=[
        <p>ppp111</p>,
        <p>ppp222</p>,
        <p>ppp222</p>
    ]
    let con5=(
        <div>
            arr：{arr} <hr/> arr2: {arr2}
        </div>
    )
    ReactDOM.render(con5,document.querySelector("#demoSky"))
</script>

在这里插入图片描述

（四）JSX 独立文件使用

React JSX 代码可以单独成一个文件，然后通过script标签引入到html页面中。

引入前，需要注意两件事情：
第一，要提前在该页面中创建根节点容器；

<div id="demoSky"></div>

第二，一定给引入时使用的script标签加上type="text/babel"属性。

<script type="text/babel" src="./js/react_index.js"></script>

js文件react_index.js里的内容：
在这里插入图片描述
能执行OK

（五）JSX绑定属性

Jsx中也可以使用大括号来定义以 JavaScript 表达式为值的属性，如

<img src={user.Url} />

切记使用了大括号包裹的 JavaScript 表达式时，就不要在外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。
（跟vue中的区别很大，react中是属性={变量} ； vue中是 :属性=“变量” 千万不要用错了）

<script type="text/babel">
    // 在react中如果想插入动态属性值的话，一定要注意不要加"" ，不然就成字符串了
    let href="http://www.baidu.com";
    let com3=<a href={href}>去百度</a>
    ReactDOM.render(com3,document.querySelector("#demoSky"))
</script>

（六）JSX定义修改样式

定义样式对象，以 style属性引用一个对象，样式名以驼峰命名法表示，如 text-align需写成 textAlign，默认像素单位是 px 。

<script type="text/babel">
	// 内联样式：以对象键值的形式  驼峰式 
    let _style={color:"white",backgroundColor:"teal"}
    let com4 = (
        <div>
            {/*第一个{}是解析，第二个{}是对象*/}
            <h1 style={{color:"white",backgroundColor:"tomato"}}>内联样式修改1--行内</h1>
            <h1 style={_style}>内联样式修改2--变量</h1>
        </div>
    )
    ReactDOM.render(com4, document.querySelector("#demoSky"))
</script>

这样子写样式是不是很麻烦？能不能引用外部样式？能。

引用外部样式时，不要使用class作为属性名，因为class是js的保留关键字。JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 className（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

比如我们在上面代码中添加下面的内容，分别用class选择器和id选择器来修改样式。

<style>
    .demo_h1 {
        color: gold;
    }
	#demo_h1{
        background: indianred;
    }
</style>
<script type="text/babel">
    let com4 = (
        <div>
            <h1 className="demo_h1" id="demo_h1">用类修改样式 用id修改样式</h1>
        </div>
    )
    ReactDOM.render(com4, document.querySelector("#demoSky"))
</script>

在这里插入图片描述

（七）JSX规则扩展

html的value属性要写成：defaultValue
html的checked属性要写成：defaultChecked
style 里面写对象
class 写className

刚刚介绍了class为什么要写成className，这就是一种JSX的规则。然后我们再看看另外的比如defaultChecked。

比如说单选框里面默认选中是checked，在JSX咱们写成defaultChecked。

<script type="text/babel">
    let com5 = (
        <div>
            <input type="radio" name="gro" />
            <input type="radio" name="gro" defaultChecked/>
            {/*一定要设置name，将单选框radio放到同一组 defaultChecked 默认选中*/}
        </div>
    )
    ReactDOM.render(com5,document.querySelector("#demoSky"))
</script>

在这里插入图片描述

总结

介绍了用react框架写代码的最基础的两个依赖包react.js、react-dom.js，然后是我们用JSX语法，所以需要babel来将JSX语法转换成浏览器能够识别的JS语法。

另外简单用JSX写了常见的功能展示。

我想说：
对于ReactDOM.render(element, container[, callback])这个方法，我发现，一个render对应一个container，如果后面重新render了一下，就会覆盖前面所展示的；另外，如果这个container里原本有内容，比如 " < div>原内容< /div> "，通过render渲染后，也会覆盖之前已经存在的内容。

这也是为什么，之前谈到 “通常React 开发应用时一般只会定义一个根节点。”

ReactDOM.render实际为React初次将虚拟vdom渲染至真实dom树的过程，其中包括了创建元素、添加属性、绑定事件等等操作。

官网render：https://zh-hans.reactjs.org/docs/react-dom.html#render

weixin_43297321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React note2（基础开发环境搭建&使用JSX编写&react常用语法逻辑）

React简介什么是 React ?React 起源于 FacebookReact 是一个用于构建用户界面的 javascript 库。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。React 开发背景Facebook 需要解决的问题：构建数据不断变化的大型应用。（数据变化会造成以下两点的问题，React的解决方案是什么呢）虚拟Dom—快减少更新次数减少更新区域虚拟dom相当于在js和真实dom中间加了一个缓存。基于React进行开发时所有的DOM构造都
复制链接

扫一扫