pc端开发 先统一所有浏览器的样式
https://meyerweb.com/eric/tools/css/reset/
安装react-cli
npx create-react-app my-react-app
安装 axios
yarn add axios --save
安装 styled-components (使各个模块的css独立出来)
yarn add styled-components
第一步 把css文件改成js文件
第二部 import {createGlobalStyle } from 'styled-components'; (全局样式组件方法)
style.js//1引入全局样式方法 import {createGlobalStyle } from 'styled-components'; //2定义并暴露全局样式 export const GlobalStyled =createGlobalStyle` body{ margin:0; padding:0; background:blue; }APP.js//3引入全局样式 并以组件的形式使用 import {GlobalStyled} from './style' function App() { return ( <div className="App"> <GlobalStyled/> hello world </div> ); } export default App;
第三部 import styled from 'styled-components'; (局部样式组件方法)
common公用的组件 中的index.js
import styled from 'styled-components'; export const HeaderWrapper=styled.div` height:56px; background:red; `common公用的组件的样式
import React,{Component} from 'react'; import {HeaderWrapper} from './style'; class Header extends Component{ render(){ return ( <HeaderWrapper>hello world</HeaderWrapper> ) } } export default Header;
安装scss
yarn add node-sass
scss用法
import React ,{Component} from 'react'; import './index.scss'; class TodoList extends Component{ render(){ return ( <div> <ul> <li>hello world</li> <li>happy</li> </ul> </div> ) } } export default TodoList;
安装ant-design
yarn add antd --save
ant-design库的用法
import React ,{Component} from 'react'; import 'antd/dist/antd.min.css'; import './index.scss'; import {Button} from 'antd'; class TodoList extends Component{ render(){ return ( <div> <Button type="primary" className="btn">Button</Button> </div> ) } } export default TodoList;
安装prop-types库
yarn add prop-types --save
prop-types 库的用法
import React,{Component} from 'react'; //1引入prop-types库 import PropTypes from 'prop-types'; class Child extends Component{ constructor(props){ super(props); this.state={ item:this.props.content } this.handleClick=this.handleClick.bind(this); } handleClick(){ this.props.delmethods(this.props.index) } render(){ return ( <div onClick={this.handleClick}> {this.state.item} </div> ) } } //2数据类型校验 Child.propTypes= { // 表示content类型要是string 且必须要传递 content:PropTypes.string.isRequired, delmethods:PropTypes.func, index:PropTypes.index, test:PropTypes.string } //3如果父组件没传递数据 可以定义默认值 Child.defaultProps={ test:'hello' } export default Child;
shouldComponentUpdate用法
shouldComponentUpdate(nextProps,nextState){ if(nextProps.content!==this.props.content){ return true; } else{ return false; } }
安装react-redux
yarn add react-redux --save
react-redux的用法
用法 主要就两部
- 第一步 被Provider包裹的子组件 内部可以直接调用store中的数据
- 第二部 connect(mapStateToProps,mapDispatchToProps)(TodoList)
- mapStateToProps 主要负责 将store中的state数据映射到TodoList的props属性中
- mapDidpatchToProps 主要负责将props中的方法可以通过dispatch方法发送action到store中的reducer内 修改store中的state数据
挂载节点 第一步使用Provider组件
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import TodoList from './TodoList/index'; import store from './store/index'; //Provider组件 可以是内部的所有子组件都可以获得store的数据 import {Provider} from 'react-redux'; const App=( <Provider store={store}> <TodoList></TodoList> </Provider> ) ReactDOM.render( App, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
store中的index.js
//引入redux createStore 创建store //applyMiddleware 方法允许redux 使用中间件 import { createStore, applyMiddleware, compose } from "redux"; import reducer from "./reducer"; import thunk from "redux-thunk"; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize... }) : compose; const enhancer = composeEnhancers( applyMiddleware(thunk) // other store enhancers if any ); //创建store 并把reducer存入store中 const store = createStore( reducer, enhancer // applyMiddleware(thunk) // rudex dev tools chrome 插件 使用 // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); export default store;
store中的reducer.js
const defaultState={ inputValue:'', list:[1,3,4,5,5] } export default (state=defaultState,action)=>{ if(action.type==='change_input_value'){ const newState=JSON.parse(JSON.stringify(state)); newState.inputValue=action.value; console.log(newState) return newState; } if(action.type==='add_todo_list'){ const newState=JSON.parse(JSON.stringify(state)); if(newState.inputValue===''){ return newState; } newState.list.push(newState.inputValue); newState.inputValue=''; return newState; } if(action.type==="delete_todo_list"){ console.log(1) const newState=JSON.parse(JSON.stringify(state)); newState.list.splice(action.value,1); return newState; } return state; }
TodoList组件中的index.js
import React, { Component } from "react"; import { connect } from "react-redux"; //无状态组件是一个函数 const TodoList = (props) => { const { inputValue, changeInputValue, handleClick, handleDel } = props; return ( <div> <div> <input type="text" onChange={changeInputValue} value={inputValue} /> <button type="button" className="btn" onClick={handleClick}> 输入 </button> </div> <ul className="list"> {props.list.map((item, index) => { return ( <li onClick={handleDel.bind(this, index)} key={index}> {item} </li> ); })} </ul> </div> ); }; // class TodoList extends Component { // constructor(props) { // super(props); // } // render() { // const { inputValue, changeInputValue, handleClick, handleDel } = this.props; // return ( // <div> // <div> // <input type="text" onChange={changeInputValue} value={inputValue} /> // <button type="button" className="btn" onClick={handleClick}> // 输入 // </button> // </div> // <ul className="list"> // {this.props.list.map((item, index) => { // return ( // <li onClick={handleDel.bind(this,index)} key={index}> // {item} // </li> // ); // })} // </ul> // </div> // ); // } // } const mapStateToProps = (state) => { return { inputValue: state.inputValue, list: state.list, }; }; const mapDispatchToprops = (dispatch) => { return { changeInputValue(e) { const action = { type: "change_input_value", value: e.target.value, }; // console.log(e.target.value) dispatch(action); }, handleClick() { const action = { type: "add_todo_list", }; dispatch(action); }, handleDel(index) { const action = { type: "delete_todo_list", value: index, }; dispatch(action); }, }; }; //connect(mapStateToProps,mapDispatchToprops) 方法的作用使TodoList和store链接 //并按照mapStateToProps的规则下将store中的数据映射到TodoList的props中 //store.dispatch映射到TodoList组件的props上 可以让props上的方法能够调用dispatch来操作store中的数据 export default connect(mapStateToProps, mapDispatchToprops)(TodoList);