为了账号安全,请及时绑定邮箱和手机立即绑定
  • React应用场景

    • React JS   →  网页

      React Native →  手机APP

    • React VR   →  VR全景视图

    React Fiber

    • React 16之后的版本

    • 新特性:优先级、分片

    查看全部
    0 采集 收起 来源:React 简介

    2022-11-15

  • 子组件如果想和父组件通信,要调用父组件传递过来的方法

    查看全部
  • 父组件通过属性的形式向子组件传递参数

    子组件通过props接收父组件传递过来的参数

    查看全部
  • React开发环境搭建

    --------------------------

    【1】安装 nodejs (官网:LTS版本)

    【2】安装 create-react-app  (官网:docs 右侧)

    【3】在目录通过命令创建项目:cra XXXXX

    【4】运行项目 npm start

    查看全部
  • 父组件通过属性的形式向子组件传参

    子组件通过props接收父组件传递过来的参数

    子组件通过调用父组件传递过来的方法实现与父组件的通信

    创建子组件

    import {Component} from 'react'
    class TodoItem extends Component{
          constructor(props){
              //优化
              this.itemDel = this.itemDel.bind(this)
          }
          itemDel(){
              this.props.itemDel()
              
              //const { itemDel } = this.props
              //itemDel()
          }
        
        render(){
            const { content } = this.props //结构赋值
            return(
              <div onClick={this.itemDel}>
                {content}
            </div>
          )
        }
    }
    
    export default TodoItem

    父组件引入子组件

    import {Component,Fragment} from 'react'
    import TodoItem from './TodoItem'
    itemDel(index){
        let list=[...this.state.list]
        list.splice(index,1)
        this.setState({list})
    }
    getTodoItems(){
        return(
            this.state.list.map((item,index) => {
                return (
                    <TodoItem 
                        key={index} 
                        content={item} 
                        itemDel={this.itemDel.bind(this,index)}
                    />
                )
            }
        )
    }
    render(){
        return(
            <Fragment>
                <div>
                    <input className='input-style' value={this.state.inputVal} onChange={this.inputChange}/>
                    <button style={{background:'blue',color:'#fff'}} onClick={this.butClick}>add</button>
                </div> 
                <ul>{this.getTodoItems()}</ul>
            </Fragment>
        )
    }
    查看全部
  • //函数组件写法

    const ToDoList=()=> {
        const [val,setVal] = useState('')
        const [list,setList] = useState([])
       
        const butClick=()=>{
          setList([...list,val])
          setVal('')
        }
        const inputChange=(e)=>{
          setVal(e.target.value)
        }
        const itemDel=(e)=>{
          let newList=list
          let i=e.target.dataset.inx
          newList.splice(i,1)
          setList([...newList])
        }
        useEffect(()=>{
          console.log(list)
        },[list])
        
      return (
        <div className="ToDoList">
          <div>
            <input value={val} onChange={inputChange} />
            <button onClick={butClick}>add</button>
          </div>
          <ul>
            {
              list.map((item,index)=>{
                return <li key={index} data-inx={index} onClick={itemDel}>{item}</li>
              })
              //其他传参方式 这两种每次组件渲染时会创建一个新的函数影响性能
              //箭头函数 onClick={()=>itemDel(index)}  绑定 onClick={itemDel.bind(this,index)}
            }
          </ul>
        </div>
      );
    }

           

    查看全部
  • React面向数据编程,自动处理DOM

    class组件

    constructor(props){ //组件创建时自动执行
        super(props); //初始化
        this.state = { //创建state对象
            list:[],
            inputVal:''
        }
        
        //优化
        this.inputChange = this.inputChange.bind(this)
        this.butClick = this.butClick.bind(this)
        
    }
    btnClick() {//增加
        this.setState({//改变state数据
            list: [...this.state.list,this.state.inputVal],
            inputVal:''
        })
    }
    inputChange(e) {//输入框内容
        this.setState({
            inputVal: e.target.value
        })
    }
    itemDel(index){//删除
        let list=[...this.state.list]
        list.splice(index,1)
        this.setState({list})
    }
    //DOM
    render(){
        return(
            <div>
                <div>
                    <input value={this.state.inputVal} onChange={this.inputChange}/>
                    <button onClick={this.butClick}>add</button>
                </div> 
                <ul>
                    {
                        this.state.list.map((item,index) => {  //循环list
                            return <li key={index} onClick={this.itemDel.bind(this,index)}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }




          

    查看全部
  • JSX语法

    是一种JavaScript语法扩展,在React中可以方便地用来描述UI


    在JSX中插入JavaScript表达式: {JS表达式}

    JS表达式就是一个短语,常用的表达式有:

    常量

    变量名;

    函数定义表达式;

    属性访问表达式;

    函数调用表达式;

    算数表达式;

    关系表达式;

    逻辑表达式;

    if语句以及for循环不是JavaScript表达式,不能直接作为表达式写在{}中,但可以先将其赋值给一个变量

    查看全部
    0 采集 收起 来源:简单的JSX语法

    2022-09-04

  • React基于组件开发


    用户定义的组件必须以大写字母开头

    以小写字母开头的元素代表一个 HTML 内置组件
    比如 <div> 或者 <span> 会生成相应的字符串 'div'或者 'span' 传递给 React.createElement(作为参数)。


    ReactDOM将组件挂载到页面dom节点上,渲染dom

    ReactDOM.render(<App />,document.getElementById('root'));


    定义React组件

    class 组件名  extends  Component{
        render(){                       //必有函数,负责要显示的内容
            return(
                 //要显示的内容
             ); 
         }}

    新版

    function App() {
      return (
      
      );
    }
    export default App;
    查看全部
    0 采集 收起 来源:什么是组件?

    2022-09-04

  • React JS   网页应用

    React Native  原生应用

    React VR  VR或全景视图


    React Filber是指React16之后的版本对应的React框架,对底层的核心算法进行改良,引入了一些优先级的的概念、分片的概念,使React的代码更加流畅,尤其是处理一些复杂的动画的時候

    查看全部
    0 采集 收起 来源:React 简介

    2022-09-04

  • React执行的入口文件是src/index.js

    registerServiceWorker是一个pwa(离线页面的內容)

    App.test.js用于自动化测试

    查看全部
  • //开发环境

    node

    npm

    全局切换镜像源:npm config set registry http://registry.npm.taobao.org

    查看镜像源使用状态:npm get registry

    全局切换官方镜像源:npm config set registry http://www.npmjs.org


    //创建新的 React 应用

    npx create-react-app appname  //新建项目
    cd appname
    npm start    //在项目文件夹下启动


    *nodejs全局安装包在其他盘Program Files下时文件夹 解析会出现空格导致包不能安装,需要更改全局安装包的安装路径

    查看全部
  • <li key={index}  onClick = {this.handledel.bind(this,index)}


    constructor(props){

      super(props)

      this.state = {

         list:xxxx

      }

    }

    handledel(index){

          const list = [...this.state.list]

          list.splice(index,1)

          this.setState({

              list: list

          })

    }

    查看全部
  • js基础:this指向

    es6语法:class-constructor 扩展运算符

    查看全部
  • 组件:网页的一部分


    App.js 定义react组件(定义组件的语法看一下)

    index.js 项目入口文件 引入组件,通过ReactDOM库把组件渲染到index.html上


    import ReactDOM from 'react-dom';

    ReactDom库 将组件挂载到页面的一个节点上

    比如,将App组件渲染到public/index.html文件(项目的html文件)的root节点里


    public/index.html:项目的html文件

    查看全部
    0 采集 收起 来源:什么是组件?

    2022-01-20

举报

0/150
提交
取消
课程须知
1、对Javascript基础知识已经掌握。 2、对Es6和webpack有简单了解。
老师告诉你能学到什么?
1、React项目架构搭建 2、JSX语法 3、React组件化开发 4、React组件间通信 5、React中的事件 6、React代码优化 7、React中组件的样式修饰

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!