react基础

1.react简介

React 是用于构建用户界面的 JavaScript 库，react全家桶是在全球范围内是用的最广泛的框架

react全家桶：react（核心库），react-dom（ dom操作）react-router（路由），redux（集中状态管理）

2.创建手脚架

react提供官方工具：create-react-app

创建方式1：

全局安装手脚架工具包

npm i -g create-react-app

使用手脚架工具包

create-react-app 后面接你想要得项目名

创建方式2：

直接使用npx来创建项目

npx create-react-app 后面接你想要得项目名

注意：npx是npm v5.2版本新增加得命令，用来简化npm中工具包得使用

3. 简单得使用

react是声明式得，只需要描述ui看起来得样子，语法与HTML及其类似

// 导入react和react-dom
import React from 'react' // 提供react必要组件
import ReactDOM from 'react-dom' //将react组件渲染到dom中

// 创建元素
const title = React.createElement('h1', {id:'box'}, 'hello react')

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

4.什么是jsx

JSX是一种简写，全称：JavaScript XML 

所在我们在js中书写得代码是XML结构

jsx示例

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

JSX得优点从代码来看优点很多

1.采用了类似HTML 得语法，降低学习成本

2.利用js自身得能力来创建HTML结构，例如 使用js数组方法map来创建列表结构

jsx注意事项

1.jsx必须要有一个根节点，例如div

2.属性名中不能使用js关键字 例如class ，for  ，但是可以使用class类名，写法：className

3.单标签要闭合 例如 <input />

4.换行建议使用（）包裹

5.老版本（16.8）先引入react才能使用，新版本可以不用写import React from 'react'

5.拓展点：换行建议使用（）包裹

目的：避免分号陷阱（面试常问点：考察对JavaScript语法陷阱的理解）

我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到陷阱

关于一些JavaScript陷阱，有这样一篇非常优秀的博客（不只是这一个陷阱）链接

其中自动插入分号陷阱，这篇博客是这样描述的：
 

在语句结束时，你不必手动输入分号，换行即可。

function foo() {
 var bar = "value"
 return bar
}

// `{}` 包围的语句块的最后一个语句的分号也可省略
function bar() { return "foo" }
1
2
3
4
5
6
7
开发者们每写一行代码，就可以少敲打一次键盘，这看起来很人性化。但过于依赖分号自动插入，会带来一些潜在问题。

function foo() {
 return
 {
     bar: 1
 }
}

function bar() {
 var a, b, c, d, e
 a = b + c
 (d + e).toString()
}
1
2
3
4
5
6
7
8
9
10
11
12
看看上面的代码，foo() 将返回什么？ bar() 又将怎么运行？

事实上，前者将返回 undefined ，而后者的后两行代码将被理解为 a = b + c(d + e).toString() 。

JavaScript 的分号自动插入的规则并不那么清晰可辨，老实地多敲几次键盘，可以避免那些让你摸不着头绪的bug在某一天突然出现。

原博客链接：https://www.cnblogs.com/wangshenwei/p/javascript-syntax-trap.html