React 学习笔记
第一部分,腾讯课堂react入门课程
课程地址
React第一篇 npm、yarn介绍
React第二篇 React语法
React第三篇 单页应用开发
React第四篇 路由&Hooks
React第五篇 综合应用(登录+列表)
第二部分,Redux课程
课程地址
React第六篇 Redux
React第七篇 React Redux
1.脚手架使用
- npm install -g create-react-app
或 - yarn add -g create-react-app //方式2
- 然后 create-react-app react-demo
2.编写Hello World
- sass支持
- 将App.css修改为App.scss , 这样css将支持嵌套语法
- 安装sass:yarn add node-sass --save(或yarn add node-sass -S)
- 运行项目:根据package.json配置 执行yarn start/yarn run start
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
App.scss
//复合样式
div {
text-align: center;
font-size:32px;
h1 {
color: red;
font-size: 30px;
}
}
App.js
import React from 'react';
import './App.scss';
class App extends React.Component{
state = {
val:'',
list:[]
}
handleChange=(event)=>{
let val = event.target.value;
this.setState({
val
})
}
handleAdd=()=>{
let {val,list} = this.state;
list.push(val);
this.setState({
list
})
}
render() {
const {val,list} = this.state;
return <div>
<p>欢迎学习react</p>
<h1>Hello World</h1>
<input type="text" value ={val} onChange={this.handleChange}/>
<button onClick={this.handleAdd}>添加</button>
<ul>
{list.map((item)=>{
return <li>{item}</li>
})}
</ul>
</div>
}
}
export default App;
3. AntD UI框架使用
安装
- npm install antd --save
- yarn add antd
- babel-plugin-import 按需加载
代码
import React from 'react';
import {Input,Button,Select} from "antd";
import 'antd/dist/antd.css'
const Search = Input.Search;
const Option = Select.Option;
class AntD extends React.Component{
state = {
val:'',
list:[]
}
handleChange=(event)=>{
let val = event.target.value;
this.setState({
val
})
}
handleAdd=()=>{
let {val,list} = this.state;
list.push(val);
this.setState({
list
})
}
handleSearch=(value)=>{
let {list} = this.state;
list.push(value);
this.setState({
list
})
}
render() {
const {val,list} = this.state;
const options =[];
//width 是一个object对象
const width = {width:300};
return <div>
<p>欢迎学习react</p>
<h1>Hello World</h1>
<Input type="text" value ={val} style={width} onChange={this.handleChange}/>
<Button type={"primary"} onClick={this.handleAdd}>添加</Button>
<ul>
{list.map((item,index)=>{
options.push(<Option key={index}>{item}</Option>)
return <li key={index}>{item}</li>
})}
</ul>
<div>
<Search
style={width}
enterButton={"搜索"}
onSearch={this.handleSearch}/>
<br/>
<Select style={{width:200}} >
{options}
</Select>
</div>
</div>
}
}
export default AntD;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import AntD from "./AntD";
ReactDOM.render(
<React.StrictMode>
{/*<App />*/}
<AntD />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();