React的基本使用

一、初始化和安装依赖

①建立项目文件夹

mkdir react-demo
cd react-demo

②在项目里执行命令：初始项目

npm init -y

③安装相关依赖

npm install --save react react-dom @babel/standalone

• react是核心库
• react-dom是操作dom的库
• @label/standalone

    <p>@babel/standalone可以在浏览器中调用babel的api完成ES6-ES5的转换</p>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <!-- 正常模式：浏览器调用babel提供的转换api完成编译转换，得到结果字符串 -->
    <script>
        var input = 'const getMessage=()=>"hello world";'
        var output = Babel.transform(input,{presets:['es2015'] }).code;
        //console.log(output);
        /*"use strict";

            var getMessage = function getMessage() {
            return "hello world";
            };
        */
        // 使用evel可以使字符串执行
        window.eval(output);
    </script>
    <!-- 简单模式：babel自动编译执行，可以返回结果 -->
    <script type="text/babel">
        const getMessage=()=>"hello world";
        console.log(getMessage());//hello world
    </script>

二、输出helloworld

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        // react的核心理念就是：组件化，不支持管理DOM模板，必须把所有的模板都放到组件中
        // 这种将html和 JavaScript混写的方式叫做JSX语法，该语法必须通过babel编译浏览器才能执行
        // 将一个h1标签渲染到指定的页面入口中
        ReactDOM.render(<h1>hello world</h1>,document.getElementById('app'))
    </script>