React入门
2021-04-28 本文已影响0人
LXEP
官网
React的基本使用
相关的React库
可以使用CDN的方式引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个react程序</title>
<!-- 引入react库 -->
<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
<!-- 引入Babel，用于将jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<!-- 这里一定要写babel -->
<script type="text/babel">
// 创建虚拟DOM
const VDOM = <h1>Hello, React!</h1>
// 将虚拟DOM渲染到页面上
ReactDOM.render(VDOM, document.getElementById('root'));
</script>
</body>
</html>
效果如下：
效果
我们看到一个warning，是提示我们你正在使用babel编译器，不要在生产环境这样使用。因为，在这里浏览器解析到
<script type="text/babel">才发现，使用的不是js，而是jsx，所以需要进行先编译再执行，如果代码很多就会出现编译很慢，会有长时间的白屏时间。
这里是CDN 的使用方式，学习时可以采用。
脚手架工具Create React App
你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目，请执行：
npx create-react-app my-app
cd my-app
npm start
第一行的
npx不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。
