简介

757字约3分钟

2024-11-13

React是什么

用于构建 Web 和原生交互界面的库

注意

React推荐函数式编程

为什么 React 现在要推行函数式组件，用 class 不好吗？

使用React

通过src引用React

详情

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
    
      function MyApp() {
        return <h1>Hello, world!</h1>;
      }

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      // 挂载组件到root标签下
      root.render(<MyApp />);

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this page for starting a new React project with JSX:
      https://react.dev/learn/start-a-new-react-project

      Read this page for adding React with JSX to an existing project:
      https://react.dev/learn/add-react-to-an-existing-project
    -->
  </body>
</html>

通过框架创建 React 项目

生产级的 React 框架

Next.js

Next.js 是一个全栈式的 React 框架。它用途广泛，可以让你创建任意规模的 React 应用——可以是静态博客，也可以是复杂的动态应用。要创建一个新的 Next.js 项目，请在你的终端运行：

npx create-next-app@latest

Remix

Remix 是一个具有嵌套路由的全栈式 React 框架。它可以把你的应用分成嵌套部分，该嵌套部分可以并行加载数据并响应用户操作进行刷新。要创建一个新的 Remix 项目，请运行：

npx create-remix

Gatsby

Gatsby 是一个快速的支持 CMS 的网站的 React 框架。其丰富的插件生态系统和 GraphQL 数据层简化了将内容、API 和服务整合到一个网站的过程。要创建一个新的 Gatsby 项目，请运行：

npx create-gatsby

Expo（用于原生应用）

Expo 是一个 React 框架，可以让你创建具有真正原生 UI 的应用，包括 Android、iOS，以及 Web 应用。它为 React Native 提供了 SDK，使原生部分更容易使用。要创建一个新的 Expo 项目，请运行：

npx create-expo-app

React 常用脚手架

Create React App (官方脚手架)

# 安装
npx create-react-app

# 创建项目
npx create-react-app my-app

Umijs (蚂蚁金服脚手架)

# 安装
npx create-umi@latest

# 从 @umijs/electron-template 创建一个 electron 模板
npx create umi --template electron

Icejs (阿里巴巴脚手架)

# 安装
npx create-ice@latest

# 创建项目
npm init ice <projectName>

icejs 与 Next.js、UmiJS 之类的框架有什么区别？

icejs、Next.js、UmiJS 以及基于 React 的 Nuxt.js 都是同一个层面的解决方案，而这些方案基本都有受 Next.js 启发。各个框架除了功能实现上有些许差异外，更多是不同团队有不同的最佳实践以及设计原则，开发者可以结合自身的功能诉求以及最佳实践做选择。