React第一天学习

内容：React入门

一、react是什么？

react是facebook使用的一个Javascript库

​ 可以用来创建web用户交互界面

​ MVC中的视图层

官网：https://react.docschina.org/

优点：

​ 效率高

​ 组件化

​ 跨浏览器兼容

​ 虚拟DOM

​ JSX

​ 报错信息完整清晰（提示）

缺点：不是完整的MVC框架

二、虚拟DOM

在react中，我们执行DOM操作的对象并不是真正的DOM节点，而是react创建的一个轻量级的JS对象，这个对象称为虚拟DOM。

Diff算法，每当数据变化时，都会重新构建整个DOM树，和上一次的DOM树进行对比，根据变化的部分来进行实际的DOM操作。

三、JSX语法糖【重点】

JSX是Javascript和XML，是facebook为react开发的一套语法糖，它是JavaScript的语法扩展，允许HTML与Javascript的混写。

它的目的是增加程序的可读性，从而减少程序代码出错的机会。

它不是一个新的语法，在JSX中，遇到“<>”会解析成HTML，遇到“{}”会解析成JS

四、基本使用

1.引入核心库（React、ReactDOM）、引入babel（编译器）

2.设置一个挂载点（作用范围）

3.ReactDOM.render来渲染页面

var el = <div>
   <h1>这是JSX语法糖</h1>
</div>
var app = document.getElementById("app")
ReactDOM.render(el,app)

五、组件【重点】

1.定义方式

(1)es6 类

class 组件名 extends React.Component{
    render(){
        return(
            <div></div>
        )
    }
}

注意：组件的类名首字母要大写

(2)构造函数

function 组件名(){
    return(
        <div></div>
    )
}

2.组件嵌套

function Index(){
     return(
          <div>
              <h1>Hello，Index组件</h1>
              { /* 通过组件名来使用已定义好的组件 */ }
              <Home className="home" />
         </div>
    )
}

六、脚手架

1.安装

npm install create-react-app -g

2.初始化项目

create-react-app 项目名称

注意：项目名称不能包含中文和空格

3.项目目录结构

myapp

- node_modules          项目依赖目录

• public 项目根目录
  • index.html 项目首页
  • favicon 页面图标
  • mainfest.json 页面配置文件
• src 项目源码（主战场）
  • index.js 主入口
  • index.css 全局样式表
  • App.js 根组件
  • App.css 根组件的样式表
  • logo.svg 图片
  • serviceWorker.js 离线访问服务
  • setupTests.js 测试
  • .gitignore git忽略规则文件
  • package.json 项目依赖配置文件
  • package-lock.json 锁定安装时的包的版本
  • README.md 项目说明文件

运行流程：

​ public/index.html>src/index.js>src/App.js

七、常见错误【重点】

1.Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag

只能有一个结束标签：根标签

2.Warning: Invalid DOM property class. Did you mean className?

在jsx中，class属性应该写成className

3.uncaught SyntaxError: Inline Babel script: Unterminated JSX contents

在react中，input、img、br、hr 需要加上闭合

4.Warning: Invalid DOM property for. Did you mean htmlFor?

在react中，for属性应该写成htmlFor

5.Warning: Each child in a list should have a unique "key" prop.

遍历生成元素时，需要给元素指定key属性（key属性不能重复）

6.Uncaught Error: Target container is not a DOM element.

document.getElementById(“元素的id”)

指定的id元素，必须在dom存在

7.Warning: The tag <home> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

react中的组件名，应该是首字母大写的。

8../src/App.js
Attempted import error: './Hello' does not contain a default export (imported as 'Hello').

在脚手架的组件中，定义好组件后，需要导出 export default 类名