Jul 11, 2023 , with read , about 15min.

React应用的创建

#React

CDN Demo 引用

以下是一个在 cdn 中初试 react 的 demo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- core react library -->
        <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
        <!-- react-dom 用于浏览器渲染，react 还可以开发原生应用这时候就依赖react-native -->
        <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
        <title>Hello React!</title>
    </head>

    <body>
        <div id="root"></div>
        <script>
            function App() {
                const [time, setTime] = React.useState(
                    new Date().toLocaleTimeString()
                );
                React.useEffect(function () {
                    setInterval(function () {
                        setTime(new Date().toLocaleTimeString());
                    }, 1000);
                }, []);
                return React.createElement(
                    "header",
                    null,
                    `Hello React! ${time}`
                );
            }
            const root = ReactDOM.createRoot(document.getElementById("root"));
            root.render(React.createElement(App));
        </script>
    </body>
</html>copy success

React 是一个 JS 库， React 的官方说它严格意义上并不是一个框架，它只注重 UI 层面。

React 的执行，依赖两个核心：

react : React 的核心逻辑库
react-dom: React 的渲染逻辑库，它负责将内容渲染到网页中。

React 还可以用于写原生应用，这时候，React 的核心逻辑是一样的，不过渲染库就不再是 react-dom 了。而是 react-native

脚手架

目前 React 的主流创建方式有两种选择：

Create-react-app
create-react-app 是一个官方的用于创建基于 React 的 SPA 应用的 CLI 工具
Vite

利用 Create-react-app 创建 React 应用

利用 create-react-app 最简单地创建一个 react 应用：

npx create-react-app my-app
copy success

--template 参数

--template 参数用于指定模板, 其用法如下：

npx create-react-app my-app --template [template-name]copy success

# 创建 ts 项目
npx create-react-app my-app --template typescriptcopy success

更多的 template，可以在 npm 上搜索 "cra-template-*" 以查看更多

使用不同的包管理工具

要使用不用的包管理工具，只需要在执行 create-react-app 的使用，用不同的包管理工具即可，例如：

# 默认使用npm
npx create-react-app my-app
#使用 yarn
yarn create react-app my-appcopy success

利用 Vite 创建 React 应用

使用 vite 创建 react 应用很简单，只需要：

# 使用pnpm 创建
pnpm create vite
# 然后按需选择工具就可以了copy success