[Day20] 在 Codecademy 学 React ～ 如何宣告 Component 及使用 Component 的好处

前言

今天来到第 20 天！
然後仍然是 Codecademy 学 React 系列，
今天进度是 Components，
事不宜迟，让我们马上开始吧！

本日正文前之碎念

昨天的文章的结尾断在初步介绍 React Components，
老实说学得满困惑的，
昨天文章提到 React 有 3 种 Component 的写法：

1. 最简单的 extends React.Component 开始
2. 再来是不用this的createClass
3. 最後是我很少用的stateless component

我之前是直接学 stateless component 的写法，
所以现在是学 extends React.Component 的写法，
对我来说反而多好多字要打XD
例如 class MyComponentClass extends React.Component，
ReactDOM.render，
这些都是我之前不曾碰过的写法，
我觉得我有种我之前已经直接走到第三阶段「看山又是山」，
又突然被拉回第一阶段「看山是山」的阶段学习一样XD

但是这也是我先前提的，
网路上很多范例还是采用这个写法，
所以我不趁这个机会学的话，
之後我觉得我看到这种写法还是会下意识逃避吧XD

真正的本日正文

如何宣告用 class 宣告一个 component

这边先贴程序码让大家感受一下：

import React from 'react';
import ReactDOM from 'react-dom';

class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <h1>All About Me!</h1>
        <p>I like movies and blah blah blah blah blah</p>
        <img src="https://content.codecademy.com/courses/React/react_photo-monkeyselfie.jpg" />
      </div>
    );
  }
}

ReactDOM.render(
  <ProfilePage />,
  document.getElementById('app')
)

class ProfilePage extends React.Component 的意思就是我宣告了一个叫 ProfilePage 的 component，
所以下面用 tag 的方式 <ProfilePage /> 去使用它。

如果觉得上面程序直接来一大段好像有点复杂，
那这边再简化一下让大家感受一下：

import React from 'react';
import ReactDOM from 'react-dom';

class ProfilePage extends React.Component {
  render() {
    return (
       <h1>All About Me!</h1>
    );
  }
}

ReactDOM.render(
  <ProfilePage />,
  document.getElementById('app')
)

故意只留 <h1> 的部份，应该好看多了？
这样的话，其实上面那段就跟之前写这样(如下方这段程序码)是一样的意思：

ReactDOM.render(
  <h1>All About Me!</h1>,
  document.getElementById('app')
)

只是因为现在那边我们要放很多个网页元素，
不是像之前只有单一个 <h1> 或 <div> 这样，
所以才会用 component 的方式把它们包在一起。

如何在 component 使用其它 component

现在假设我们想要在这页上面放一个 NavBar (导览列)，
那麽首先我要先另外新增一个 NavBar.js，
在里面宣告一个 NavBar 的 class，
并在最前面加上 export。
这边先放一下档案架构，
不然只看下面可能会不知道我在讲什麽XD

在 NavBar.js key 以下程序码：

import React from 'react';

export class NavBar extends React.Component {
  render() {
    const pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
    const navLinks = pages.map(page => {
      return (
        <a href={'/' + page}>
          {page}
        </a>
      )
    });

    return <nav><a href="/">关於我们</a><a href="/">回首页</a></nav>;
  }
}

这边作用就是要先 export 这个 component，
其他地方才能 import 这个 component 使用。

再来到主要页面 ProfilePage.js 做以下三件事：

1. 将 NavBar.js 引入

import { NavBar } from './NavBar.js';

2. 在适当的地方插入 <NavBar /> 的 tag

import React from 'react';
import ReactDOM from 'react-dom';
import { NavBar } from './NavBar.js';

class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <NavBar />
        <h1>All About Me!</h1>
        ... (略)
      </div>
    );
  }
}

3. 在主页面最下面 render ProfilePage 这个 component

ReactDOM.render(
  <ProfilePage />,
  document.getElementById('app')
)

再来我们就按下 Run 来看看成果吧！

使用 Components 的好处

这边要说明一下，
像 NavBar 是每个页面都会有的 component，
因此把 NavBar 包装成一个 component，
之後要放导览列只要 <NavBar /> 就完成了，
而且万一 NavBar 选单上面的项目需要做改变，
这时候我也只需要到 NavBar.js 去进行修改就好，
所以这是包装成 component 写法的好处~~~~~

(PS.如果没有用这个写法，
而是在每一页上面都放 NavBar 的语法，
那麽你如果网站有 10 个页面，
你只要之後 NavBar 有变动，
你就得手动改 10 次= =")

这几天都没有放程序码是因为这些在 Codecademy 上直接练习就可以了，
另外一方面是，
其实今天原本有想试着把 Codecademy 的程序放在 CodeSandbox 上，
但不知道为什麽一直有问题，
只好先这样了orz
等我有机会解决後再补放上来~~~~

後记

原本今天还想多推 this.props 的XD
可是发现文章打完发现比想像中花时间，
所以 this.props 跟 this.state 我就留到明天好了XD
终於来到倒数 10 天!!!!!!!!!!!!
冲啊~~~~~~~~~