快速开始

文档

学习一个框架，比较高效的方式是先读官方文档，下面是英文和中文的文档，可以先收藏

TIP

英文：点击进入

中文：点击进入

说明

写本文档的时候，我们默认读者已经具备以下知识

TIP

1.HTML、CSS、JS 基础

2.ES6+

3.Vue 全家桶

React 是干什么的？

React 是一个用于构建用户界面的 JavaScript 库，在前端开发领域，React 和 Vue 是非常常用的框架，都有各自的生态，在学习了 Vue 框架以后，再来学习 React，效率会很高

Hello World

第 1 步，先创建项目，以下是我电脑上的项目目录结构，我们先不使用 react 的脚手架，而是直接使用最简单的方式来使用 react，排除一些脚手架信息，专注 react 基础语法学习

20230402104826

TIP

开发 react 需要依赖的几个包

react：包含 react 的核心代码

react-dom：包含 react 渲染不同平台的核心代码

babel：编译 jsx 语法

第 2 步，直接使用官方的案例运行

index.html

html

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- This setup is not suitable for production. -->
  <!-- Only use it in development! -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script
    async
    src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"
  ></script>
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react?dev",
        "react-dom/client": "https://esm.sh/react-dom/client?dev"
      }
    }
  </script>
  <script type="text/babel" data-type="module">
    import React, { StrictMode } from 'react'
    import { createRoot } from 'react-dom/client'

    function Greeting({ name }) {
      return <h1>Hello, {name}</h1>
    }

    let App = function App() {
      return <Greeting name="world" />
    }
    // 获取到根组件
    const root = createRoot(document.getElementById('root'))
    // StrictMode 是一个用来检查项目中潜在问题的工具 只在开发模式下运行
    root.render(
      <StrictMode>
        <App />
      </StrictMode>
    )
  </script>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
      margin: 20px;
      padding: 0;
    }

    h1 {
      margin-top: 0;
      font-size: 22px;
    }

    h2 {
      margin-top: 0;
      font-size: 20px;
    }

    h3 {
      margin-top: 0;
      font-size: 18px;
    }

    h4 {
      margin-top: 0;
      font-size: 16px;
    }

    h5 {
      margin-top: 0;
      font-size: 14px;
    }

    h6 {
      margin-top: 0;
      font-size: 12px;
    }

    code {
      font-size: 1.2em;
    }

    ul {
      padding-left: 20px;
    }
  </style>
</html>

上面代码中涉及到的知识点解析

INFO

1.通过 script 去加载远程的 babel 文件： babel.min.js

2.script async 异步加载文件

3.import-maps 表示使用 Json 的形式来定义浏览器中的全局模块

4.在浏览器中使用 babel，需要把 type 设置成 text/babel，如果要原生支持 es module，需要加上 data-type 属性，官网文档有说明：点击进入

第 3 步，运行看效果，我们使用 live-server 来运行代码，这里默认你使用的是 vscode 来编写代码，你需要去安装一个 live-server 的插件

20230402112808

安装好以后，右键运行即可

20230402112847

到此为止，我们的运行环境已经搞定，下面是浏览器中的效果

20230402112922

快速开始 ​

文档 ​

说明 ​

React 是干什么的？ ​

Hello World ​

快速开始

文档

说明

React 是干什么的？

Hello World