React—搭建脚手架
安装node.JS
参考这个博客
安装React脚手架
-
npm install create-react-app -g; 全局安装react脚手架
创建项目
-
create-react-app 项目名字; 创建项目
运行项目
-
cd 创建的项目文件 进入 创建的项目文件
-
npm start 运行项目
其他命令
-
npm build 压缩，打包
-
npm test 测试
-
npm eject 暴露配置文件
使用VSCode----安装插件
基础插件
-
Chinese 简体中文
-
ESLint 检测js语法
-
ES7 React/Redux/... 语法提示(React)
-
Live Server 本地服务器
文档目录结构
-
node_modules 包安装目录
-
public 静态资源目录
-
src 项目资源目录
-
index.js 项目的入口js文件
-
index.css 项目的全局css文件
-
App.js 根组件
-
App.css 根组件样式
-
App.test.js 根测试文件
-
logo.svg logo图片
-
setupTests.js 测试文件
-
serviceWorker.js 离线服务
-
package.json 项目包管理配置文件
-
package-lock.json 配置锁定文件
-
README.md 项目说明文件
-
.gitignore git忽略文件
根组件App.js—解析
-
React使用JSX语法
-
参考博客
-
单标签必须自封闭
<br />
// 导入react
import React from 'react';
// 导入logo图片
import logo from './logo.svg';
// 导入组件的css文件
import './App.css';
// 函数App 是一个组件（函数组件---无状态组件）
function App() {
// 返回的是一个JSX语法的组件布局
return (
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
</div>
);
}
// 导出默认的 App组件
export default App;
组件解析
类组件（有状态组件）
// 类组件 快捷键---cccs
class App extends Component {
constructor(props) {
// 重载属性
super(props);
// 状态
this.state = {}
}
// 构造函数
render() {
// render 渲染函数
return (
<div>
<h1>你好React</h1>
</div>
);
}
}
// 导出
函数组件
// 函数组件使用较多
function App(props) {
// 返回的是一个JSX语法的组件布局
return (
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
</div>
);
}
JSX语法
html布局相关
- 只能有
一个根节点—与vue一样每个组件都只能有一个根节点
// 构造函数
render() {
// render 渲染函数
return (
// 这里只能有一个div，只能有一个根节点，与vue的一样
<div>
<h1>你好React</h1>
</div>
);
}
css样式相关
- 定义类名的时候使用
className
- 定义css样式的时候需要导入css文件
import 'css样式文件地址'
// 导入css文件
import './App.css';
// 函数App 是一个组件
function App() {
// 返回的是一个JSX语法的组件布局
return (
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
</div>
);
}
js行为相关
- 在一个
{}中写入js语法—任何的js语法，但是只能写一句
// 类组件 快捷键---cccs
class App extends Component {
constructor(props) {
// 重载属性
super(props);
// 状态
this.state = {
flag : true,
mystyle : {"fontSize" : "40px" , "color" : "red"}
}
}
// 构造函数
render() {
// render 渲染函数
return (
<div>
<h1>你好React</h1>
<h3>{ 0.2 + 0.1 }</h3>
// this.state.flag 是类组件调用数据的方法，跟vue的很想
<h3>{ this.state.flag ? "真的" : "假的" }</h3>
//
<h3 style={this.state.mystyle}>红色，40px</h3>
<h3>{ 0.2 + 0.1 }</h3>
</div>
);
}
}
JSX的嵌套—也是只能有一个根节点
class App extends Component {
constructor(props) {
// 重载属性
super(props);
// 状态
this.state = {
flag : true,
mystyle : {"fontSize" : "40px" , "color" : "red"}
}
}
// 构造函数
render() {
// render 渲染函数
return (
<div>
<div>
{
<h1> 你好第一层<br/>
<p>你好第二层<br/>
{this.state.flag ? <p style={mystyle}>第三层</p> : ""}
</p>
</h1>
}
</div>
</div>
);
}
}
JSX数组相关
数组的展开
// 构造函数
render() {
let arr = [
<h2>html</h2>,
<h2>vue</h2>,
<h2>react</h2>
];
// render 渲染函数
return (
<div>
{/* 数组 */}
{arr} <br/>
</div>
);
}
数组的映射
// 构造函数
render() {
let list = ["学会前端","找工作","找对象","买个房子","结婚"];
// render 渲染函数
return (
<div>
{/* 数组映射 */}
{list.map( (item,index) => { return <h1 key={index}>{index + 1} : {item}</h1>})
</div>
);
}
组件
- 创建components文件夹
- 创建对应组件的文件夹
函数组件—无状态组件
定义组件
// 导入组件文件
import React, { Component } from 'react'
// 函数组件
function Child() {
return (
<div>
<h1>child组件</h1>
</div>
)
}
// 导出child组件
export default Child;
使用组件
// 导入Child组件
import Child from './components/Child'
// 使用组件
// 构造函数
render() {
// render 渲染函数
return (
<div>
{/* 调用组件 */}
<Child></Child>
</div>
);
}
类组件—有状态组件
-
imrc 快捷键可以，快捷导入components组件
-
cccs 快捷键可以，快捷创建类组件
创建组件
// 导入组件
import React, { Component } from 'react';
// 类组件
class Son extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<div>
<h2>Son的组件</h2>
</div>
);
}
}
// 导出son组件
export default Son;
使用类组件
// 导入Son组件
import Son from './components/Son/';
// 构造函数
render() {
// render 渲染函数
return (
<div>
{/* 调用son组件 */}
<Son></Son>
</div>
);
}
组件的导入简写
- 文件的
index文件可以省略
- 在
components文件夹里面创建index文件
- 在components文件夹的index文件中
导入components文件夹中所有的组件，在全部导出
// 导入
import Son from './components/Son'
import Child from './components/Child'
// 导出
export {Son , Child}
- 之后我们就可以在使用是，调用components中的index就行了，简单，快捷
// 导入所有组件
import {Son,Child} from "./components"
// 使用组件
正常使用就行
类组件状态—state
- 函数组件没有state
-
state的使用与小程序的data基本一致，与vue的使用差不多
设置state
class Son extends Component {
constructor(props) {
super(props);
this.state = {
name : "momo",
age : 18
};
// state 组件的状态 数据 （函数组件没有）
}
调用state
- 调用时因为是构造函数的一个方法或者数据存储器
- 所以：
this.state.定义的属性
<h2>姓名：{this.state.age}</h2>
设置state
- 设置的方法与小程序一致
- 都需要使用：
this.setState({ 需要设置的属性名字 : 设置的属性值 })
<h2>姓名：{this.state.age}</h2>
<button onClick={ () => {
this.setState({
age : this.state.age+1
})
}}>长大了一年</button>
</div>
组件传参—父传子—props属性
-
props属性只读，单项数据流
- 一般都是
父组件传递过来的
- 如果想要
更改props，可以将数据定义到组件自己的state中，
- 跟vue一样，vue虽然可以更改父组件传递的参数，但是不建议直接修改父组件的参数
函数组件
传递参数
<!-- 传递 -->
<!-- {/* 调用组件 */} -->
<Child money="100"></Child>
接收参数
// 函数组件
// props 接收所有传递过来的参数
function Child(props) {
return (
<div>
<h1>child组件</h1>
// 调用
<h1>{props.money}</h1>
</div>
)
}
/
// 或者
// 这样可以设置money的初始值为1
// 只用于函数组件
function Child(money=1) {
return (
<div>
<h1>child组件</h1>
// 调用
<h1>{props.money}</h1>
</div>
)
}
类组件—props
‘’
传递参数
<!-- {/* 调用son组件 */} -->
<Son num="5"></Son>
接收参数
{this.props.num}
设置默认props值
// 导入组件
import React, { Component } from 'react';
class Son extends Component {
constructor(props) {
super(props);
this.state = {
name : "momo",
age : 18
};
// state 组件的状态 数据 （函数组件没有）
// props 组件的属性
}
render() {
return (
<div>
<h2>Son的组件</h2>
<h2>姓名：{this.state.name}</h2>
<h2>姓名：{this.state.age}</h2>
<button onClick={ () => {
this.setState({
age : this.state.age+1
})
}}>长大了一年</button>
{this.props.num}
</div>
);
}
static defaultProps = {money : 10};
}
// 导出son组件
export default Son;
子传父
{/* 子组件给父组件传递参数fun，使用props.fun动态添加参数 */}
<h1 onClick={ () => props.fun('I Love React')}>点击触发父组件的事件</h1>
// 这个是定义在render函数之外的
showMsg = msg => {alert(msg);}
{/* 父组件接收fun,调用父组件自己的showMsg事件 */}
<Child fun={this.showMsg}></Child>
事件
- 响应三种写法
-
{this.show} 函数this指向当前元素
-
{this.show.bind(this,参数)} 函数this指当前的类
-
{()=>this.show(参数)} 函数this指向当前组件
- 定义事件函数
show(arg){}-
show=(arg)=>{} 函数this指向当前组件
类，样式
- 写法基本与vue相差不大
{类名 : 判断条件如果是真的就添加类名否则就删除类名，不添加,...}
略 用法与vue一样，具体可参考
参考Vue的Class与Style的用法
条件渲染
{this.state.flag ? "你好" : "hello"}
Refs的使用
<!-- 定义ref -->
<div ref="inp">你好</div>
// <!-- 获取dom元素 -->
<div onClick={ () => {
this.refs.inp.value = "我爱国家！";
}}><>
表单的双向绑定
- 推荐使用
onChange事件，onInput事件会报红
// 定义数据
// 状态
this.state = {
msg : "你好"
}
{/* 双向绑定 */}
<input type="text"
value={this.state.msg}
onChange={ (e) => {
this.setState({msg : e.target.value})
}}
/>
<p>{this.state.msg}</p>
