React系列，初识

学习react对于新手来说，还没有学react往往就会被webpack，npm等搞的晕头转向，所以我们今天就从最简单的方式入手

<script src="react.js"></script>     //核心文件

<script src="react-dom.js"></script>      //用于渲染dom节点

首先在页面中引入这2个文件

<div id="box"></div>

<script src="react.js"></script>

<script src="react-dom.js"></script>

<script type="text/javascript">

	ReactDOM.render(     //核心方法，接收三个参数，

             "hello",              //1，内容

              document.body,  //2，接收的容器

              function(){        //3，渲染完成的回掉

                   console.log("render done");

              }

        );

        //Uncaught Error: ReactDOM.render(): Invalid component element. Instead of passing a string like 'div', pass React.createElement('div') or <div />.

</script>

调用react的核心方法ReactDOM.render方法，运行后，我们发现程序报错了，错误信息的意思就是，我们不能用像‘div’这样的字符串作为内容的参数，我们可以用像React.createElement('div')或者</div>这种标签的形式(标签的形式其实就是jsx语法)

我们先试一试第一种方式

var RDom = React.createElement('h2');

console.log( RDom );

ReactDOM.render(

    RDom,

    document.body

)

//Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.

这时候我们发现h2这个标签确实是被渲染进了body里面，但是控制台报了一个警告信息，大概意思就是不能用body作为容器

var RDom = React.createElement('h2');

ReactDOM.render(

    RDom,

    document.getElementById("box")

)

这时候我们发现警告信息没有了，且div里面渲染进了一个h2标签，其实React.createElement()；是接收三个参数的，第一个参数表示标签，第二个参数表示传的参数，第三个参数表示标签里面的内容

var RDom = React.createElement('h2',null,'sadfisdfisd');

ReactDOM.render(

    RDom,

    document.getElementById("box")

)

那如果我们想在h2标签中创建一个div呢

var RDom = React.createElement('h2',null,React.createElement('div',null,'我是div'));

ReactDOM.render(

    RDom,

    document.getElementById("box")

)

我们看到是这种层层嵌套的关系，那如果有十层八层的写起来就太麻烦了，这时候就该jsx语法上场了

铛铛铛。。。。

<script src="browser.min.js"></script>

在页面中引入brower.js，它就是将jsx语法编译成js

同时我们要修改script标签中的type属性，像这样

<script type="text/babel">

我们来看看jsx的威力

ReactDOM.render(

    <h2>

            <div title="123">

                     <div>我是jsx语法创建的</div>

            </div>

    </h2>,

    document.getElementById("box")

)

就是如此简单，像写html一样

巴特西

React系列，初识

最新文章

热门文章