react的”Hello World ！“

本文主要简述react的开始使用

1.引入js文件

<!-- 1.核心文件 -->

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <!-- 2.操作的DOM -->

    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- 3.翻译器 将浏览器不识别的JS（es7，es8）语法转化为识别的es5   JSX语法 翻译成浏览器识别的语法 -->

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

2.整体代码

<body>

    <!-- react布局容器 -->

    <div id="app"> </div>

    <script type="text/babel">

        // render(布局，容器)

        ReactDOM.render(<h1>hello world !</h1>,

            //在哪个容器中使用

            document.querySelector("#app")

        )

    </script>

</body>

这样，hello world !就会显示在页面上啦！

3.进一步和注意事项

script中的type一定要写type=”text/babel“

<body>

    <div id="app2">乌拉</div>

    <script type="text/babel">

        ReactDOM.render( <div><h1>新闻标题</h1>

             <p>乌克兰的总统是个好演员</p>

             <hr/>{    //单表签一定要加"/",不然直接报错

                       //JSX语法中<  </ 识别为html解析的开始和结束

                    }

             <p>注释{

                        // 这样写单行注释

                        // JSX{}识别为JS

                        // 单括号语法 里面可以写表达式

                         /*

                            段落注释    多行注释

                        */

                        }

                        </p>

        </div>,app2)

        // 布局比较复杂的时候 用（）包起来 简洁 方便阅读

        // react和vue2使用组件一样，必须有唯一的根元素，即有<div></div>包裹

        // 在app2中有内容的情况下，内容会被覆盖掉

    </script>

</body>

4.上方代码简写

上方3的代码越多，看起来越复杂，越紊乱，可以用变量将html接收一下

<body>

    <div id="app2">乌拉</div>

    <script type="text/babel">

        //layout 虚拟Dom 一般把虚拟DOM 看作一个js对象(存储了布局的信息)

        let layout=(

             <div><h1>新闻标题</h1>

                 <p>乌克兰的总统是个好演员</p>

                 <hr/>

                 <p>注释 </p>

            </div> )

        ReactDOM.render(layout,app2)

        console.log("lauout:",layout)

        console.log("app2:",app2)

    </script>

</body>

react jsx 虚拟DOM（好像写过了，先有点印象就行...）

1.通过JSX创建虚拟DOM

2.通过 render渲染到界面上成为真正的DOM(diff算法)

巴特西

react的”Hello World ！“

本文主要简述react的开始使用

1.引入js文件

2.整体代码

3.进一步和注意事项

4.上方代码简写

最新文章

热门文章