React-class——React简介、React环境安装、React项目结构、JSX语法、面试题
目录
一、React简介
1、简介
2、三大框架比较
3、特点
1）优势
2）劣势
二、React环境安装
三、React项目结构
（1）node_modules：
（2）public：
（3）src：
（4）修改：
四、JSX语法
1、JSX介绍
2、使用 JSX
3、独立文件
4、样式
5、注释
6、JavaScript 表达式,点击事件
7、条件渲染
8、数组
9、列表渲染
五、面试题：
1、为什么 render函数返回的模板用小括号括起来 ？
2、react没有template怎么办
一、React简介
react中 app.js 导出的是函数
vue中导出的是对象
1、简介
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
2、三大框架比较
体系结构、渲染、DOM、数据绑定、调试、作者……
angular
2009年1.x 使用MVC架构，学习曲线比较陡；2.x使用MVVM架构开始出现组件，支持组件和TS
ajax交互是限制的，内部包含了$http
vue2
使用MVVM架构
ajax交互没有限制，但推荐axios、vue-resource等
react
更专注于View层
实现大功能需要使用插件
3、特点
-
1）优势
-
1、声明式设计 −React采用声明范式，可以轻松描述应用。
//命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。类似jquery 操作DOM,创建一个页面，一点点的告诉DOM 怎么去挂载，你要怎么去做；JQ\原生 都是命令式编程，都是在做DOM 操作。 //声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。
-
2、高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
//1.虚拟DOM（Virtual DOM） 用js 对象来模拟页面上的DOM 和DOM嵌套**实现DOM 元素的高效更新 //2.Diff 算法 tree diff component diff element diff
-
3、灵活 −React可以与已知的库或框架很好地配合。
-
4、JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
-
5、组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。模块化
vue的组件是通过.vue 文件（template/script/style）实现的
react中没有像vue中那样的模板文件，在react里一切都是以js来实现的
-
6、单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
-
-
2）劣势
-
学习成本很高，学习曲线很陡
-
react本身能做的事并不多，想做大东西必须得用react插件（全家桶）
-
二、React环境安装
方法一：
$ npm config set registry https://r.npm.taobao.org
//配过镜像的可以不用再配,也可以不配置直接用npm
$ cnpm install -g create-react-app
$ create-react-app my-app /*创建项目,应用名称不要有大写字母*/
$ cd my-app/ /*进入项目目录*/
$ npm run start /*启动项目*/
方法二：
npm i create-react-app -g
create-react-app init
npm run start /*启动项目*/
npm run build //打包
三、React项目结构
（1）node_modules：
这里面包含了react项目中会用到的一些组件，install的时候下载下来的，你可以进去看看，有一些如base64之类的我们可能会用到的组件；
（2）public：
里面包含了我们项目中的启动页面，react比较适合**单页面项目应用开发**，所以暂时只包含一个**index.html**，并且这也是react工程的**入口页面**，入口页面怎么理解，就是你启动项目后，打开的首页，第一眼呈现的那个页面；
（3）src：
里面包含了一些我们自己使用的js文件，css文件，img文件等等，但你打开src文件夹你会发现很混乱，不要管什么app.js，你就看到**index.js**即可，系统默认**将index.html对准了index.js**，index.js也就是我们的入口js，他和index.html所对应。
（4）修改：
让目录结构更易懂:接下来，我们改动一下src里面的内容和结构，让首次接触react的小伙伴尽量能觉得他有点亲切的感觉，事实证明，越亲切的事物我们越希望去接近。src文件夹下原来的所有东西，除了index.js之外，都可以删掉，这样就可以轻装上阵了
src下的index.js文件（入口）
在index.js文件中App变量中保存的数据渲染到root关联的根元素中了
但是js文件中应该写js语法，js语法变量中只能保存：6中基本数据和2种引用数据
let App=
666保存的是一个标签，这种语法就是JSX语法JSX语法就是一种插值语法，它经过打包工具编译后本质上还是js语法
import React from 'react'; //react核心库 import ReactDOM from 'react-dom/client'; //react操作dom //关联页面上的根元素 const root = ReactDOM.createRoot(document.getElementById('root')); let App=666root.render(App); //给根元素内部渲染组件模板 App不加尖括号 //App如果写，不会报错，但是666不会出来
四、JSX语法
ReactDOM.render(
hello react
, document.getElementById('root')); //render函数:参数二,获取插入到界面的哪个容器
参数一, 是一个标签//标签也可以作为函数的参数吗?
JSX语法：JavaScript + XML语法(HTML) 解读jsx语法：在react中遇到<>按照HTML语法解析，遇到{}按照JavaScript解析
1、JSX介绍
全称: JavaScript XML， React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
作用: 用来创建react虚拟DOM(元素)对象
var ele =
Hello JSX!
;注意1: 它不是字符串, 也不是HTML/XML标签
注意2: 它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
遇到 <开头的代码：1、 如果是html语法标准==>以标签的语法解析: html同名标签转换为html同名元素; （、 ） 2、其它标签需要特别解析==>组件
( ===> new App) 遇到以 { 开头的代码：以JS的语法解析: 标签中的js代码必须用{ }包含
babel.js的作用
浏览器的js引擎是不能直接解析JSX语法代码的, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
2、使用 JSX
JSX 看起来类似 HTML
html文件：
js文件：
ReactDOM.render(
Hello, world!
,
document.getElementById('root')
);注意：代码中能够嵌套多个 HTML 标签，但需要使用一个标签元素包裹它
错误例子：
ReactDOM.render(
这是错误的例子
假设这里是标题下面的内容,
document.getElementById("example")
);正确例子：
ReactDOM.render(
这是正确的例子
假设这里是标题下面的内容
,
document.getElementById("example")
);3、独立文件
可以将React JSX 代码可以放在一个独立文件上，并在不同的js文件中引入即可
AppTop.js文件中：
//定义导出的标签
let AppTop =(
我是公共标题栏
6666
);
export default AppTop; //将自定义的DOM元素暴露出来，供给其他的页面使用index.js文件中：
import React from 'react';
import ReactDOM from 'react-dom';
import AppTop from './js/AppTop.js';
ReactDOM.render(
AppTop,
document.getElementById('root')
);4、样式
React 推荐使用内联样式。React 会在指定元素数字后自动添加 px 。
//方法一：
var myStyle = {
fontSize: 100, //等价于fontSize: '100px',
color: '#00ff00'
};
//方法二：
import "./app.css"
var box="reddiv"
ReactDOM.render(
我是标题
,
document.getElementById('example')
);5、注释
注释需要写在花括号中，需要注意的是：
- 在标签内部的注释需要花括号
- 在标签外的的注释不能使用花括号
ReactDOM.render(
/*标签外部的注释 */
我是标题 {/*标签内部的注释*/}
,
document.getElementById('example')
);6、JavaScript 表达式,点击事件
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 **{}** 中。实例如下：
var a=20
function fn(){return "hello"}
ReactDOM.render(
{a+1}
{fn()}
点击
,
document.getElementById('example')
);7、条件渲染
可以在插值表达式中直接写逻辑。所以就没有了slot
- 三目运算符
在 JSX 内部不能使用 **if else** 语句，但可以使用 **三元运算** 表达式来替代。
var i = 10;
ReactDOM.render(
{i == 1 ? 'True!' : 'False'}
{i > 0 ? : '' }
,
document.getElementById('example')
);可以在JSX外部使用if语句
var i = 10;
if(i > 0){ //使用if语句的好处是：如果条件不满足且不需要渲染组件时不需要写else
box = ;
}
ReactDOM.render(
{ box }
,
document.getElementById('example')
);（**面试**）去掉三目运算符的否则： **&&**
{i > 0 && }8、数组
JSX 允许在模板中插入数组，数组会自动展开所有成员
会显示arr的所有内容，所以就没有v-for了
//一：
render() {
let arr=[1,2,3]
return (
77777
{arr} //会显示 123
)
}
//二:
var arr = [
HTML
,
CSS
];
ReactDOM.render(
{arr},
document.getElementById('example')
);9、列表渲染
通过数组的map函数
var aGoods=[
{id:1,title:"潮流女装"},
{id:2,title:"品牌男装"},
{id:3,title:"手机电脑"}
]
{
aGoods.map((item,index)=>{
return ( //通过return返回多个li元素
- {item.title}
)
})
}
五、面试题：
1、为什么 render函数返回的模板用小括号括起来 ？
js语法种return换行的话，认为是没有返回值，就默认为und
2、react没有template怎么办
用一个空标签
<>
333