一、初始化和安装依赖
①建立项目文件夹
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>