react学习笔记

安装一下

直接按照官方文档就可以

npx create-react-app my-app
cd my-app
npm start

开发前，配置vscode，提升开发效率

vscode 安装   **ES7 React/Redux/GraphQL/React-Native snippets

**
在vscode 的插件搜react 出来的第一个就是
安装后 配置jsx语法 里面的html标签提示
打开设置ctrl+, 然后在右上角有一个设置.json文件

然后添加下面的代码
  "emmet.includeLanguages":{
    "wxml": "html",
    "javascript":"javascriptreact"
  },
  "emmet.syntaxProfiles":{
    "javascript":"jsx",
    "javascript":"html"
  },
 如果以前有配置不要重复

这样在jsx语法里面就有html标签的提示啦(用着比较舒服)

绑定事件

绑定事件demo

export class Search extends Component {
  state = {
    text:"真帅", 
  }
  onSubmit(e){
    e.preventDefault();
    console.log(this.state.text)
  }
  render() {
    return (
      <button onSubmit={this.onSubmit.bind(this)}><button>
   )
 }
}
//后面加bind(this),点击时就不会报错了，但是不如用箭头函数优雅

export class Search extends Component {
  state = {
    text:"真帅", 
  }
  onSubmit(e)=>{
    e.preventDefault();
    console.log(this.state.text)
  }
  render() {
    return (
      <button onSubmit={this.onSubmit}><button>
   )
 }
}

react 路由

下载安装react-router-dom

npm install react-router-dom --save
安装完之后
引入APP.js
import {BrowserRouter as Router , Switch,Route } from 'react-router-dom'
 <Router>
      <Navbar title="小说网" />
      <Switch>
        <Route exact path="/" render={props=>(
          <Fragment>
            <Search 
            clearUsers={this.clearUsers}
            showClear={users.length>0 ? true : false }
            searchUsers={this.searchUsers}
            setAlert={this.setAlert}
            />
          </Fragment>
        )}/>
        <Route exact path="/About" component={About} />
      </Switch>
 </Router>
 一般结构是这样的，在根据自己需求改
 Navbar.js
 //跳转路由
import {Link} from 'react-router-dom'
   <Link to="/">home</Link>
   <Link to="/About">About</Link>

父子组件传值

//父组件
import User from './components/users/User'
export default class App extends Component {
  state={
    users:[]
  },
  getUser=  async login =>{
    this.setState({loading:true})
    const res=  await axios.get(`https://api.github.com/search/users/${login}?client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`)
    this.setState({user:res.data,loading:false})
  }
}

react 的hooks

1、seState设置和使用hooks的方法
使用的时候
const  app=()=>{
//使用hooks方法
  const [users,setUsera] = useState([])
  const [user,setUser] = useState({})
  const [loading,setLoading] = useState(false)
  const [alert,setAlert] = useState(null)
  //不使用hooks的方法
  // state={ 
  //   users:[],
  //   user:{},
  //   loading:false,
  //   alert:null,
  //   repos:[]
  // }
  //hooks
  const searchUsers= async text => {
    setLoading(true)
    const res=  await axios.get(`https://api.github.com/search/users?q=${text}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`)
    setUsers(res.data.items)
    setLoading(false)
  }  
  //非hooks
  // searchUsers= async text => {
  //   this.setState({loading:true})
  //   const res=  await axios.get(`https://api.github.com/search/users?q=${text}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`)
  //   this.setState({users:res.data.items,loading:false})
  // }  
}

未完待续。。
//2、使用useContext