[ Day 27 ] 实作一个 React.js 网站 3/5

上篇我们已经完成了网站中 Navigation 的样式和路由设定，今天我们要来设定网站中的其他元件，接着今天就要来实作其他的元件还有元件之间的资料处理。
我们就马上开始吧！

设定 Meetup 相关元件和样式

• 在 components 的资料夹中新增一个 meetups 的资料夹来放所有跟 Meetup 相关的元件，并在该资料夹中内新增两个档案： MeetupItem.js 和 MeetupList.js 。
  

• 设定 MeetupItem.js 为 Function Component 并在其中使用 props 来传递阵列的资料内容。
  

• 新增 MeetupItem.module.css 的档案到 meetups 资料夹中，并增加预设好的范例样式。
  

  

• 将刚才设定好的 MeetupItem.module.css 这个 CSS Modules 引用到 MeetupItem.js 元件中，并在指定的标签中透过 className 属性来使用对应的物件。
  

• 在 MeetupList.js 中重复上述的设定并将 MeetupItem.js 元件引入到档案内，再透过 props 传递阵列资料至 JSX 标签中後使用 map 方法中做应用。
  

• 在 AllMeetupsPage.js 的页面将刚才设定好的 MeetupList.js 元件引入其中，并在该元件中传入 props 的资料。
  

所以目前画面中就会显示出刚才个别设定在 MeetupList.js 中的 MeetupItem.js 元件，如下图所示：

建立 Card 元件和样式

• 在 components 资料夹中新增 ui 资料夹，在该资料夹中新增两个档案： Card.js 和 Card.module.css ， 另外在 Card.module.css 设定样式。
  

  

• 一样在 Card.js 中设定 Function Component 并在返回的 JSX 使用 props.children 来包覆其他元件，另外再引用 Card.module.css 的样式到其中。
  

• 将 Card.js 这个 UI 元件引入到 MeetupItem.js 当中的 JSX ，将每个 MeetupItem 的元件设定为卡片的样式。
  

这边我们可以看到原本在 MeetupList 元件中的 MeetupItem 现在都拥有了 Card 样式（下方的阴影）：

新增整体版面样式

• 在 layout 资料夹内新增 Layout.js 和 Layout.module.css 两个档案，并在 Layout.module.css 设定好样式内容。
  

  

• 在 Layout.js 元件中，加入之前设定好的 MainNavigation.js 元件，并一样透过 props.children 和我们所要呈现的画面撰写在此元件返回的 JSX 物件当中。
  

• 最後再将该 Layout.js 元件引入到 App.js 当中，让该元件处理整个资料以及画面的呈现。
  

最後我们就会得到目前范例 React.js 网站中的整体样式和中间 Meetups 的 Card 元件都设定完成了！如下面截图所示：

这篇的实作除了有应用到 [ Day 08 ] 元件的资料传递 - Props 中的 children 功能之外还有其他在 JSX 中处理阵列的方法，一样可以透过传送门回去复习一下这些功能。
备注：依照惯例附上今天操作的 GitHub Repository 连结给大家参考～

那今天的进度就告一段落了～原本以为这样的实作教学分配应该是刚刚好的，结果好像一次讲太多了XD
没关系！明天再继续跟大家介绍如何在范例中加入和使用表单？

有任何问题一样都非常欢迎提出和指教喔！
那我们下篇见ʘ‿ʘ