React从入门到进阶(一)

前言：
react 和 react native的区别？

react 就是最全面的react脚手架
react native是专门写移动app的。
一、使用npm 配置react开发环境
1、项目初始化

npm init

2、安装必要的包

 cnpm install  ~  --save
     react react-dom babel-preset-react babelify
     babel-preset-es2015  // es2015

******************************************华丽分割线******************************************

二、webpack热加载配置
1、安装必要的插件

    cnpm install webpack webpack-dev-server   --save

******************************************华丽分割线******************************************

三、React组件基础
1、react 虚拟DOM概念
在呈现实际的Web页面之前，首先编排出虚拟化的DOM元素，在确定了要显示的内容和显示方式后，再将HTML页面渲染出来

2、react组件
01、组件的return函数里返回的HTML节点必须是一个
02、可以给外部使用的组件定义：

export default class ComponentHeader extends React.Component{}

03、入口的定义：

ReactDOM.render(, document.getElementById('example'));

3、 react多组件嵌套

image.png

4、JSX内置表达式

image.png

export default class BodyIndex extends React.Component {
  render() {
    var userName = '';
    var boolInput = false;
    var html = "Demo Lesson";
    
    return (
        页面的主体内容

        {userName == '' ? '用户还没有登录' : '用户名：' + userName}
        
           
        

        {/* 注释 */}

        {html}
        
    )
  }
}

5、生命周期

image.png

https://blog.csdn.net/qq_43258252/article/details/87857490 值得看的博客
******************************************华丽分割线******************************************

四、React属性和事件
1、state属性

image.png

export default class BodyIndex extends React.Component {
  constructor(){
    super(); // 调用基类的所有初始化方法
    // 初始化赋值
    this.state = {
      username: 'Estelle',
      age: 20
    }
  }
  render() {
    setTimeout( () => {
      //更改state时候
      this.setState({ username: 'www',age: 30,})
    })
    return (
       
         {this.state.username} {this.state.age}
       
    )
  }
}

2、props属性

image.png

01、父组件向子组件传值

//父组件 传递参数


//子组件 接受参数
 接收到父页面的属性：userid:{this.props.userid} username:{this.props.username}

3、事件与数据的双向绑定

image.png

01、事件的调用

export default class BodyIndex extends React.Component {
  //构造函数
  constructor(){
    super(); 
    // 初始化赋值
    this.state = {
      username: 'Estelle',
      age: 20
    }
  };

   // 改变用户信息
  changeUserInfo1() {
    this.setState({age:50}) // 默认值
  };
  // 改变用户信息
  changeUserInfo2() {
    this.setState({age:age}) // 用户自己传入值
  };

  render() {
    return (
       
         {this.state.username} {this.state.age}
         {this.props.userid} {this.props.username}
         
         age: {this.state.age}
          
         
       
    )
  }
}

02、子组件向父组件传值

// 子组件向父组件传值，只能通过方法，方法的参数来进行传入
//父组件中
 import BodyChild from './bodyChild'

 // 接收子组件传来的方法
 handleChildValueChange(event){
    this.setState({age: event.target.value});
  };

 

// 子组件中
export default class BodyChild extends React.Component {
  render() {
    return (
       
         子页面输入： 
       
    )
  }
}

image.png

4、可复用组件

image.png

01、传值验证爷孙传值
index.js

bodyIndex.js

import React from 'react';
import BodyChild from './bodyChild'

const defaultProps = {
  username: '这是一个默认的用户名'
}

export default class BodyIndex extends React.Component {
  constructor(){
    super(); 
    this.state = {
      username: 'Estelle',
      age: 20
    }
  };

  // 接收子组件传来的方法
  handleChildValueChange(event){
    this.setState({age: event.target.value});
  };

  render() {
    return (
       
         {this.state.username} {this.state.age}
         {/* 父组件传过来的值 */}
         {this.props.userid} {this.props.username}
        
         
       
    )
  }
}

// 对传来的内容进行验证
BodyIndex.propTypes = {
  userid: React.PropTypes.number.isRequired
}
// 给个默认值 如果传过来的有值 那就覆盖默认值
BodyIndex.defaultProps = defaultProps

bodyChild.js

import React from 'react';
import ReactDOM from 'react-dom';

export default class BodyChild extends React.Component {
  render() {
    return (
       
         子页面输入： 
         爷爷页面传过来的值： userid:{this.props.userid}  username: {this.props.username} 
            父页面传过来的值：id:{this.props.id}
       
    )
  }
}

5、组件的refs

image.png

获取原生的DOM节点

import React from 'react';
import ReactDOM from 'react-dom'

export default class BodyIndex extends React.Component {
  //构造函数
  constructor(){
    super(); 
    this.state = {
      username: 'Estelle',
      age: 20
    }
  };

  // 改变用户信息
  changeUserInfo2() {
    this.setState({age:age}) 

    // 第一种方式 不推荐(安全，性能上面不好)
    var mySubmitButton = document.getElementById('submintButton');
    // console.log('mySubmitButton',mySubmitButton);
    ReactDOM.findDOMNode(mySubmitButton).style.color = 'red'

    // 第二种方式 refs
    // console.log(this.refs.submintButton)
    this.refs.submintButton.style.color = 'yellow'
  };

  render() {
    return (
       
         age: {this.state.age}
         
         
       
    )
  }
}

6、独立组件间共享 Mixins

image.png

mixins.js

const MixinLog = {
    componentDidMount(){
        console.log("componentDidMount");
    },
    log() {
        console.log("aba");
    }
}

export default MixinLog;

bodyIndex.js

// 安装插件
cnpm install --save react-mixin@2

// bodyIndex.js
import React from 'react';
import ReactDOM from 'react-dom'
import ReactMixin from 'react-mixin'
import MixinLog from './mixins'

export default class BodyIndex extends React.Component {
  //构造函数
  constructor(){
    super(); 
    this.state = {
      username: 'Estelle',
      age: 20
    }
  };

  // 改变用户信息
  changeUserInfo2() {
    this.setState({age:age}) 
    this.refs.submintButton.style.color = 'yellow'

    MixinLog.log() // 调用
  };

  render() {
    return (
       
         age: {this.state.age}
         
       
    )
  }
}

ReactMixin(BodyIndex.prototype,MixinLog)

******************************************华丽分割线******************************************

五、React样式
1、内联样式

image.png

import React from 'react';

export default class ComponentHeader extends React.Component{
  render(){
    // 第一种: 内联写法
    const styleComponentHeader = {
      header: {
        backgroundColor: '#333', // 驼峰
        color: 'yellow',
        paddingTop: '15px',
      }
      // 还可以定义其他样式
    }
    return (
      
        这是头部
      
    )
  }
}

2、内联样式中的表达式

image.png

import React from 'react';

export default class ComponentHeader extends React.Component{
  constructor(){
    super();
    this.state = {
      miniHeader: false
    }
  };
  // 通过改变方法来改变样式
  switchHeader(){
    this.setState({
      miniHeader: !this.state.miniHeader
    })
  }

  render(){
    const styleComponentHeader = {
      header: {
        backgroundColor: '#333', 
        color: 'yellow',
        paddingTop: (this.state.miniHeader) ? "3px":"15px", // **
      }
    }
    return (
      
        这是头部
      
    )
  }
}

3、css模块化 **

image.png

安装配置插件：

cnpm install babel-plugin-react-html-attrs style-loader css-loader --save

4、JSX样式与CSS的互转

image.png

转换地址：https://staxmanade.com/CssToReact/

import React from 'react';

export default class ComponentFooter extends React.Component{
  render(){
    var footerConvertStyle = {
      {
        "miniFooter": {
          "backgroundColor": "#333",
          "color": "#fff",
          "paddingLeft": "20px",
          "paddingTop": "30px",
          "paddingBottom": "3px"
        },
        "miniFooter_h1": {
          "fontSize": "15px"
        }
      }
    };
    return (
      
        这里是页脚
      
    )
  }
}

5、Ant Design样式框架介绍和使用
安装

cnpm install antd --save

******************************************华丽分割线******************************************

六、React Router
1、Router概念
安装路由：

cnpm install react-router --save

image.png

router.js

import React from 'react'
import ReactDOM from 'react-dom'

import Index from './index'
import ComponentList from './components/list'
import ComponentDetails from './components/details'

import {Router,Route,hashHistory} from 'react-router'

export default class Root extends React.Component{
    render(){
        return(
            // 这里是程序的入口 history = {hashHistory}可以控制前进后退的
            
                
                    
                
                
                
            
        )
    }
}



ReactDOM.render(, document.getElementById('example'));

header.js

import React from 'react';
import {Link} from 'react-router'

export default class ComponentHeader extends React.Component{
  constructor(){
    super();
  };

  render(){
    return (
      
        这是头部
        
          首页
          嵌套的详情页面
          列表页面
        
      
    )
  }
}

index.js

return (
            
                
                
                {/* 嵌套details页面 */}
                
                    {this.props.children}
                
                
            
        );

2、Router参数传递

image.png

//  router.js


// header.js
列表页面

// list.js
这是列表页面 Id: {this.props.params.id}

React从入门到进阶(一)

页面的主体内容

这是列表页面 Id: {this.props.params.id}

你可能感兴趣的:(React从入门到进阶(一))