React的安装和基本使用

1. 初始化和安装依赖

   • 建立项目文件夹

     mkdir react-demo
     cd react-demo
     

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

     npm init -y
     

   • 安装相关依赖

     # react是核心库
     # react-dom是操作dom的库
     # @label/standalone 是语法转换
     npm install --save react react-dom @babel/standalone
     

   • @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>
     

2. 输出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>
   

3. 扩展：Create React App的使用

   • 安装

     # npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具
     npx create-react-app my-app
     

   • 启动

     cd my-app
     npm start
     

   • 预览