react学习第一天

React全家桶

一. React全家桶

1.React与传统MVC的关系

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI 的库。

2.React的特性

二. create-react-app

全局安装create-react-app
$ npm install -g create-react-app
​
创建一个项目
$ create-react-app your-app 注意命名方式
如果不想全局安装，可以直接使用npx
$ npx create-react-app myapp 也可以实现相同的效果

这需要等待一段时间，这个过程实际上会安装三个东西

• react: react的顶级库

• react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom

• react-scripts: 包含运行和打包react应用程序的所有脚本及配置

  生成项目的目录结构如下：

├── README.md 使用方法的文档 ├── node_modules 所有的依赖安装的目录 ├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。 ├── package.json ├── public 静态公共目录 └── src 开发用的源代码目录

三、编写第一个react应用程序

react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有
一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from 'react'
​
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中
引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'
​
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的
元素上
​
ReactDOM.render(
​
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语
法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX-
JavaScript XML。
​
 <h1>欢迎进入React的世界</h1>,
// 渲染到哪里
 document.getElementById('root')
)

四. JSX语法与组件

1.JSX语法

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
 render () {
  return (
   React.createElement(
    "div",
   {     className: 'app',
     id: 'appRoot'
   },
    React.createElement(
     "h1",
    { className: 'title' },
     "欢迎进入React的世界"
   ),
    React.createElement(
     "p",
     null,
     "React.js 是一个构建页面 UI 的库"
   )
  )
 )
}
}
ReactDOM.render(
React.createElement(App),
 document.getElementById('root')
)

React.createElement 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、 还有子元素等, 语法为

React.createElement(
   type,
  [props],
  [...children]
)

所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程:

JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM 元素 —>插入页面

2.Class组件

ES6的加入让JavaScript直接支持使用class来定义一个类，react创建组件的方式就是使用的类的继承， ES6 class 是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码：

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
 render () {
  return (
 
   <h1>欢迎进入React的世界</h1>
)
}
}
ReactDOM.render(
 <App  />,
 document.getElementById('root')
)
​
//es6 class 组件其实就是一个构造器,每次使用组件都相当于在实例化组件，像这样：
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
 render () {
  return (
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
const app = new App({
 name: 'react'
}).render()
ReactDOM.render(
 app,
 document.getElementById('root')
)

3. 函数式组件

import React from 'react'
import ReactDOM from 'react-dom'
const App = (props) => <h1>欢迎进入React的世界</h1>
ReactDOM.render(
 // React组件的调用方式
 <App  />,
 document.getElementById('root')
)

4. 组件的样式

• 行内样式

想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：
​
// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
<p style={{color:'red', fontSize:'14px'}}>Hello world</p>

• 使用 class

其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是， class 需要写成
className （因为毕竟是在写类js代码，会收到js规则的现在，而 class 是关键字
<p className="hello">Hello world</p>

注意： class ==> className , for ==> htmlFor(label)

5.事件处理

5.1、绑定事件

采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写 onclick , React里的事件是驼峰 onClick ，React的事件并不是原生事件，而是合成事件。

5.2、事件handler的写法

• 直接在render里写行内的箭头函数(不推荐)在组件内使用箭头函数定义一个方法(推荐)

• 直接在组件内定义一个非箭头函数的方法，然后在render里直接使用 onClick={this.handleClick.bind(this)} (不推荐)

• 直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)

5.3、Event 对象

和普通浏览器一样，事件handler会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对 象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自 己内部所构建的。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法

6.Ref的应用

6.1给标签设置ref="username"

通过这个获取this.refs.username , ref可以获取到应用的真实dom

6.2 给组件设置ref="username"

通过这个获取this.refs.username ,ref可以获取到组件对象

6.3 新的写法

myRef = React.createRef()
<div ref={this.myRef}>hello</div>
       访问this.myRef.current