update to React 17

Author: DavidBuck

.eslintrc

@@ -1,6 +1,8 @@
 {
   "parser": "babel-eslint",
   "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": [
       1,
       {

.prettierrc

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

README.md

@@ -2,14 +2,15 @@
 
 This is a simple React example that uses Apollo Boost to run queries and mutations on a mock GraphQL Backend.
 
-Run `npm run start` to start the json-graphql-serve and the React client.
-
-## Versions
-
-- [Version 1](https://github.com/DavidBuck/react-graphql-example/tree/v1.0) - React version 16.13.1 & Apollo-boost 0.4.7.
+Run `npm run start` to start the json-graphql-server and the React client.
 
 ## Tools
 
 - [JSON Server](https://github.com/typicode/json-server)
 - [Apollo Boost](https://www.npmjs.com/package/apollo-boost)
 - [Tailwind](https://tailwindcss.com)
+
+## Versions
+
+- [Version 1.1](https://github.com/DavidBuck/react-graphql-example/tree/v1.1) - React version 17.0.1 & Apollo-boost 0.4.9.
+- [Version 1.0](https://github.com/DavidBuck/react-graphql-example/tree/v1.0) - React version 16.13.1 & Apollo-boost 0.4.7.

package-lock.json

@@ -1,35 +1,34 @@
 {
   "name": "react-graphql-example",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React GraphQL example",
   "author": "David Buck",
   "repository": "github:davidbuck/react-graphql-example",
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.5",
-    "@fullhuman/postcss-purgecss": "^1.3.0",
-    "apollo-boost": "^0.4.7",
-    "autoprefixer": "^9.7.6",
+    "@apollo/react-hooks": "^4.0.0",
+    "apollo-boost": "^0.4.9",
+    "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
-    "concurrently": "^5.2.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",
-    "graphql": "^15.0.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.12.1",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "graphql": "^15.4.0",
     "json-graphql-server": "^2.1.3",
-    "postcss-cli": "^6.1.3",
-    "prettier": "^1.19.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
-    "tailwindcss": "^1.3.5"
+    "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": "npx json-graphql-server db.js --p 4000",

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,4 +1,3 @@
-import React from "react"
 import { gql } from "apollo-boost"
 import { useQuery, useMutation } from "@apollo/react-hooks"
 
@@ -139,7 +138,7 @@ function App() {
           </tr>
         </thead>
         <tbody>
-          {data.allPosts.map(post => (
+          {data.allPosts.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,12 +1,9 @@
-import React from "react"
 import ReactDOM from "react-dom"
 import ApolloClient from "apollo-boost"
 import { ApolloProvider } from "@apollo/react-hooks"
 import "./styles/tailwind.css"
 import App from "./App"
 
-// import * as serviceWorker from './serviceWorker';
-
 const client = new ApolloClient({
   uri: "http://localhost:4000/graphql",
 })