React

package.json

@@ -4,9 +4,12 @@
   "private": true,
   "dependencies": {
     "@babel/core": "7.4.3",
+    "@fullhuman/postcss-purgecss": "^1.2.0",
+    "@mdi/font": "^3.8.95",
     "@svgr/webpack": "4.1.0",
     "@typescript-eslint/eslint-plugin": "1.6.0",
     "@typescript-eslint/parser": "1.6.0",
+    "axios": "^0.19.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "^24.8.0",
     "babel-loader": "8.0.5",
@@ -35,6 +38,7 @@
     "jest-resolve": "24.7.1",
     "jest-watch-typeahead": "0.3.0",
     "mini-css-extract-plugin": "0.5.0",
+    "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",
@@ -46,10 +50,13 @@
     "react-app-polyfill": "^1.0.1",
     "react-dev-utils": "^9.0.1",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "3.0.1",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "semver": "6.0.0",
     "style-loader": "0.23.1",
+    "tailwindcss": "^1.0.6",
     "terser-webpack-plugin": "1.2.3",
     "ts-pnp": "1.1.2",
     "url-loader": "1.1.2",

src/App.js

@@ -1,26 +1,19 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import Nav from '~/components/Nav'
+import Home from './pages/home'
+import './styles/app.scss'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="bg-white min-h-screen">
+      <Nav />
+
+      <Switch>
+        <Route exact path="/" component={Home} />
+      </Switch>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

src/components/ActiveUsers.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import Icon from '~/components/Icon'
+
+export default function HomePage() {
+  return (
+    <ul>
+      <li className="p-3 flex items-center hover:bg-gray-100">
+        <img src="https://i.pravatar.cc/32" alt="" className="h-8 rounded-full" />
+        <h5 className="text-xl mx-4">安正超</h5>
+        <span className="text-gray-500">
+          <Icon name="fire" /> 56821
+        </span>
+      </li>
+      <li className="p-3 flex items-center hover:bg-gray-100">
+        <img src="https://i.pravatar.cc/32" alt="" className="h-8 rounded-full" />
+        <h5 className="text-xl mx-4">安正超</h5>
+        <span className="text-gray-500">
+          <Icon name="fire" /> 56821
+        </span>
+      </li>
+      <li className="p-3 flex items-center hover:bg-gray-100">
+        <img src="https://i.pravatar.cc/32" alt="" className="h-8 rounded-full" />
+        <h5 className="text-xl mx-4">安正超</h5>
+        <span className="text-gray-500">
+          <Icon name="fire" /> 56821
+        </span>
+      </li>
+      <li className="p-3 flex items-center hover:bg-gray-100">
+        <img src="https://i.pravatar.cc/32" alt="" className="h-8 rounded-full" />
+        <h5 className="text-xl mx-4">安正超</h5>
+        <span className="text-gray-500">
+          <Icon name="fire" /> 56821
+        </span>
+      </li>
+      <li className="p-3 flex items-center hover:bg-gray-100">
+        <img src="https://i.pravatar.cc/32" alt="" className="h-8 rounded-full" />
+        <h5 className="text-xl mx-4">安正超</h5>
+        <span className="text-gray-500">
+          <Icon name="fire" /> 56821
+        </span>
+      </li>
+    </ul>
+  )
+}

src/components/Icon.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default class Icon extends React.Component {
+  render() {
+    return <i className={`mdi mdi-${this.props.name}`} />
+  }
+}

src/components/Nav.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import Logo from '~/images/yike.svg'
+
+export default function HomePage() {
+  return (
+    <div className="bg-white border-b">
+      <div className="container mx-auto h-16 flex items-center justify-between pl-4">
+        <Link to="/">
+          <img src={Logo} alt="" className="h-10" />
+        </Link>
+        <div className="text-blue-500">
+          <Link to="/auth/login" className="mr-4">
+            登录
+          </Link>
+          <Link to="/auth/login">注册</Link>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/ThreadItem.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+export default class ThreadItem extends React.Component {
+  render() {
+    const thread = this.props.thread
+    const author = this.props.thread.user
+    return (
+      <div className="flex p-3">
+        <div class="mr-8">
+          <img src={author.avatar} className="h-12 rounded-full" alt="" />
+        </div>
+        <div>
+          <h3 className="text-lg text-gray-800">{thread.title}</h3>
+          <p class="text-gray-500 text-sm">
+            <span>{author.name}</span>
+            <span className="mx-4">{thread.created_at_timeago}</span>
+            <span>5 条回复</span>
+          </p>
+        </div>
+      </div>
+    )
+  }
+}

src/components/Threads.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import ThreadItem from '~/components/ThreadItem'
+
+export default class Threads extends React.Component {
+  render() {
+    const threads = this.props.threads || []
+    const listItems = threads.map(thread => (
+      <li className="hover:bg-gray-100 rounded-lg">
+        <ThreadItem key={thread.id} thread={thread} />
+      </li>
+    ))
+    return (
+      <div>
+        <ul>{listItems}</ul>
+      </div>
+    )
+  }
+}

src/index.js

@@ -1,12 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById('root'),
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()