??????? ?????? ??? ??? ??? ????. ?? ? ???? ??? ? UX ???? ???? ??? ??? ????. ???? ??? ??? ?? ??? ?????. ??? ??? ???? ????? ?? ??? ?? ? ? ??? ??? ??? ? ? ??? CSS ???? ????.

?? ??? ??? ?????? ???? ??. ??? ??? ????. ? ???? ?????? ???? ????.

??, ??? ?? ???? ??? ???? ?? ?? ??? ?? ??? ? ??? ?? ??? ???? ???? ?? ?? ??? ????. ???? ?? ??? ??? ??? ????, ??? ? ??? ??? ????? ????????. ?? ?? ???? ? ?? ????? ?? ? ? ????. ???? ??? ??? ???? ??? ? ??????. ?? ?/?? ???? ?? ??? ??? ?? UX ????? ???? ?????? ???? ? ????.

??? ??? ????? ?????.

???? ?? ??

????? ???? ?? ??? ?????.

Solar Excursions? ??? ?? ?? ????? ?? ?? ??? ???? ????? ??? ??? ??????.

??? ??? ?? ?? UI? RECT? ????? ??????. ??? ??? ?? ??? ? ??? Sass? ?? ???? ?? ?? ??? JavaScript? CSS? ?????. ??? ??? ?? ???? ??? ??? ? ???? ?? ????. ?? ??? ??? ???? ?? ?? ? ??? ????. ? ?? ?? ????? ??? ???? ???? ? ???? ??? ? ?????. ??? ?? ???? ???? ???? ???? ??? ??? ??? ???? ? ?? ??? ?? ???? ?????.

?? ?? ?, ?? ?? ??? "??? ????"????? ????? ??????. ?? ??? React-Bootstrap? ???? ??? ???? ???? ? ??? ? ????. ????? ?? ???? ???? ???? ? ??? ????? ??? ?? ? ? ????.

??? ?? ???? ???? ??? ????? UI? ??? ???? ?? ? ???? ?????? ??? ? ????. ?? ?? ???? ????? ????? ???? ?? ??? ?? ???? ?? ???? ????? ? ?????. ??? ? ?? ????.

?? ???? ????? Power in Power?? ??? ???? Balsamiq?? ?? 10 ? ?? ??? ???? ??? ???? ? ??? ??? ???? ?? ? ??? ??? ??????. ?? ??? ???? ?? ??? ??? ???? ???? ???? ????? ????.

Sprint Zero : ?? ??

?? ??? ??! ?? ??? ???? ?? ??? ????? ?? ??? ??? ??????? ?? ???? ????. ???? ????? ???? ??? UI? ???? ?? ??? ? ?? ??. ? ?? ?? ??? ?? ???? ?? ?? ? ????? ??? ??? ???? ????.

???? UI ??? ??? ????.

??? ?? ??? ?????. ??? ???? ?? ??? ???? ??? ???? ?????? ?? ? ? ????.

?? ??? ? ? 5 ?? ?? ???? ?? ?? ? 4 ?? React-Bootstrap?? ??? ?? ? ?? ??? ????? ????. ?? ? ?? ?? ? ????? ????. ?? ??? ?? ?? ??? ???? ??? ?? ???? ?????.

 <code>// App.js imports import React, { useState } from "react"; import Navigation from "./Navigation"; import Page from "./Page"; // Navigation.js imports import React from "react"; import { Navbar, Dropdown, Nav } from "react-bootstrap"; // Page.js imports import React from "react"; import PosterCarousel from "./PosterCarousel"; import DestinationLayout from "./DestinationLayout"; import { Container, Row, Col } from "react-bootstrap"; // PosterCarousel.js imports import React from "react"; import { Alert, Carousel, Image } from "react-bootstrap"; // DestinationLayout.js imports import React, { useState, useEffect } from "react"; import { Button, Card, Col, Container, Dropdown, Jumbotron, ListGroup, Row, ToggleButtonGroup, ToggleButton } from "react-bootstrap";</code>

?? ????? ???? ????? ? ??? ?? ???? ??? ?? ? ?? ??? ?? ?? ??? ???? ????. ???? 4 ?? ????? ?? ??? ????? ?? ????? ???? ??? ?? ? "??? ????"????? ?? ??? ? ??? ?????. ??? ??? ?? ??? ?? ??? ??? ?????. ?? ??? ?? ?? ?? ??? ??? ???, ?? ???? ???? ?? ??? ???? ???? ??? ?????? ?? ?????? ?? ?? ??? ?? ? ????.

?? ? ?? ?? ??? ?? ???? ???? ?? ???? ?? ?? ???? ??? ?? ?? ?? ???? React-Bootstrap ??? ???? ?? ?? ????? ????? ??????. ?? ???? ?? ???? ??? ?? ?? ? ?????. ?? ???, ??? ??-?? ???? ?? ? ? ????? ?? ?????. ?? ???? ???? 30 ?? React-Bootstrap ??? ??? ???? ? ??? ???? KitButton ?? ??? ??? ?? ???????.

? ?? ???? : ?? ??

??, ??. ?? ??. UI? ??? ??? ???? ???? ??? React ?? ??? "?? ??"? ?? ?? ? "??"??? ????. kitbutton.js? ?? ?? ??? ???, ????? ??? ??? React-Bootstrap ?? ??? ???? ??? ????.

??? ?? ?? ??? ??? ????.

 <code>// KitButton.js import { Button, ToggleButton, ToggleButtonGroup } from "react-bootstrap"; export const KitButton = Button; export const KitToggleButton = ToggleButton; export const KitToggleButtonGroup = ToggleButtonGroup;</code>

?? ?? ?? ??? ??? ?? ??? ??????.

 <code>// kit/index.js import { KitCard } from "./KitCard"; import { KitHero } from "./KitHero"; import { KitList } from "./KitList"; import { KitImage } from "./KitImage"; import { KitCarousel } from "./KitCarousel"; import { KitDropdown } from "./KitDropdown"; import { KitAttribution } from "./KitAttribution"; import { KitNavbar, KitNav } from "./KitNavbar"; import { KitContainer, KitRow, KitCol } from "./KitContainer"; import { KitButton, KitToggleButton, KitToggleButtonGroup } from "./KitButton"; export { KitCard, KitHero, KitList, KitImage, KitCarousel, KitDropdown, KitAttribution, KitButton, KitToggleButton, KitToggleButtonGroup, KitContainer, KitRow, KitCol, KitNavbar, KitNav };</code>

?? ??? ?? ???? ?? ???? ?? ?? ???? ?? ????. ????? ?? ??? ?? ??? ??? ????.

 <code>// Navigation.js imports import React from "react"; import { KitNavbar, KitNav, KitDropdown } from "../kit"; // Page.js imports import React from "react"; import PosterCarousel from "./PosterCarousel"; import DestinationLayout from "./DestinationLayout"; import { KitContainer, KitRow, KitCol } from "../kit"; // PosterCarousel.js imports import React from "react"; import { KitAttribution, KitImage, KitCarousel } from "../kit"; // DestinationLayout.js imports import React, { useState, useEffect } from "react"; import { KitCard, KitHero, KitList, KitButton, KitToggleButton, KitToggleButtonGroup, KitDropdown, KitContainer, KitRow, KitCol } from "../kit";</code>

??? ?? ??? ?? ?? ?????.

?? ?? ??? ?? REACT ?? ??? ????? ?? ???? ?? ??? ?? ?? ?? ????? ???? ??? React-BootStrap? ??? ???? ??? ??? React-Bootstrap ??? ?????. ??? ??? API? ?????? ??? ?? ?? ??? ?? ??? ? ??? ?????. ?? ??:

 <code>// 來自Navigation.js<kitnavbar bg="dark" fixed="top" variant="dark"></kitnavbar></code>

?????, ??? Kitnavbar? ????? ? ?, ??? ?? react-bootstrap ??? ?? ? ??? ????.

??? ?? ???? ??? ??? ????? ??? ????? ???? ??? ??? ??? ?? ???? ? ?? ?????. React-Bootstrap ?? ??? ?? ??? ??? ?? ???? ?? ??? ?? ???? ?? ???? ?????.

???, ??? ??? ?? ??? ???? ?????? ??? ???? ?? ???? ???? ????? ?? ??? ???? ?? ????? ????? ???? ?????.

??? ?? ?????? UI? ??? ??? ?? ??? ?????. ?? Power? ???? ? ???? ??? ????? ???? ??? ?????. ???? ??? ???? ??? ?? ???? ????? UI ? ???? ???????. ??, ??? ??? ?? ??? ???? ??? ??? ??? ????? ????. ?? ??? ??? ?????? ??? ?????? ??? ????. ??? ?? ????? ??? ???? ?? ? ??? ????.

? ?? ???? : ?? ??

??! ??? ?????? ??? ??? ?????. ??? ? ??, ??? ?? ?? ??? ?? ??? ??? ?? ???? ?? ???? ?? ?? React-Bootstrap API ??? ??????.

?? ???? ??? ??? ????.

?? ???? ?? ??? ?? ???? ???? ?? ?? ?????? ??????. ?? ?? ?? ??? ?????? ?? ??? ?? ??? ???? ?? ?? ????????.

????? ????? ? ??? ?? ?????.

?? ??? ?? ?? ? ??? ?? ??? ??? ?? ??? ???? ?? Kitglobal??? ??? ?? ?? ??? ????.

 <code>// KitGlobal.js import { createGlobalStyle } from "styled-components"; export const KitGlobal = createGlobalStyle` body { @import url('https://fonts.googleapis.com/css?family=Orbitron:500|Nunito:600|Alegreya Sans SC:700'); background-color: ${props => props.theme.foreground}; overflow-x: hidden; } `;</code>

Createglobalstyle ??? ??? ???? ?? ??? CSS? ?????. Google?? ??? ? ??? ???? ???? ?? ??? ?? ??? ???? X ???? ????? ?? ????? ?? ??? ?? ?????. ??? ? ?? ??? ?? ????? kitglobal ?? ??? ?????.

?? ? ?? ???? ??? ThemeProvider? ../theme ? "??"?? ????? ???? ? ?? ???? ?????. ??? React? usestate? ???? ?? ??? ??? ???? "??"? ?? ? ? SetTheme? ???? ?? React? ???? ?????. ?? ? ?? ??? ?? ThemeProvider? ?? ??? "??"? ???? ?????. ??? ??? ? ?? ?????.

 <code>// App.js import React, { useState, useEffect } from "react"; import { ThemeProvider } from "styled-components"; import themes from "../theme/"; import { KitGlobal } from "../kit"; import Navigation from "./Navigation"; import Page from "./Page"; export default function App(props) { const [destinationIndex, setDestinationIndex] = useState(0); const [theme, setTheme] = useState(themes.luna); const destination = props.destinations[destinationIndex]; useEffect(() => { setTheme(themes[destination.theme]); }, [destination]); return (<themeprovider theme="{theme}"><react.fragment><kitglobal></kitglobal><navigation destinationindex="{destinationIndex}" setdestinationindex="{setDestinationIndex}"></navigation><page destinationindex="{destinationIndex}" setdestinationindex="{setDestinationIndex}"></page></react.fragment></themeprovider> ); }</code>

Kitglobal? ?? ?? ??? ????? ??????. ??? ?? ??? ?? ?? ? ???????. ThemeProvider? React Context API? ???? ??? ??? ?? ?? (?? ?? ??)? ?????. ?? ??? ????? ??? ???? ???????.

??? ??? ?? ??? ?? ??? ? ? ?? ?? ?? ???? ?? ?? ?? ??? ??? ???? ? ???? ?? ???? ??????. ??? ?? ?????.

???, ??? ?? ??? ???? ?? ????. ? ??? ?? ?? ????? ???? ? ?? ??? ??? ???? ?????. ?? ?? Accent1, Accent2 ? Accent3? ?? ????? ?? ?? ??? ?? ?? ??? ???????. ?????, ??? Text1? Text2? ???? ?? ? ?? ??? ? ??? ??????. ?? ???? ?? ??? ????.

 <code>// theme/index.js (部分列表) const themes = { ... mars: { background: "#a53237", foreground: "#f66f40", accent1: "#f8986d", accent2: "#9c4952", accent3: "#f66f40", text1: "#f5e5e1", text2: "#354f55" }, ... }; export default themes;</code>

? ??? ?? ??? ???? ?? ?? ?? (?? ?? ???? ?? ??? ?? ? ?? ?? ?? ??)? ???? ??? ????? ???? ??? ?? ??? ?? ?? ? "??? ???"? ?? ??? ?? ??? ???? ???????.

??? Kithero ?? ??? Jumbotron? ?? ????? ?? ?? ? ??? ?? ???? ???? ??? ????.

 <code>// KitHero.js import styled from "styled-components"; import { Jumbotron } from "react-bootstrap"; export const KitHero = styled(Jumbotron)` background-color: ${props => props.theme.accent1}; color: ${props => props.theme.text2}; border-radius: 7px 25px; border-color: ${props => props.theme.accent3}; border-style: solid; border-width: 1px; box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d; font-family: "Nunito", sans-serif; margin-bottom: 20px; `;</code>

? ?? ???? ???? ???? ?? ??? ? ???? Kithero? ??? ???? ???? ????? ?????.

?? ?????? ???? ??? ????.

 <code>// DestinationLayout.js (部分代碼) const renderHero = () => { return (<kithero></kithero></code><h2> {destination.header}</h2>
      <p>{destination.blurb}</p>
      <kitbutton>?? ?? ?????!</kitbutton>
  );
};

?? ?? React-Bootstrap ?? ??? ?? ??? ?? ????? ? ??? ??? ????. ?? ??, ??? Kitnavbar ?? ??? ?? ????? ?? ?? ???? ??? ???? ?? ??-?? ??? ??? ??? ?? ?? ??????.

?? ??? ????? ???.

 <code>// KitNavbar.js (部分代碼) import React, { Component } from "react"; import styled from "styled-components"; import { Navbar } from "react-bootstrap"; const StyledBootstrapNavbar = styled(Navbar)` background-color: ${props => props.theme.background}; box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d; display: flex; flex-direction: horizontal; justify-content: space-between; font-family: "Nunito", sans-serif; `; export class KitNavbar extends Component { render() { const { ...props } = this.props; return ; } }</code>

?? Styled Components? ???? StyledBootstrapnavbar?? ?? ??? ????. ??? CSS? ???? ???? ???? ???? ?? ??? ?? ? ? ??????. ??? ?? ??? (??) ?? ??? ??? ??? ???? ?? ????? (?? ?? ?? ??? ?) ??? ?? ???? React-Bootstrap? ?? ??? ?? ????? ??????. ?? ???? ?? = ?? ??? ???? ???? Bootstrapnavbar ????? ????? KitnaVbar ?? ??? ???????. ??? ?? ?? ??? ??? ?? ??? ?????.

????? ?? ?? ???? ?? ??? ?? ??? ????? ??? ?? ??? ??? ????? ??? ???? ?? ??? ???? ???????. ???? ??, ??? ???? ?? ??? ??? ???? ???? Kithero? ????? ??? ???????.

?? ?? ????? ????? ?? ???? Kitnavbar? ????? ??? ????.

 <code>// Navigation.js (部分代碼) return (<kitnavbar><kitnavbarbrand><kitlogo></kitlogo> Solar Excursions</kitnavbarbrand> {renderDestinationMenu()}</kitnavbar> );</code>

?????, ?? React-Bootstrap? ?? ?? ??? ???????????. Kitattribution ?? ??? ?? ??? ????, ??? ?? ? ???? div? ??? ????. React-Bootstrap? ?? ???? ???? ?? ?? ???? ? ??????.

?? ?????? ???? ?? ??? ??? ????.

 <code>// KitAttribution.js (使用react-bootstrap) import { Alert } from "react-bootstrap"; export const KitAttribution = Alert;</code>

??? ?? ?????.

 <code>// KitAttribution.js import styled from "styled-components"; export const KitAttribution = styled.div` text-align: center; background-color: ${props => props.theme.accent1}; color: ${props => props.theme.text2}; border-radius: 7px 25px; border-color: ${props => props.theme.accent3}; border-style: solid; border-width: 1px; box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d; font-family: "Alegreya Sans SC", sans-serif; > a { color: ${props => props.theme.text2}; font-family: "Nunito", sans-serif; } > a:hover { color: ${props => props.theme.background}; text-decoration-color: ${props => props.theme.accent3}; } `;</code>

? ?? React-Bootstrap? ?? ?? ??? Styled.div? ?? ?? ???? ?????. ??? ?? ??? ?? ?? ???? ?????.

?? ? ?? ?????? ? ???? ?? ??? ??? ??? ??? ????.

???? ?? ??? ??? ??????.

?????

3 ?? ???? ?, ?? ?? UI? ?? ??? ?? ?? ????? ????? ???? ????.

• ??? React-Bootstrap? ?? ??? ???? ??? ? ?? ?? ?? ?? ??? ?? ????.
• ???? ??? ??? ?? ??? ??? ? ???? (??? ???? ?? ?? ?? ????? ????? ??? ??? ??? ????). ??? ? ?? ??? ?? ??? ?? ?????? ????.
• React-Bootstrap? ?? ?? ??? ???? ??? ?? ?? ?? ??? ???? ??? ???? ???? ? ? ????.

Github? ?? ?? ??? ??????.

? ??? ???? ? ?? ??? React ???? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!