创建react项目
react的vscode插件
Simple React Snippets
也可以使用自定义的
如何修改配置文件
1.npm run eject 暴露所有的配置文件 不可逆的,在发射前需要提交git文件
2.安装react-app-rewired 这个包需要报pakage.json中的脚本配置修改为下面代码,再在更目录下创建config-overrides.js的配置
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
React.StrictMode是什么?
StrictMode 检查项目中潜在问题。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
Fragment 类似于 vue中的template
react项目文件中 为什么都要导入react包
import React from "react";
import ReactDOM from 'react-dom'
let h1 = <h1>123</h1> //babel会编译这个 下面有编译的地址
function App() {
return h1
}
ReactDOM.render(<App />, document.getElementById('root'))
export default App;
let h1 = /*#__PURE__*/React.createElement("h1", null, "123");
可以看到这里用到了React 所以需要导入
用到了jsx语法 所以每个文件都需要导入react包
类组件 和 函数组件
函数组件使用hooks 可以替换类组件
受控组件和 非受控组件
<input value={name} onChange={this.changeName} /> // change = e => this.setState({name:e.target.value})}
<input ref={(el)=>{this.qq = el }} /> // this.qq 就是当前dom
react常用写法
<button onClick={this.fn.bind(this)}>btn</button> //当fn中用到 this时 需要用bind绑定this
<div dangerouslySetInner