【青训营】- React · hello world想要快速搭建React应用的两种方法: 网页中引入js脚本, 直接

想要快速搭建React应用的两种方法:

网页中引入js脚本, 直接在浏览器中编写代码
使用react脚手架, 搭建本地开发环境

方式一：在浏览器中编写代码

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <!-- React, ReactDOM -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <!-- JSX type类型 -->
  <script type="text/babel">
      // JSX => React.createElement(...)
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
  </script>
</body>
</html>

tips1: 要使用jsx, 则script标签需要加上type=text/babel
tips2: JSX => React.createElement (React17之前一定要引入React)

codepen

方式二：搭建本地开发环境

npx create-react-app my-app
cd my-app
npm start

tips: 你可能关心的配置项:

create-react-app
stackblitz