React入门

官网

英文官网
中文官网

React的基本使用

相关的React库

  • React - React 核心库
  • React DOM - 支持React操作DOM
  • Babel - JavaScript编译器,允许我们在旧浏览器中使用ES6+

可以使用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 运行工具

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容