初识react

今天学习了react,哇咔咔,激动ing

下面带大家来一起认识下react吧!

我们在写react的时候要先引用三个文件分别是

可以通过 以下命令安装

npm install react
npm install react-dom
npm install babel-standalone

写一个react页面分为三步:

1 定义一个虚拟容器存放dom

<div id="my"></div>

2.创建虚拟DOM

var str = React.createElement('div',{className:'div-a'},'123');

3.虚拟DOM渲染,渲染的方式有多种

1.通过react渲染元素

ReactDOM.render(
          str,
          document.getElementById("my")
        )

2.通过JSX渲染元素 

ReactDOM.render(
          <ul>
            <li>11</li>
            <li>22</li>
          </ul>,
          document.getElementById("my")
        );

3.通过JSX渲染元素 (第二种)

var a = true;
        var div = <div className="a">{a?'aaaa':'wwww'}</div>
        ReactDOM.render(
          div,
          document.getElementById("my")
        );

不过上面的写法太麻烦了,我们一般都用组件来写,那么组件的方法是怎么写的呢?

使用ES6 class 来定义一个组件,然后把它给渲染进去 

注:需要注意的是render 里面只能有一个根元素,所以我们要给组件外层在加一个div

class Hello extends React.Component{
          render(){
            return <h1>hello组件</h1>
          }
        };
        ReactDOM.render(
          <div>
            <Hello></Hello>
          </div>,
          document.getElementById("my")
        ); 

提示:在写<script type="text/babel"></script> 一定要加上type="text/babel",否则解析不了

ok 今天就到这里了,是不是感觉敲简单呢?接下来我会为大家分享一个小例子,这是一个很简单的切换的小例子哦,欢迎指正!

html

<div id="my"></div>

js

<script type="text/babel">
    window.onload = function(){
        /*组件*/
         /*定义按钮1*/
        class OneList extends React.Component{
          render(){
            return (
              <div>
                <p>11111</p>
                <p>11111</p>
                <p>11111</p>
                <p>11111</p>
              </div>
            )
          }
         };
         /*定义按钮2*/
        class TwoList extends React.Component{
          render(){
            return (
              <ul>
                <li>22222</li>
                <li>22222</li>
                <li>22222</li>
                <li>22222</li>
              </ul>
            )
          }
         };
        /*定义标题*/
        class TabList extends React.Component{
          constructor() {
            super();       //关键字   父类/子类继承的一种方式,在此处我们并没有用到,也可以不写
            this.state = {  //修改setState
              flag:false
            }   
          };
          btnChange(type){
            if(type=='1'){
              this.setState({flag:true})
            }else {
              this.setState({flag:false})
            }
          };
         
          render(){
            var flag = this.state.flag;
            return (
              <div>
                <ul className="list-ul">
                  <li className={flag ? 'active':''} onClick={()=>this.btnChange('1')}>按钮1</li>
                  <li className={!flag ? 'active':''} onClick={()=>this.btnChange('2')}>按钮2</li>
                </ul>
                <div>
                  {flag ? <OneList /> : <TwoList /> }
                </div>
              </div>
            )
          }
        };
        ReactDOM.render(
          <TabList />,
          document.getElementById("my")
        );
    }

    </script>