React系列，初识

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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

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

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

<div ></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系列，初识 的全部内容， 来源链接： utcz.com/z/384387.html

回到顶部