Boilerplate was added

Author: mgrinko

.editorconfig

@@ -0,0 +1,10 @@
+#airbnb
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

.eslintignore

@@ -0,0 +1 @@
+/build

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  extends: ['airbnb', '@mate-academy/eslint-config'],
+  env: {
+    commonjs: true,
+    node: true,
+    es6: true,
+    browser: true
+  },
+  parserOptions: {
+    sourceType: "module"
+  },
+  "globals": {
+    it: false
+  },
+  rules: {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    'no-console': 'off',
+    "no-param-reassign": 0,
+
+    "no-shadow": ["error", { "builtinGlobals": false }],
+    "react/destructuring-assignment": 0,
+  }
+};

.gitignore

@@ -0,0 +1,10 @@
+.idea
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+build

.stylelintignore

@@ -0,0 +1 @@
+/build

.stylelintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: "@mate-academy/stylelint-config",
+  rules: {}
+};

README.md

@@ -1,10 +1,55 @@
 # React static list of posts
 
-By using [posts.js](posts.js), [users.js](users.js), and [comments.js](comments.js) as modules to your React application, create and display a list of posts with the following data on each:
+## Demo link
+
+Add link here: `[DEMO LINK](https://<your_account>.github.io/<repo_name>/)`
+
+
+## Task 
+
+By using [posts.js](./src/api/posts.js), [users.js](./src/api/users.js), and [comments.js](./src/api/comments.js) as modules to your React application, create and display a list of posts with the following data on each:
 
 1) the title of the post;
 2) the text (body) of the post;
 3) the name, email, and address of the author of the post;
 4) sublist of the post comments, including the name and email of the author of each comment as well as the comment itself.
 
 Create and use five components: `PostList`, `Post`, `User`, `CommentList`, and `Comment`. You can use the `User` component from both `Post` (with address) and `Comment` (without providing any address).
+
+
+## Workflow
+
+- Fork the repository with task
+- Clone forked repository 
+    ```bash
+    git clone [email protected]:<user_name>/<task_repository>.git
+    ```
+- Run `npm install` to install dependencies.
+- Then develop
+
+
+## Development mode 
+
+- Run `npm start` to start development server on `http://localhost:3000`
+    When you run server the command line window will no longer be available for 
+    writing commands until you stop server (`ctrl + c`). All other commands you 
+    need to run in new command line window.
+- Follow [HTML, CSS styleguide](https://mate-academy.github.io/style-guides/htmlcss.html)
+- Follow [the simplified JS styleguide](https://mate-academy.github.io/style-guides/javascript-standard-modified)
+- run `npm run lint` to check code style
+- When you finished add correct `homepage` to `package.json` and run `npm run deploy` 
+- Add links to your demo in readme.md.
+  - `[DEMO LINK](https://<your_account>.github.io/<repo_name>/)` - this will be a 
+  link to your index.html
+- Commit and push all recent changes.
+- Create `Pull Request` from forked repo `(<branch_name>)` to original repo 
+(`master`).
+- Add a link at `PR` to Google Spreadsheets.
+
+
+## Project structure
+
+- `src/` - directory for css, js, image, fonts files
+- `build/` - directory for built pages
+
+You should be writing code in `src/` directory.

package.json

@@ -0,0 +1,64 @@
+{
+  "homepage": "https://mate-academy.github.io/react_static-list-of-posts",
+  "name": "react_static-list-of-posts",
+  "version": "0.1.0",
+  "private": true,
+  "keywords": [],
+  "author": "Mate Academy",
+  "license": "GPL-3.0",
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1"
+  },
+  "devDependencies": {
+    "@mate-academy/eslint-config": "*",
+    "@mate-academy/stylelint-config": "*",
+    "eslint": "^5.3.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-node": "^8.0.1",
+    "eslint-plugin-react": "^7.13.0",
+    "gh-pages": "^2.0.1",
+    "stylelint": "^10.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint --ext .jsx,.js ./src/",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "lint-staged": {
+    "linters": {
+      "*.css": [
+        "stylelint",
+        "git add"
+      ],
+      "*.js": [
+        "eslint",
+        "git add"
+      ]
+    },
+    "ignore": []
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Static list of posts</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/App.css

@@ -0,0 +1,3 @@
+.App {
+  text-align: center;
+}

src/App.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import './App.css';
+
+import posts from './api/posts';
+import comments from './api/comments';
+import users from './api/users';
+
+const App = () => (
+  <div className="App">
+    <h1>Static list of posts</h1>
+
+    <p>
+      <span>posts: </span>
+      {posts.length}
+    </p>
+
+    <p>
+      <span>comments: </span>
+      {comments.length}
+    </p>
+
+    <p>
+      <span>Users: </span>
+      {users.length}
+    </p>
+  </div>
+);
+
+export default App;

comments.js src/api/comments.js

@@ -1,4 +1,4 @@
-export const comments = [
+const comments = [
   {
     "postId": 1,
     "id": 1,
@@ -3499,4 +3499,6 @@ export const comments = [
     "email": "[email protected]",
     "body": "perspiciatis quis doloremque\nveniam nisi eos velit sed\nid totam inventore voluptatem laborum et eveniet\naut aut aut maxime quia temporibus ut omnis"
   }
-];
+];
+
+export default comments;

posts.js src/api/posts.js

@@ -1,4 +1,4 @@
-export const posts = [
+const posts = [
   {
     "userId": 1,
     "id": 1,
@@ -599,4 +599,6 @@ export const posts = [
     "title": "at nam consequatur ea labore ea harum",
     "body": "cupiditate quo est a modi nesciunt soluta\nipsa voluptas error itaque dicta in\nautem qui minus magnam et distinctio eum\naccusamus ratione error aut"
   }
-];
+];
+
+export default posts;

users.js src/api/users.js

@@ -1,4 +1,4 @@
-export const users = [
+const users = [
     {
         "id": 1,
         "name": "Leanne Graham",
@@ -229,4 +229,6 @@ export const users = [
             "bs": "target end-to-end models"
         }
     }
-];
+];
+
+export default users;

src/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));