2019-04-16 12:49:47 weixin_42396884 阅读数 1342
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2123 人正在学习 去看看 梁富城

recat基础知识目录

* 1.html模板     
    添加引入react的链接
    三个样式有顺序
    1 react.development
    2 react-dom.develop
    3 babel.min
* 2.ReactDOM.render()
    输出
    ReactDOM.render(
        输出内容的代码体,
        document.querySelector('绑定节点')
    )
* 3.JSX 语法
    <>代表html代码块   {}代表js代码块
    <div>
        <p>html块 {js块}</p>
    </div>
* 4.组件 & props
    通过继承React.Component类来定义一个组件
    class Person extends React.Component{}
    组件内部由三部分构成  构造器: constructor  执行父类构造器: super  执行体:render
    class Person extends React.Component{
        constructor(){
            super();
        }
        render(){
            return(
                JSX代码块
            )
        }
    }
* 5.props & 纯函数
    props 组件传来的参数
    react组件必须是纯函数(输入相同的值返回的都是固定值的函数)
* 6.事件
    绑定事件 绑定this bind 用于保持指向不变
* 7.列表渲染
    通过父组件把数据传递给子组件的props
    子组件内部直接获取数据
    遍历通过map 和key绑定标识
    渲染代码块
    map((item,index)=>{
        return (
            <div key={index}>{item}</div>
        )
    })
* 8.条件渲染 相当于vue的v-if 和 v-show
    if else   if(A){a}else{b}   通过判断A的布尔值决定执行a或b
    &&  a&&{b}            通过判断A的布尔值决定要不要执行b
    三目运算符 A?{a}:{b}   通过判断A的布尔值来决定执行a或b
* 9.this.state
    子组件内部定义数据
    this.state{
        show:false
    }
    修改子组件内部的数据 类似小程序里修改data里变量一样
    this.setState({
        show:true
    })
    通过测试得知:子组件constructor里的变量随意定义
                修改的时候只需this.set变量   变量首字母大写就行
* 10.style和class
* 11.生命周期
* 12.表单
* 13.获取真实的DOM节点
* 14.this.props.children

1.html模板

<!DOCTYPE html>
<html>
  <head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    // script的类型必须是text/babel
    <script type="text/babel">
     // todo
    </script>
  </body>
</html>

2.ReactDOM.render()

作用: 编译模板,把模板挂载到指定的节点上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>
<script type="text/babel">
    ReactDOM.render(
        <h1>hello world</h1>,
        document.getElementById('root')
    )
</script>

3.JSX 语法

说明: jsx语法html代码和js代码可以混写而不需要加引号,可以这样做的原因是React和到jsx代码后会进行编译,使代码正确运行.当然jsx也是有它自己本身的规则:

1.js代码需要用{}括起来
2.React编译规则: 遇到<开头就看作是html,遇到{开头则视为js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>

<script type="text/babel">
    const person = {
        name: 'huruqing',
        age: 108
    }; 
    const element = 
        <h1>
            <p>姓名: {person.name}</p>
            <p>年龄: {person.age}岁</p>
        </h1>;

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

4.组件

1.用es5定义一个react组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">



    </div>
</body>

</html>

<script type="text/babel">
    // es5组件的写法,一个函数就是一个组件
    function Welcome(props) {
      return (
            <h1>
                <p>姓名: {props.person.name}</p>
                <p>年龄: {props.person.age}</p>
            </h1>
        )
    }

    const person = {
        name: 'huruqing',
        age: 108
    }
    ReactDOM.render(
        <Welcome person={person} />,
        document.getElementById('root')
    )
</script>

2.es6的class和class继承

<script>
/**
 * 面向对象中的继承
 * es6中的类和类的继承
 */

 // 定义一个类
 class Person {
    // 构造器(初始化类的实例)
    constructor() {
        // alert('哈哈哈哈');
        this.mouth = '1张';
        this.leg = '两条';
    }

    eat() {
        console.log('人类是个吃货');
    }

    speak() {
        console.log('会说人话');
    }
 }
 var person = new Person();
 console.log(person);


 // 继承

 class Man extends Person {
     constructor(name,age) {
        // 执行父类构造器
        super();
        this.name = name;
        this.age = age;
     }
 }

 var man = new Man('张三',100);
 console.log(man);
 console.log(man.leg);
 man.speak();

</script>

3.用es6定义个react组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">


        <h1>
            <p>姓名: </p>
            <p>年龄: </p>
        </h1>
    </div>
</body>

</html>

<script type="text/babel">
    /**
        * es6使用class的形式来创建组件,继承React的Component类,
        * 后面我们更多的使用这种方式来创建组件
     */ 
    class Welcome extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return (
                <h1>
                    <p>姓名: {this.props.person.name}</p>
                    <p>年龄: {this.props.person.age} </p>
                </h1>
            )
        }
    }

    const person = {
        name: 'huruqing',
        age: 108
    }
    ReactDOM.render(
        <Welcome person={person} />,
        document.getElementById('root')
    )
</script>

5.props和纯函数

1.相同的输入有相同的输出,输入可以确定输出,这就是纯函数
2.对待props就像对待纯函数一样,遵循可以通过输入确定输出

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

<script type="text/babel">
    // 这是个纯函数,输入什么,得到什么是一定的,同样的输入必定有同样的输出
    const sum = (a, b) => {
        return a + b; 
    }
    sum(2,3); // 5
    sum(2,3); // 5
    
    // 这个函数是不纯的,因为它修改了外部传进来的参数
    let count = 0;
    const getResult = (num) => {
        count++;
      return num*num + count;
    }
        getResult(2); // 5
        getResult(2); // 6
    // 所有的react组件都必须遵守的一条规则: 
    // 对待props就像对待纯函数一样,遵循可以通过输入确定输出
</script>

6.绑定事件

1.事件绑定的函数的this的指向会改变,需要使用bind来绑定函数的指向

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

<script type="text/babel">
    class Demo extends React.Component {
      constructor(props) {
          super(props);
          // 让函数的this指向class的实例
          this.handleClick = this.handleClick.bind(this);
      }

      handleClick (){
        this.getList();
      }
      
      getList() {
          alert('获取列表数据');
      }

      render() {
        return (
            <div>
                <button onClick={this.handleClick}>
                click
              </button>
            </div>
        );
      }
    }

ReactDOM.render(
    <Demo />,
    document.getElementById('app')
)
</script>

2.事件传参的方式
react可以在{} 里面执行一个函数的调用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
    class Demo extends React.Component {
        constructor(props) {
            super(props);
            this.toDetail = this.toDetail.bind(this);
        }

    toDetail(id) {
        console.log(event);
        alert(id);
    }

    render() {
        return (
            <div>
                <ul>
                    <li> <button onClick={() => {this.toDetail(1001)}}>电影1</button> </li>
                    <li> <button onClick={() => {this.toDetail(1002)}}>电影2</button> </li>
                    <li> <button onClick={() => {this.toDetail(1003)}}>电影3</button> </li>
                </ul>
            </div>
        )
    }
}

ReactDOM.render(
    <Demo />,
    document.getElementById('root')
)
</script>

7.列表渲染

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>
</body>

</html>

<script type="text/babel">
  class List extends React.Component {
   constructor(props) {
     super(props);
   }

   render() {
    let heroList = this.props.heroList;
    return (
      <ul>
        {heroList.map(hero =>{
            return (
                <li key={hero.id}>
                  {hero.heroName} -- {hero.role}
                </li>
              )
            }
        )}
      </ul>
    )
   }
}

const heroList = [
  {id: 1, heroName: '亚瑟', role: '战士'},
  {id: 2, heroName: '牛魔王', role: '战士'},
  {id: 3, heroName: '鲁班七号', role: '射手'}
];

ReactDOM.render(
<List heroList={heroList} />,
  document.getElementById('root')
);   

</script>

8.条件渲染

1.通过 if 来控制渲染内容

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
   <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
   <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
   <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

<script type="text/babel">

class Welcome extends React.Component {
   constructor(props) {
       super(props);
   }

   render() {
       // 使用if else判断变量isLogin的值来决定显示什么内容
       if (this.props.isLogin) {
           return (
               <h1>欢迎回来, <button style={{color: 'blue'}}>退出登录</button></h1>
           )
       } else {
           return (
               <h1>你还没登录, <button  style={{color: 'red'}}>请登录</button></h1>
           )
       }
   }    

}

ReactDOM.render(
   <Welcome isLogin={false}/>,
   document.getElementById('app') 
)
</script>

2.通过三目运算符来判断
使用三目运算符判断变量isLogin的值来决定显示什么内容

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>三目运算符</title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="app">

  </div>
</body>

</html>

<script type="text/babel">

class Welcome extends React.Component {
   constructor(props) {
       super(props);
   }

   render() {
       /**
       * 通过变量isLogin来决定显示什么内容
       * 使用三目运算符(内容较短用三目运算符)
       * 再长一点用上面if else的方式
       * 更长的内容封装成一个组件更合适
       */
      return (
        this.props.isLogin?
        <h1>欢迎回来, <button style={{color: 'blue'}}>退出登录</button></h1>:
         <h1>你还没登录, <button  style={{color: 'red'}}>请登录</button></h1>
      )
   }    

}

ReactDOM.render(
   <Welcome isLogin={true}/>,
   document.getElementById('app') 
)


</script>

3.通过与运算符 && 进行控制
相当于if没有else的情况

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>三目运算符</title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="app">

  </div>
</body>

</html>

<script type="text/babel">

class Welcome extends React.Component {
   constructor(props) {
       super(props);
   }

   render() {
       /**
       * 如果值为true就显示,为false不显示,相当于vue的v-show
       */
      return (
        this.props.show && 
          <p>
            React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram
            的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
          </p>
      )
   }    

}

ReactDOM.render(
   <Welcome show={true}/>,
   document.getElementById('app') 
)
</script>

9.this.state和this.setState

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>三目运算符</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
     <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
     <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

<script type="text/babel">

class Welcome extends React.Component {
   constructor(props) {
       super(props);
    // state的初始值
    this.state = {
         show: true
    }
    this.toggleMsg = this.toggleMsg.bind(this);
   }

toggleMsg(flag) {
  // 修改state里show的值
    this.setState({
        show: flag
   })
}

   render() {
      return (
        <div>
        <button onClick={()=> {this.toggleMsg(true)}}>显示</button>
        <button onClick={()=> {this.toggleMsg(false)}}>隐藏</button>
        <hr />
        {this.state.show && 
                <p>React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC       
                      框架,都不满意,就决定自己写一套,用来架设 Instagram
                      的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
                  </p>
        }
        </div>
      )
   }    
}

ReactDOM.render(
   <Welcome />,
   document.getElementById('app') 
)
</script>

10.样式和属性

1.class使用className代替
2.style需要用{{}},外面的{}代表这是js代码,里面的{}则是个js对象
3.属性是个变量加上{}即可

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
     <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
     <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
     <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <style>
        .green {
            color: green;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
    let bg = '#999';
    let imgUrl = 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1598000148,3084276147&fm=58&s=36F6EC36C8A47E92227DC7C502007026';

    ReactDOM.render(
        <div>
            <p style={{backgroundColor: bg,width: '200px'}}>hello react</p>
            <p className="green">我的react</p>
            <img src={imgUrl}/>
        </div>,

        document.getElementById('root')
    )
</script>

11.生命周期

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
    /**
 * react的生命周期分成三种
 * 1. mount 挂载
 * 2. update 更新
 * 3. unmount 卸载
 */

 class Hello extends React.Component {

    componentWillMount() {
        console.log('即将挂载');
    }

    componentDidMount() {
        console.log('已挂载');
    }

    componentWillUpdate(nextProps, nextState) {
        console.log('将要更新');
    }

    componentDidUpdate(prevProps, prevState) {
        console.log('更新完毕');
    }

    // 默认每一次的修改都触发页面更新,此函数用于干预是否要更新,用于性能优化,
    shouldComponentUpdate(nextProps, nextState) {

    }

    componentWillUnmount() {
        console.log('将要卸载');
    }

    render() {
        return <div>生命周期</div>
    }
 }

ReactDOM.render(
  <Hello name="world"/>,
  document.getElementById('root')
);
</script>

12.表单

1.单个input标签输入,让输入的数据与react数据流同步

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>
</body>

</html>

<script type="text/babel">

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('你输入的用户名是: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <p>
          用户名:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </p>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
)
</script>

2.多个input表单输入
如果有多个input标签输入,我们是否需要为每一个input绑定一个事件呢,会不会太麻烦了,
其实不用,我们可以像下面这样来处理

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: 'huruqing',
      password: 123456,
            msg: ''
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
            <div>
                 <form>
                        <label>
                            用户名:
                            <input
                                name="username"
                                type="text"
                                value={this.state.username}
                                onChange={this.handleChange} />
                        </label>
                        <br />
                        <label>
                            密码:
                            <input
                                name="password"
                                type="text"
                                value={this.state.password}
                                onChange={this.handleChange} />
                        </label>
                    </form>
                    <p>
                        你输入的用户名是: {this.state.username} <br/>
                        你输入的密码是:   {this.state.password}
                    </p>
            </div>
    );
  }
}

ReactDOM.render(
  <Reservation />,
  document.getElementById('root')
)
</script>

13.获取真实的DOM节点

通过ref可以获取真实dom节点,需要确保节点已经挂载

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
    class MyComponent extends React.Component {
        constructor(props) {
            super(props);
            this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
            this.refs.myTextInput.focus();
        }
        render() {
            return (
                <div>
                    <input type="text" ref="myTextInput" />
                    <input type="button" value="获取焦点" onClick={this.handleClick} />
                </div>
            )
        }
}

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

14.this.props.children

this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

<script type="text/babel">
class NotesList extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
    }
}

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);
</script>

参考:
React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html
React中文文档 https://react.docschina.org/docs/hello-world.html

2016-05-11 19:55:11 baidu_16051437 阅读数 6974
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2123 人正在学习 去看看 梁富城

学习react的一些感悟

ps:本文列出的教程都是中文版 如果你英语不错 建议看英文原版教程!!

react

学习react有段时间了 总结了一下经验


学习前 你必须先掌握的知识


开发环境建议linux或者mac osx


开发工具

sublime text3或者webstrom或者atom

webpack

npm

babel

firefox或者chrome

cnpm


还有一些与reactredux有关的chrome调试插件 自己翻墙去chrome商店搜索下面的名字下载

React Developer Tools

Redux DevTools


编程语言相关

html

js

css

js es6

函数式

mvc

nodejs

jsx


react的相关组件

react 相关的组件

react

react-native

material-ui

react-router

react-canvas

react-starter-kit

redux

antd


组件相关的中文教程

react

redux

antd

react-router


函数式编程是重点 好好学!

2018-05-16 19:30:23 shirleyqdd 阅读数 494
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2123 人正在学习 去看看 梁富城

初学react总结:
react的最大优点:
1、组件化
类似于web component的组件封装,面向未来。
可复用,可组合的组件框架
2、虚拟dom(virtual dom)
虚拟dom与直接innerhtml的比较:
innerHTML: render html string + 重新创建所有 DOM 元素
Virtual DOM: render Virtual DOM + diff + 必要的 DOM 更新
简单通俗来讲:在我们数据有变动时,不直接全部重新渲染dom结构,而是先在
虚拟dom进行修改,在让虚拟dom与真实dom进行比较,只将有数据改动的dom进行
修改。
3、JSX语法
JSX 是 JavaScript 语言的一种语法扩展,遇到html标签,按照html规则进行
解析;遇到代码块,就按照javasript规则进行解析。



react的学习目录
一、安装
二、HTML如何引入react
三、ReactDOM.render()语法
四、JSX语法
五、组件(component)
1、render方法
1、props
2、proptypes
3、state/setState
六、虚拟DOM(Virtual DOM)
七、表单
八、组件的生命周期
九、如何实现ajax请求获取数据来源



react的学习内容
一、安装
react.js全家桶概念:
1⃣️主体:开发、生产阶段都需要一堆工具和库辅助,编译需要借助babel;
2⃣️redux:--??(待完善)
3⃣️react-router:使用React Router路由控制跳转 (待完善)

安装步骤:
安装node=》
npm install -g create-react-app=》
create-react-app hello-react=》
cd hello-react
npm start=》

终端会提示成功!

二、HTML如何引入react

react 是一定要引入三个js文件:

<head>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./browser.min.js"></script>
</head>
react.js:这个是react的技术主体,是核心库
react-dom.js:提供与DOM相关的功能,其react-dom的核心功能就是把这些虚拟Dom渲染到文档中变成实际dom
browser.min.js:browser.js在浏览器端转换jsx文件
由于browser.min.js文件太大,可以用CDN链接加载https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js


三、ReactDOM.render()语法
ReactDOM.render()是将我们用的模版转为HTML语言,并插入到指定的dom节点

趣味理解-例如:
ReactDOM.render(
模板(什么东西)
dom节点(要到哪里去)
);
实例:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
四、JSX语法
什么是JSX?是增强型的js语法-html代码直接放js里。用babel专门编译JSX

注意事项:
1⃣️有且仅有一个父元素

例如:

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);


/**在react中用map可以进行遍历*/



五、组件(component)
什么是组件?组件可以使我们项目中将UI划分为一个一个独立的,并且可复用的小部件,
并且可以对每一个部件进行单独的设计。

1⃣️生成组件类:React.createClass 方法就用于生成一个组件类
例如:var HelloMessage = React.createClass({});

2⃣️输出组件:每一个组件类都必须要有自己的render方法
例如:render: function() {
return (jsx表达式);
}

3⃣️组件使用:模板中直接作为标签名(标签必须闭合,自闭合和配套闭合都可以)使用,自定义标签必须大写


5.1、render方法
输出组件:每一个组件类都必须要有自己的render方法

例如:

render: function() {

return (jsx表达式)
}

或:

render () {
const 定义常量
return (jsx表达式)
}

简而言之,在render{}内可以放入任何的javascript的代码,包括变量、表达式计算、函数执行等等。
render会把这些代码返回的内容如实的渲染到页面上,非常的灵活。

render中返回三目运算符用法如下:

render () {
const isRedColor = true
return (
<div>
<h1>
这个颜色
{isRedColor
? <strong> is red</strong>
: <span> is not red</span>
}
</h1>
</div>
)
}


5.2、props
我理解成,props是组件之间传递数据的媒介。
组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,
所以可以把props理解为从外部传入组件内部的数据。
由于React是单向数据流,所以props基本上也就是从服父级组件向子组件传递的数据。

例如:

var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Danile" />,
document.getElementById('example')
)

若想设置默认的props的值,可以用getDefaultProps()

例如:

getDefaultProps: function() {
return {
name: 'Runoob'
};
},

注意1⃣️:this.props 对象的属性与组件的属性一一对应,但是有一个例外,
就是 this.props.children 属性。它表示组件的所有子节点。

例如:

var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});

ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
输出结果:
1.hello
2.world


注意2⃣️:class 属性需要写成 className ,for 属性需要写成 htmlFor ,
这是因为 class 和 for 是 JavaScript 的保留字


5.3、proptypes
proptypes是什么?Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,
React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。

例如:

var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},

render: function() {
return <h1> {this.props.title} </h1>;
}
});
代码含义:有一个MyTitle的组件,在MyTitle这个组件上有一个title属性。propTypes告诉react,
这个title属性是必须存在的,并且必须是string类型。

若现在,我们给MyTitle的这个组件中的title设置了数值型或者null;

var data = 123;

ReactDOM.render(
<MyTitle title={data} />,
document.body
);

控制台显示:Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
意思是:告知title这个属性是数值型不通过验证。

想要了解更多propType验证器:http://www.css88.com/react/docs/typechecking-with-proptypes.html

5.4、state/setState
什么是state?组件免不了要与用户互动,就是将组件看成是一个状态机,一开始有一个初始状态,
然后用户互动,导致状态变化,从而触发重新渲染 UI。

由刚才5.2介绍,若想设置默认的props的值,可以用getDefaultProps()。
同理,若想设置一个初始的状态,我们可以用getInitialState。

1⃣️state和props的区别:
一个组件的显示形态可以由数据状态和外部参数所决定,外部参数也就是props,而数据状态就是state。

2⃣️state和setState的区别:
state不同于props的一点是,state是可以被改变的。不过,不可以直接通过this.state=的方式来修改,
而需要通过this.setState()方法来修改state。

用法例如:

var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});

ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
代码含义:有LikeButton这个组件,getInitialState方法用于定义初始状态,
此处定义了一个初始的方法{liked: false};这个方法也就是一个对象,这个对象
可以通过this.state去被读取。
handleClick()此处就是用户交互行为,数据会进行变化,所以this.setState 方法就修改状态值,
每次修改以后,自动调用 this.render 方法,再次渲染组件。


六、虚拟DOM(Virtual DOM)
什么是虚拟DOM?
React中,先将真实的DOM抽象成一个JavaScript对象,也就是虚拟DOM。

React中虚拟DOM原理
在React中,也有一个render函数来将虚拟DOM树,并且,React中有state转移的过程,所以每次state有变化之后,
就会触发render函数,重新构造一个虚拟DOM树。对比新旧虚拟DOM树的差别,记录下差异,然后只针对差异部分对应的真实DOM进行操作。 

如何进行新旧虚拟DOM树的对比呢? 
这里采用的是Diff算法。Diff算法比较复杂,主要的思路是这样的。 
首先,每一次生成的虚拟DOM树上的各个节点都对应唯一的一个id,当第二次生成了新的DOM树时,对原来树上的每一个节点对比新树上对应节点,
如果不同,就记录下来这个差异。同时,差异也分为很多种:
替换节点;
修改属性;
对文本内容修改
移动、删除、增加节点; 

想详细了解虚拟dom:https://www.zhihu.com/question/29504639


七、表单
此处引入两个概念:受控组件和非受控组件
受控组件:
<input><select>都要绑定一个change事件;每当表单的状态发生变化,都会被写入组件的state中,这种组件在React中被称为受控组件;
在受控组件中,组件渲染出的状态与它的value或者checked prop向对应.react通过这种方式消除了组件的局部状态,是的应用的整个状态可控.
react官方同样推荐使用受控表单组件,总结下React受控组件更新state的流程:

1.可以通过初始state中设置表单的默认值;
2.每当表单的值发生变化时,调用onChange事件处理器;
3.事件处理器通过合成事件对象e拿到改变后的状态,并更新应用的state.
4.setState触发视图的重新渲染,完成表单组件值得更新

例如:

<input
type="text"
value={this.state.value}
onChange={(e) => {
this.setState({
value: e.target.value.toUpperCase(),
});
}}
/>

非受控组件:
1.如果一个表单组件没有value props(单选按钮和复选按钮对应的是 checked props)时,就可以称为非受控组件;
2.使用defaultValue和defaultChecked来表示组件的默认状态;
3.通过 defaultValue和defaultChecked来设置组件的默认值,它仅会被渲染一次,在后续的渲染时并不起作用

介绍一下表单中的ref:
ref:
用于获取真实的DOM节点。获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。
为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

八、组件的生命周期

1、生命周期的三个状态
Mounting: 已插入真实 DOM
Updating: 正在被重新渲染
Unmounting: 已移出真实 DOM

2、React为每个状态提供两种处理函数,will(进入状态前调用)/did(进入状态后调用),共5个处理函数
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

3、React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用


周期流程状态:
getinitialstate() ==》 componentWillMount() ==》 Mounting render() ==》 componentDidMount()

state改变 ==》 shouldComponentUpdate()==》true ==》 componentWillUpdate() ==》 Update render() ==》 componentDidUpdate()
                                || 
                                ||指向上
父组件改子组件 componentWillReceiveProps


九、如何实现ajax请求获取数据来源
组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,
等到请求成功,再用 this.setState 方法重新渲染 UI。

当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

例如:

var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},

componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},

componentWillUnmount: function() {
this.serverRequest.abort();
},

render: function() {
return (
<div>
{this.state.username} 用户最新的 Gist 共享地址:
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
});

ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
mountNode
);

具体代码和运行效果可以看:http://www.runoob.com/react/react-ajax.html


2018-06-28 10:37:33 a990859 阅读数 109
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2123 人正在学习 去看看 梁富城
第1章 课程预热
React 与 React Native的区别,为什么学习 React Native。

第2章 初识 React Native
快速搭建一个 React Native,了解 RN 的项目代码结构。

第3章 RN 入门知识学习
学习React 的组件概念,ES5/ES6 两种组件形态,父子组件通信以及组件生命周期。

第4章 升级 React Native 重要补录
这一章节是讲师针对课程上线以来,学生的常见问答,讲师做了一些总结补充视频。

第5章 项目初始准备
作为实战编程的上手篇,需要又快又猛的串联起来前后端,首先评审课程要实现的 App 视觉效果,形成项目推进的思路,制定 App 开发计划,然后搭建项目原型框架,开发 App 首页视图结构,同时利用 Rap 服务来模拟无后台的 HTTP API 接口,以及 Mockjs 加工生成伪数据。...

第6章 开发视频配音页面
开发 App 的核心业务功能 – 视频配音页面,学习在 RN 中选取本地的视频文件,上传到七牛,控制录音过程,上传录音到云空间,同时在后台了解如何在 Koa 中抽象中间件,以及利用 Mongoose来建立各种对应的视频,音频数据模型,存储视频和音频并且封装回调的请求为 Promise ,通过各种异步的过程来检查,最终合并...

第7章 RN 知识进阶串讲
以第五章为基础,来拔高技能点升级技能树,学习 Flexbox 的各种布局知识,批量了解 RN 的30 多个组件的功能和基本使用方式,演示如何使用 RN 的异步存储模块,并且了解如何甄选生态圈里面的第三方组件,最终研究下如何把本地的 RN 项目安装到手机里面运行。...

第8章 App 内注册登录
精讲在 RN 里面实现注册登录页面,如何发出注册请求,以验证码的方式实现登录过程,如何管理应用中的登录状态;

第9章 用户账户页面
精讲在 RN 里面调用本地的相机以及选取相册的照片,构建 FormData 来 XHR 异步上传图片,监控图片上传进度,以及用户的基本资料的编辑和保存,以及用户的退出登录功能。

第10章 用 Koa 开发本地 API 后台
基于前八章构建的 App 原型,首先安装 MongoDB 数据库,利用 Koa 框架搭建 Nodejs 后台项目,配置接入 MongoDB 数据库,为 App 提供各种 API 接口,比如在后台发送短信验证码,同时了解使用 DHC 插件快速验证接口正确性,最后在后台实现图床的签名,异步返会给 App 作为票据上传到 Cloudinary 或者 七...

第11章 开发视频配音页面
开发 App 的核心业务功能 – 视频配音页面,学习在 RN 中选取本地的视频文件,上传到七牛,控制录音过程,上传录音到云空间,同时在后台了解如何在 Koa 中抽象中间件,以及利用 Mongoose来 建立各种对应的视频,音频数据模型,存储视频和音频并且封装回调的请求为 Promise ,通过各种异步的过程来检查,最终...

第12章 App 上线准备工作
在 App 初步开发结束后,各种上线前的准备工作,比如制作导出不同尺寸的应用图标,启动画面,介绍 App 的轮播图,以及打包编译和导出用来内测的安装程序;

第13章 二期课程--初识 Redux 框架 [二期部分查找中]
初识 Redux 框架,React 蛋疼的数据通信,理解 Redux 的工作原理和基本用法。

第14章 二期课程--React Native 升级到 0.42.3 [二期部分查找中]
获取 1 期源码进行升级降级。

第15章 二期课程--兼容开发 Android App [二期部分查找中]

兼容开发 Android App

下载地址:百度网盘

2016-03-24 15:25:25 u013531824 阅读数 422
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    2123 人正在学习 去看看 梁富城

React特点
1. Just The UI : 视图
2. 虚拟DOM: 将差异部分进行更新渲染
3. Data Flow: 单向数据流

学习React需要掌握的知识
1. JSX语法知识
2. ES6相关知识
3. 前端基础知识

React的开源项目地址 :
https://github.com/facebook/react

开发工具
WebStorm : 付费应用,有30天的免费试用

React 0.14.0版本以下开发所需文件下载
1. react.js : 是React的核心文件
2. JSXTransformer.js : 是将JSX翻译成JavaScript和HTML的工具

React框架更新带来的问题
jsx最新版本已经去掉了JSXTransformer.js
解决办法 :
http://www.imooc.com/qadetail/107560
http://www.tuicool.com/articles/NFvYfeB
替换掉React-native和JSXTransformer.js 使用babel

React学习小记

阅读数 431

React学习先导篇

阅读数 42

没有更多推荐了,返回首页