update to React 17

Author: DavidBuck

.eslintrc

@@ -8,6 +8,8 @@
       }
     ],
     "strict": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "react/no-danger": "off"
   },

.prettierrc

@@ -1,7 +1,3 @@
 {
-  "endOfLine": "lf",
-  "semi": false,
-  "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "es5"
+  "semi": false
 }

README.md

@@ -4,13 +4,14 @@ This is a simple React example showing how to consume a restful API.
 
 Run `npm run start` to start the JSON server and the React client.
 
-## Versions
-
-- [Version 3](https://github.com/DavidBuck/react-rest-example/tree/v3.0) - Example using hooks and async/await. React version 16.13.1
-- [Version 2](https://github.com/DavidBuck/react-rest-example/tree/v2.0) - Example using a class component and async/await. React version 16.13.1
-- [Version 1](https://github.com/DavidBuck/react-rest-example/tree/v1.0) - Example using a class component and promises. React version 16.13.1.
-
 ## Tools
 
 - [JSON Server](https://github.com/typicode/json-server)
 - [Tailwind](https://tailwindcss.com)
+
+## Versions
+
+- [Version 3.1](https://github.com/DavidBuck/react-rest-example/tree/v3.1) - Example using hooks and async/await. React version 17.0.1
+- [Version 3.0](https://github.com/DavidBuck/react-rest-example/tree/v3.0) - Example using hooks and async/await. React version 16.13.1
+- [Version 2.0](https://github.com/DavidBuck/react-rest-example/tree/v2.0) - Example using a class component and async/await. React version 16.13.1
+- [Version 1.0](https://github.com/DavidBuck/react-rest-example/tree/v1.0) - Example using a class component and promises. React version 16.13.1.

package-lock.json

@@ -1,32 +1,31 @@
 {
   "name": "react-rest-example",
-  "version": "1.0.0",
+  "version": "3.1.0",
   "description": "React REST API example",
   "author": "David Buck",
   "repository": "github:davidbuck/react-rest-example",
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-loader": "^3.0.4",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
-    "@fullhuman/postcss-purgecss": "^1.3.0",
-    "autoprefixer": "^9.7.6",
-    "concurrently": "^5.1.0",
-    "json-server": "^0.16.1",
-    "postcss-cli": "^6.1.3",
-    "prettier": "^1.19.1",
-    "tailwindcss": "^1.3.4"
+    "concurrently": "^5.3.0",
+    "eslint": "^7.12.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.14.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "json-server": "^0.16.2",
+    "postcss-cli": "^8.1.0",
+    "prettier": "^2.1.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "^4.0.0",
+    "tailwindcss": "^1.9.6"
   },
   "scripts": {
     "server": "json-server --port 8000 --watch db.json",

package.json

@@ -1,14 +1,5 @@
 const tailwindcss = require("tailwindcss")
-const purgecss = require("@fullhuman/postcss-purgecss")
 
 module.exports = {
-  plugins: [
-    tailwindcss("./tailwind.js"),
-    require("autoprefixer"),
-    process.env.NODE_ENV === "production" &&
-      purgecss({
-        content: ["./src/**/*.js"],
-        css: ["./src/**/*.css"],
-      }),
-  ],
+  plugins: [tailwindcss("./tailwind.config.js"), require("autoprefixer")],
 }

postcss.config.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import React, { useState } from "react"
+import { useState } from "react"
 
 function App() {
   const [posts, setPosts] = useState([])
@@ -140,7 +140,7 @@ function App() {
           </tr>
         </thead>
         <tbody>
-          {posts.map(post => (
+          {posts.map((post) => (
             <tr key={post.id}>
               <td className="border px-4 py-2 border-gray-600">{post.id}</td>
               <td className="border px-4 py-2 border-gray-600">{post.title}</td>

src/App.js

@@ -1,8 +1,6 @@
-import React from "react"
 import ReactDOM from "react-dom"
 import "./styles/tailwind.css"
 import App from "./App"
-// import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById("root"))