快速学习react 从入门到入土

react是什么

  • 官方解释 react是用于构建用户界面的 JavaScript 库

React的起源

  • React是2013年 Facebook开源的JavaScript框架
  • 快速学习react 从入门到入土_第1张图片

React的特点 – 声明式编程

  • 声明式编程是目前整个大前端k开发的模式:Vue React Flutter 等
  • 它允许我们只需要维护自己的状态,当状态改变时,react可以根据最新的状态去渲染我们的界面

React开发依赖

  • react开发必须依赖三个库
    • react:包含react所必须的核心代码
    • react-dom:react渲染在不同平台所需要的核心代码
    • babel:将jsx转换成React代码的工具
  • 暂时我们直接通过CDN引入,来演练下面的示例程序:



React初体验hello World

  • 第一步:在界面上通过React显示一个Hello World
    • 注意:这里我们编写React的script代码中,必须添加 type=“text/babel”,作用是可以让babel解析jsx的语法

    
  1. ReactDOM.render函数
    • 参数一:传递要渲染的内容,这个内容可以是HTML元素,也可以是React的组件
    • 参数二: 将渲染的内容,挂载到哪一个HTML元素上
  2. 我们可以通过{}语法来引入外部的变量或者表达式

安装react脚手架

安装之前要先查看自己是否安装了 node.js
react 脚手架 npm i -g create-react-app
安装之后安装一下依赖包
中index.js中就是他的入口文件 App.js就是我们写代码的地方(你也可以写其他地方)
index中我们可以看到 这个是代表严格模式,在渲染过程中,会把渲染过程中的错误抛出,并且在抛出错误的时候,会把错误信息打印出来。

react基础

  • 基本的渲染 文本
import React from "react";
import "./App.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    // 定义数据
    this.state={
      name:'张三'
    }
  }
  render() {
    return (
      // 使用
      <div> {this.state.name} </div>
    )
  }

}

export default App;
  • 列表数据的渲染
    • react渲染是通过 map遍历来渲染的
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fruits: ["香蕉", "雪梨", "苹果"],
    };
    
  }
  handClick(name){
    console.log(name);
  }
  render() {
    return (
      <div>
      <ul>
        {
          this.state.fruits.map((item,index)=>{
            return <li key={index} onClick={this.handClick.bind(this,item)}>{item}</li>
          })
        }
      </ul>
      </div>
    )
  }

}
  • 事件绑定
    • react 事件绑定都是通过 onxxx来绑定的 onClick onChange
    • 绑定的时候我们要对他的this进行一个修改 默认他是指向this的
// 第一种 this.handClick.bind(this) 绑定this
 <h2 onClick={this.handClick.bind(this)}>第一种this</h2>
// 第二 this.handClick = this.handClick.bind(this)
constructor(props) {
   this.handClick = this.handClick.bind(this)
}
<h2 onClick={this.handClick}>第二种this 配合constructor使用</h2>   
// 第三 {()=>{this.handClick()}}
<h2 onClick={()=>{this.handClick()}}>第三种this</h2>

计数器案例

class App extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
                count:0
            };
         }
        render(){
            return (
                <div>
                    <h2>当前计数:{this.state.count} </h2>
                    <button onClick={this.add.bind(this)}>count++</button>
                    <button onClick={this.reduce.bind(this)}>count--</button>
                    <button onClick={this.add.bind(this,10)}>count+10</button>
                </div>
                )
        }
        add(num){
            if(typeof(num) === 'number'){
                this.setState({
                count:this.state.count+10
                })
                return
            }
            this.setState({
                count:this.state.count+1
            })
        }
        reduce(){
            this.setState({
                count:this.state.count-1
            })
        }
    }
    ReactDOM.render(<App/>,document.querySelector('#app'))
  • 组件传值
    react的父传子 通过props 子传父通过props 事件传
// 子组件
class ChildCom extends React.Component {
  constructor(props){
    super(props)
    this.state={
      name:'我是子组件传递的数据'
    }
  }
  handClick(){
    this.props.getMsg(this.state.name)
  }
  render(){
    return(
      <div>
          <p>父组件数据:{this.props.msg}</p>
          <button onClick={this.handClick.bind(this)}>点击给父组件传数据</button>
      </div>
    )
  }
}

// 父组件
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg:'我是父组件传给子组件的数据',
      childData:''
    };
    
  }
  getChildMsg(msg){
      this.setState({
        childData:msg
      })
  }
  render() {
    return (
      <div>
        <h1>子组件</h1>
        {/* 父传子 */}
        <ChildCom msg={this.state.msg} getMsg={this.getChildMsg.bind(this)} />
        <h1> 父组件 </h1>
        <p>传的数据:{ this.state.childData } </p>
      </div>
    )
  }

}

你可能感兴趣的:(react,react.js,学习,javascript)