开始使用React

React文档课-开始使用React,本节介绍如何在项目中引入React

Note

本站点包含很多可实时运行的Demo,在PC端阅读将获得更好的体验!

在正式开始使用 React 之前,我们首先需要在我们的项目/页面中引入 React 类库,如此我们才能使用 React 提供的强大的功能。在这里我们称 React 为一个类库(官方也更倾向于此)而非一个框架。React 支持现代互联网 Web 开发中的各种引入方式,在这篇文章中我们会学习到:

直接通过 JS 引入

这是非常早期的前端开发非常常见的类库使用方式,早如 JQuery,YUI 等工具库,大多都是直接在页面上引入,项目的 JS 直接从全局(window)读取这些类库进行使用。React 也支持该引入方式,但即便如此,我们仍然不推荐使用该方式。因为 React 是为了搭建复杂的 Web 应而生的,而不是简单地作为一个页面的一些简单逻辑,在构建应用时需要考虑各种因素:

  • 模块化
  • 资源引入
  • 工程化
  • 编译

直接引入 React 的 JS 在页面使用很难集成这些能力,自然大大限制了 React 的发挥。

虽然但是,即便我们很少会这么用,我们也要知道 React 是可以这么做的,接下去我们就来看。

const App = function App() {
  return React.createElement('div', {
    children: [
      React.createElement('p', {
        children: 'Hello React, try to click the Button',
      }),
      React.createElement('button', {
        children: 'Click Me',
        onClick: () => window.alert('It Worked!'),
      }),
    ],
  });
};

ReactDOM.render(React.createElement(App), document.getElementById('root'));

Gotcha

这个例子中的 index.html 仅仅只是演示作用,在这里修改他并不会真的改变这个 Sandbox 的结果,但这个例子的背后逻辑是和呈现的代码保持一致的。

create-react-app

create-react-app(后简称 CRA)是 React 官方提供的 React App 管理工具。他集成了一些列帮助你更方便高效开发 React 应用的工具,并且大大简化了我们搭建现代化 React 项目的成本,同时降低手动搭建出错的概率。

本站使用的 Demo 工具就是基于 CRA 的,在继承 CRA 之后就可以使用一系列 React 的生态工具,最直观的就是 JSX:

import * as ReactDOM from 'react-dom';
import * as React from 'react';
const App = function App() {
  return (
    <div>
      <p>Hello React, try to click the Button</p>
      <button onClick={() => window.alert('It Worked!')}>Click Me</button>
    </div>
  );
};

ReactDOM.render(React.createElement(App), document.getElementById('root'));

这个例子和上面的结果是一致的,但是可以看到代码变得非常的简洁易读,这也是 JSX 的优势,CRA 带给我的优势显然不仅仅局限于此,我也会在其他课程中为大家介绍 React 的生态工具,会有非常多的有意思的内容。

CRA 的使用也非常的简单:

Terminal
npx create-react-app my-app

或者使用 yarn

Terminal
yarn react-app my-app
专辑

我在视频课程里演示了 CRA 的使用方式,点击可以进行观看。

查看视频课程

严格来说,CRA 其实也属于第三种:通过构建工具引入,只不过他进一步针对 React 进行了特化封装,并提供了很多自己开发的功能,所以我特地进行了区分。

通过构建工具引入

构建工具是现代 Web 开发逃不开的话题,前端架构这个话题很大程度上就是围绕构建工具进行的。

React 并不挑构建工具,因为构建工具对类库的要求并不高,大部分主流框架都不太会不支持主流的构建工具。上面讨论的 CRA 其实内部也是基于 Webpack 进行扩展开发的。

一个以 React+JSX 进行的项目可以在简单配置之后,方便地通过 Webpack 进行打包:

Terminal
webpack —config webpack.config.js
专辑

构建工具依赖 Node 环境,无法便捷地在浏览器中展示真实的 Demo,在课程视频中有完整的例子,可以点击观看。

查看视频课程

使用第三方框架

所谓第三方框架是基于 React 进行二次开发的框架,通常他们有一定的限制同时伴有很强大的扩展,可以非常便捷地解决一些特定方面的需求。在 React 生态中有非常多好用的这类框架,其中人气最高的有:

  • NextJs 服务端渲染框架,并伴有云函数开发功能
  • Gatsby 静态网站生成工具
  • Razzle 一个更具扩展性的服务端渲染框架,但不仅仅局限于 React

这些框架的一大特点,就是有非常明确的开发范式,基于一定的模式来达成对 React 特定功能的完善,比如 NextJs 提供getInitialProps来抽象对于服务端和客户端状态的同步,这是服务端渲染的一大痛点,如果你要自己从零开始搭建一个服务端渲染的项目,你就会知道这其中的困难程度。

后续我很大概率也会针对这些框架推出对应的课程,我本人非常喜欢 NextJs,本站点也是使用 NextJs 进行搭建的,而且 NextJs 的核心维护团队还提供了非常便捷好用的云服务Vercel,也是我正在用的,非常的良心,后面我也会推出视频为大家推荐该服务。

小结

作为开始使用 React 的第一步,我们在这节里面为大家介绍了在项目中引入 React 的几种方式,这里只是简介,因为项目构建是一个极其复杂的问题,甚至有时候比学习类库/框架本身还要困难。构建也在我未来规划的内容范围内,我会针对不同的工具,不同的场景来提供合适的解决方案,扫码关注我,获取最新动态。

Follow Me

Jokcy的二维码