[ Day 25 ] 实作一个 React.js 网站 1/5

今天来到这次铁人赛的最後一个章节：实作一个 React.js 的网站。这个网站会结合前面几天所介绍过的 React.js 基础来实作，所以在撰写的同时也会一起复习过去学习的概念和功能，希望透过这个实作网站的章节让大家更清楚自己这几天所学可以如何应用在实际的开发中。

这次的实作是采用 Academind 的 React Crash Course for Beginners 2021 影片中的范例，会实作出一个 Meetups 的网站，你可以在网站新增 Meetups 或是将其他的 Meetups 加入我的最爱当中。实作的结果会如下图所示：

那废话不多说，马上开始罗～

专案建置和套件基本设定

开启终端机并移动到要建立专案的位置或资料夹内输入 npx create-react-app 你的专案名称，这次实作的专案名称我取为 meetup-react-sample 。
移动到刚刚创建的 meetup-react-sample 资料夹内，并输入 npm install react-router-dom 将 React Router 加入到我们的专案中。
接着输入 npm start 开启专案 meetup-react-sample。
打开 src 资料夹中的 index.js 输入 import { BrowserRouter } from "react-router-dom"; ，将 react-router-dom 的套件引入到档案中後，在撰写 ReactDOM.render()其中的 Router 设定。
在 index.css 的档案中新增以下的样式内容和设定。
将 react-app 中预设的不必要档案一并移除（图中所圈选的档案都要移除）。
在 src 资料夹内新增一个资料夹名称为 pages ，并在该资料夹内新增三个档案 AllMeetup.js 、 Favorites.js 和 NewMeetup.js。（ pages 资料夹内放的就是每一个不同页面的 JavaScript 档案）
在上述的三个档案中都新增 Function Component 。
在 App.js 档案中汇入刚才建立的三个 pages 并引用 Route 和 Switch 这两个 react-router-dom 的方法。
在 Function Component 的 App 当中使用 Router 的方法设定专案的路由，并在 <AllMeetupsPage /> 外层所包覆的路由加上 exact属性。