[ Day 26 ] 实作一个 React.js 网站 2/5

延续昨天的内容，我们 React.js 专案的基本设定都已经完成了，今天就要来实作 Navbar 和样式设定啦！
那就马上开始吧～

新增页面连结和 Navigation 元件

• 在 src 档案中新增 components 资料夹，并在该资料夹内再新增一个 layout 的资料夹来存放此专案中所有会使用到跟版面相关的元件。最後在 layout 中新增该 Navigation 元件 MainNavigation.js 。
  
• 在 MainNavigation.js 中开始设定 Function Component 并设定 JSX 结构， 设定完後再引入 react-router-dom 中的 <Link> 。
  
• 在 App.js 档案中新增刚刚所建立的 MainNavigation Component 至画面中，并将该元件放置於 JSX 中 Route 设定的前面。
  

目前的画面和 Router 的设定会根据所点击的 Navigation 内容而更改路径，页面呈现如下：

使用 CSS Modules 来设定 Navigation 的样式

• 新增 MainNavigation.module.css 档案至 layout 资料夹中，并将范例中的预设样式加入该档案。
  

  

• 将刚才建立的 CSS Modules 加入到 MainNavigation.js 档案中并引入该 Modules 中的 classes ，引入後将所需要的样式设定到指定标签中的 className 属性中。
  

设定好 Navigation 的样式後，目前我们可以得到这样的一个简易的 Navigation ：

显示所有 Meetups 资料

• 宣告一个 DUMMY_DATA 的阵列并赋予它自定义的 Meetups 物件资料。
  
• 在 JSX 中使用阵列的 map() 方法来处理刚刚建立的 DUMMY_DATA ，并返回所有加上 id 属性的 title 资料。
  

看一下目前的画面就可以发现我们成功将 DUMMY_DATA 阵列中的资料渲染出来了：

今天的 React.js 实作应用到了 [ Day 05 ] JSX 语法 、 [ Day 21 ] 路由管理 - React Router 2/2 中的 <Link> 以及 [ Day 24 ] React 中的样式设定 中的 CSS Modules 样式设定方法，如果有不熟悉的地方一样可以透过传送门回去再看一次！
备注：一样附上今天实作部分的 GitHub Repository 连结

明天会为大家示范更多元件的应用还有 Props 的使用情境，有任何问题一样都非常欢迎提出和指教！
那我们下篇见ʘ‿ʘ