initial commit

jun68ykt · Aug 24, 2019 · ccfd346 · ccfd346
commit ccfd346
Show file tree

Hide file tree

Showing 9 changed files with 10,511 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/.idea
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# tl;dr
+
+This repo contains my answer codes of a React app for
+[the question No.207924 of teratail](https://teratail.com/questions/207924), which is a Japanese Programming Q&A site.
+
+# how to run
+
+- yarn install
+- yarn start
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "q207924",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.3.3",
+    "axios": "^0.19.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-router": "^5.0.1",
+    "react-scripts": "3.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <title>Q207924</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import Index from './containers/Index'
+
+function App() {
+  return (
+    <div className="App">
+      <Index />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/component/Post.js b/src/component/Post.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+class Post extends React.Component {
+  render() {
+    const { title, name, content, createdAt } = this.props
+    return (
+      <div className="post">
+        <ul>
+          <li>タイトル:{title}</li>
+          <li>投稿者:{name}</li>
+          <li>本文:{content}</li>
+          <li>日時:{createdAt}</li>
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default Post
diff --git a/src/containers/Index.js b/src/containers/Index.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import { withRouter } from 'react-router';
+import axios from 'axios';
+import Typography from '@material-ui/core/Typography'
+import Post from '../component/Post';
+
+class Index extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      posts: []
+    }
+  }
+
+
+  componentDidMount() {
+    axios
+      .get('https://demo2746340.mockable.io/q207924/posts')
+      .then((results) => {
+        console.log(results)
+        this.setState({ posts: results.data })
+      })
+      .catch((data) =>{
+        console.log(data)
+      })
+  }
+
+  render(){
+    return(
+      <div>
+        {(() => {
+          if (this.state.posts != []) {
+            this.state.posts.map( post => {
+              return(
+                <Post title={post.created_at} name='testUser' title={post.title} content={post.content} />
+              )
+            })
+          } else {
+            <Typography variant="h1" component="h2">
+              まだなにも投稿されていません。
+            </Typography>
+          }
+        })()}
+      </div>
+    );
+  }
+}
+
+export default Index;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));