react 展示对象_前端·React 16.x 入门

「React」

React(有时叫 React.js 或 ReactJS )是一个用于构建用户界面的 JavaScript 库。

在安装了 Node.js 后，使用如下命令快速搭建 React 开发环境：

npx create-react-app my-app

清空 src 文件夹并在里面编写代码，之后通过 npm start 命令启动你的 React 应用。

「JSX」

1.JSX 是 JS 的语法扩展，常配合 React 使用，例如：

const name = 'Bob'

const element =

Hello, {name}

大括号里面可以是任何 JS 表达式；

2.JSX 也是一个表达式，因此可以赋值给变量、作为函数参数或返回值；

3.JSX 中可以为属性值指定字符串字面量或 JS 表达式：

const element =

const element = ;

需要使用 camelCase 来定义属性名称，例如 class 变成 className；

4.可以安全地在 JSX 中插入用户输入的内容，会默认转义，有效防止 XSS 攻击；

5.Babel 会把 JSX 转译成 React.createElement() 函数调用，创建出一个称为 React 元素的对象。

「元素」

1.元素是构成 React 应用的最小砖块，是创建开销极小的普通对象，React DOM 负责更新 DOM 来与元素保持一致；

2.要将一个元素渲染到根 DOM 节点中，需使用 render()：

const element =

Hello, world

;

ReactDOM.render(element, document.getElementById('root'));

3.元素是不可变对象，一旦创建就无法更改其子元素或者属性，它代表了某个特定时刻的 UI；

4.React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

「组件与 props」

1.组件类似函数，它接受 props，返回用于描述页面展示内容的 React 元素；

2.定义组件的第一种方式是函数组件，例如：

function Welcome(props) {

return

Hello, {props.na