react初体验

react的引入

关于react的引入，其实和JavaScript的引入方式差不多，相信前来观看的小伙伴，对于引入应该是没有太大的问题。具体的引入方式，请见官网文档：https://react.docschina.org/docs/cdn-links.html

第一个react程序

 <div id="example"></div>

<script type="text/babel">
ReactDOM.render(
    <h1>Hello,world</h1>,
    document.getElementById('example')
);
</script>

在写完第一个react程序后，相信很多小伙伴发现了他的特殊之处，JavaScript的语法内，居然混入了html的代码，这操作属实给刚学的我整不会了。不过在深入了解以后，就慢慢适应了他的这种神仙写法。

react元素渲染

（1）对于元素这个词，大家可能会感到有些陌生。元素是构成react的最小单位，用于描述屏幕上输出的内容。

const element = <h1>Hello, world!</h1>;

（2）创建一个dom元素

<div id="example"></div>

（3）将元素渲染到dom中

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

jsx:语法拓展

react使用jsx来代替常规的JavaScript，极大的简化了react的代码结构

.foo{
            color: red;
        }

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

 <script type="text/babel">
    const element=<h1 className="foo">hello world</h1>;
    ReactDOM.render(element,document.getElementById("root"));
    </script>

关于上述代码的流程，可以看作为：在react中，利用const定义了一个element的常量，用来接收<h1 className="foo">hello world</h1>;然后通过react的内置render将接事先定义好的值传递出去，其中第一个参数代表的是将谁传递出去，第二个参数就是将参数传递到哪里去。

小结

关于react，本人推荐可以去bilibili搜索一下黑马程序员的react的视频讲解，整体感觉还是蛮不错。搭配react的官方文档能够很快上手，本人编写文档也仅仅只是为了巩固一下学习的情况，如有问题请多多包涵，欢迎各位大佬，指正我文章中的不足。