一、React是什么？
React是Facebook公司出品，用于创建用户界面的JavaScript库
特点：组件思维、单向数据流、虚拟DOM节点
二、安装脚手架及使用
1.脚手架安装
npm i create-react-app -g2.新建项目
创建项目：
create-react-app 项目名称启动项目：
cd 项目名称
npm start运行后命令行显示画面：
会自动打开页面，出现这个画面就是成功啦！
三、项目目录介绍
四、插件推荐 - Simple React Snippets
快速生成代码，提高代码速度，具体可看插件的文档
五、React语法
jsx语法
JavaScript嵌套使用html模板
特点：
- 有且只有一个根节点
- {}书写js
- class改成className
- 数组可以包含html
- 对象样式自动展开
- {/* 注释 */}
代码：
/* App.css */
.myh{
color: blue;
}//App.js
import "./App.css";
//创建ap组件
const arr = [<h1 key="a">AAA</h1>, <p key="b">BBB</p>, <h3 key="c">CCC</h3>];
const stl = { fontSize: "24px", color: "#f70" };
function App() {
//返回一段dom节点
return (
<div>
<h1 className="myh"> hello </h1>
{arr}
<p style={stl}>Mewow</p>
</div>
);
}
//导出app组件
export default App; 运行结果：
模板语法
（目前是在App.js中修改）
文本渲染
const str = "hello Mewow";
function App() {
return (
<div>
<h1> 模板语法 </h1>
<p> 1. 文本渲染 </p>
<p> {str} </p>
<p> {2 + 3} </p>
<p> {str.split("").reverse().join("")} </p>
</div>
);
}
export default App;
html渲染
需要使用 dangerouslySetInnerHTML={ { __html: msg }}
const msg = "<strong>Me</strong>Wow";
function App() {
return (
<div>
<p>2.html渲染</p>
<p dangerouslySetInnerHTML={
{ __html: msg }}></p>
</div>
);
}
export default App;
条件渲染
借助 三目运算符 或者 &&
const score = 80;
let flag = true;
function App() {
return (
<div>
<p>3.条件渲染</p>
{score}
{score >= 60 ? "及格" : "再学一遍"}
{flag && <p>芝麻开门</p>}
</div>
);
}
export default App;
列表渲染
借助 map函数
const list = ["react", "vue", "angular"];
function App() {
return (
<div>
<p>4.列表渲染</p>
{list.map((item, index) => (
<p key={index}>{item}</p>
))}
</div>
);
}
export default App;
上述代码运行结果：
事件响应
- React事件与js事件一致,需要驼峰式写法
- 事件需要响应一个函数
- 事件函数的传参
function App() {
function say(str) {
alert("hi!" + str);
}
return (
<div>
<h1> 事件 </h1>
<button onClick={() => alert("hello")}> 按钮 </button>
<button onClick={say.bind(this, "say1")}> 传参按钮1 </button>
<button onClick={() => say("say2")}> 传参按钮2 </button>
</div>
);
}
export default App;
React组件的类型
函数组件
特点：
- 简单快捷，没有this、没有state数据、没有生命周期
- 没有this/state,降低组件的耦合性，组件的复用性与扩展性更强
- 适用于展示类型"视图组件"
结构：
function App(){
retuen(<div>...</div>)
}
export defaule App;
快捷键：ffc+tab
类组件
特点： 有this,state,生命周期，适用于集中处理数据的"容器组件"
结构：
import React, { Component } from "react";
class extends Component {
constructor(props) {
super(props);
}
state = { }
render() {
return (<div>...</div>);
}
}
export default ;快捷键：imrc+tab ccc+tab
组件的数据状态state
定义状态 state={num:5}
改变状态 this.setState({num:10})