[Day 19 - React] 现在开始用框架写网页 — React

为什麽要使用框架？

前端最重要的工作，就是让网页的资料与状态视觉化，有资料状态改变时，就要更动网页内容的显示。但当网页内容复杂化，网页元件、元件操作功能和资料状态的数量增加，就可能会需要非常大量的程序码来实现，而越大量的程序码在开发过程就更不好维护。 因此为了解决这样的问题，就有了加速应用程序开发的工具 — 框架(Software Framework)。

框架(Software Framework)提供一个基础的开发架构，包含可重复使用的结构和通用的方法。本身无法运作，搭配开发者的程序码就能建立一个完整的应用程序，是一个让开发者能够更容易去扩展、维护专案的工具。

前端框架

摆脱过去以网页页面分类 HTML、CSS、JS 程序码的模式，前端框架着重於以资料状态为基础建立程序码的架构，提倡将介面元素组件化，将该组件有关的程序码，包含元件渲染、资料处理、操作功能，都放在同一个组件内，省去抓取元素更新资料的时间。常见的前端框架有 Angular、Vue、React，接下来的几篇文章，我们就会来学习如何使用 React 框架开发网页。

React

React 是由Facebook开发的一个开源的前端框架，用 JavaScript 建立的一套函式库，可以藉由独立的组件(component)，来建立复杂的网页介面。

建置 React 专案

为了省去建置专案的时间，可以直接使用 Codesandbox 内建的 React 专案模板。

一般的 React 文件结构大概会有：

• public：包含浏览器要读取的文件，而 React 会将程序码绑定到 index.html ，让浏览器可以运行你所开发的内容。
• src：主要放置我们开发的程序码。 app.js 就是拆解的 React 组件(Component)，里面包含与该组件有关的程序码；index.js 则是应用程序的入口点，会绑定 HTML 的元素，让组件可以显示在网页上。

使用 JSX 建立 React Element

const element = <h1>Hello Codesandbox</h1>;

这样一行看起来既像 HTML、又像 Javascript 的程序码就是 JSX。JSX 扩充了 JavaScript 的语法，能够将 HTML 元素写在 JavaScript 里面变成 React Element。让我们试着将 app.js 改写成：

export default function App() {
  let name = 'May';
  const element = <h2>Start editing to see some magic happen!</h2>;

  return (
    <div className="App">
      <h1>Hello {name}</h1>
      {element}
    </div>
  );
}

你可以在 JSX 的大括号中写入 JavaScript 的表达式，比如纯值、变数、函式...等等。在上面的范例中，宣告名为 name 的变数，值是字串，并在 JSX 中将变数名称包在大括号中，就能将变数传入到 HTML。

而 JSX 最终还是会转换成 JavaScript，举例来说上面的常数 element，就会变成下面的 JavaScript。使用 JSX，可以在实作 React Element 上能够更简洁、让结构写起来更容易。

const element = React.createElement('h2',null,'Start editing to see some magic happen!');

Render Element

与 HTML 里面的元素不同，React 里面的 Element 只是一个物件，所以还需要进一步将元素渲染到网页上。在index.html 内部只有一个元素 <div id="root"></div>，通常会将这个元素当成是 React DOM 的入口，在透过 ReactDOM.render 把 React Element 渲染到网页上。下面就是 Render Element 简单的例子：

const element = <h1>Hello Codesandbox</h1>;
ReactDOM.render(element, document.getElementById('root'));

但我们不可能把每个 Element 都列在 ReactDOM.render 内，程序码会太冗长而且难以阅读。在前面有提到 React 最重要的概念就是透过 Component 来构建网页介面，可以将一连串的 React Element 包装起来回传，像是 index.js 里面的 <App /> 就是一个 React Component。

index.js

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

小结

阅读完今天的文章，大致了解 React 如何使用 JSX 来撰写 React Element，并且成功将它 Render 到网页上，希望大家都有稍微体会到使用框架，能够让开发更语意结构化、更便利的优点。下一个章节我们就会带大家实作 React Component、以及如何在组件内来进行资料的处理。

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• React Document