react脚手架_react基本概念、jsx语法and脚手架

本文作者：开课吧木木
图文编辑：开三金

React是什么？

React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。

使用React可以将一些简短、独立的代码片段组合成复杂的UI界面，这些代码片段被称为”组件”。

React特点：

1.声明式设计 -React采用声明范式，可以轻松描述应用。

2.高效 -React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活 -React可以与已知的库或框架很好地配合。

4.JSX -JSX是JavaScript语法的扩展。React开发不一定使用JSX，但我们建议使用它。

5.组件 -通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应式的数据流 - React实现了单向相应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

引入React.js库

React.js框架本身包含两个部分：

1.react.js：提供了React.js核心功能代码，如：虚拟dom、组件

2.React-dom.js：提供了与浏览器交互的DOM功能，如：dom渲染

js/app.js

上面代码将一个h1标签插入app节点，运行结果如下：

Hello,world!

React.render()

element: 要渲染的内容 container: 要渲染的内容存放容器 callback: 渲染后的回调函数

JSX的优点和语法

JSX是什么？

JSX是一个基于JavaScript + XML 的一个- 扩展语法

它可以作为 值 使用

它并不是 字符串

它也不是 HTML

它可以配合 JavaScript 表达式 一起使用

JSX优点：

JSX执行更快，因为它在编译为JavaScript代码后进行了优化

它是类型安全的，在编译过程中就能发现错误

使用JSX编写模块更加简单快速

JSX语法：

1> 如果输出多行结构，可以使用一对小括号来包含整个结构

2> 注意：JSX只能有一个顶级父元素

3> 在JSX中可以嵌套表达式：

4> JSX中的注释

5> JSX更偏向于JavaScript,所以对于一些特殊的属性，使用的是JavaScript中的属性名风格

6> 为了更加方便的操作元素的style,针对style这个属性有特殊的处理

7> JSX中的表达式也可以使用在属性上，但是使用的时候需要注意：不要使用引号包含

JSX输出类型：

字符串、数字：原样输出 数组：

转成字符串，数组.join(‘’) 使用 空字符串 而不是默认的 逗号 连接 其他对象：

不能直接输出 布尔值、空、未定义：会被忽略

JSX列表渲染：

如果需要渲染一组数据，我们可以通过遍历(数组遍历、对象遍历...)等操作，返回一组jsx

数据：

数组：

对象：

Key

默认情况下，React从性能上考虑，会尽可能的复用结构，针对 同组可变列表 结构。

为了避免出现某些方面的问题，通常会给每一个列表添加一个

唯一的key

条件渲染

三目运算符

与或运算符

React脚手架

create-react-app是用于搭建react项目的脚手架。它的优势在于省略了很多涉及配置的地方，能够更加容易上手。

安装与使用：

通过 npm、yarn、npx都可以

1>安装 

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

2>使用 安装完成以后，即可使用create-react-app命令

create-react-app 项目名称 或者通过npx的方式

npx cerate-react-app 项目名称

项目目录结构说明：

运行命令以后，就会在运行命令所在的目录下面创建一个以项目名称为名的目录：

命令脚本：

create-react-app同时也提供了其它一些命令来帮助我们进行开发 1> npm start 启动一个内置的本地WebServer。

根目录映射到 ’./public’目录，默认端口：

3000 2> npm test 运行 Jest 测试 3> npm run build 打包应用(准备上线)

▼关注我▼

看下期“React组件的状态与通信”

关注公众号，后台回复数字【2】

即可参与1元抢购前端课程活动，限前100名

你“在看”我吗？