# Things react frontend note

source code:
https://github.com/veryacademy/YT-Django-DRF-Simple-Blog-Series-Part-1/tree/master/react/blogapi

website(heroku):
https://things-react-frontend.herokuapp.com/

prework

npx create-react-app things_api .
npm start
npm install react-router-dom
npm install @material-ui/core
npm install axios

https://material-ui.com/

### work flow

cd things_api/
yarn start

### search
component/search.js

npm i --save material-ui-search-bar

->因為我用的版本是17.0.2
material-ui-search-bar 只有到 17.0.0
所以選官網的Combo box來做
https://material-ui.com/components/autocomplete/

解法：

yarn add @material-ui/icons

### social login

yarn add react-facebook-login

### deploy to heroku
https://www.youtube.com/watch?v=IZNrZvk7pmw&t=29s&ab_channel=TheDestroDevShow

https://www.geeksforgeeks.org/how-to-deploy-react-app-to-heroku/

### heroku cli to deploy

//add remote
heroku git:remote -a things-react-frontend

$ git add .
$ git commit -am "make it better"
$ git push heroku master

react buildpack: doc: https://devcenter.heroku.com/articles/buildpacks

way 1: use heroku cli

heroku create things-react-frontend --buildpack https://github.com/mars/create-react-app-buildpack.git

way to : setting on heroku website

-----> Building on the Heroku-20 stack
-----> Using buildpack: mars/create-react-app
-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Build failed
 !     Two different lockfiles found: package-lock.json and yarn.lock
       Both npm and yarn have created lockfiles for this application,
       but only one can be used to install dependencies. Installing
       dependencies using the wrong package manager can result in missing
       packages or subtle bugs in production.
       - To use npm to install your application's dependencies please delete
         the yarn.lock file.
         $ git rm yarn.lock
       - To use yarn to install your application's dependences please delete
         the package-lock.json file.
         $ git rm package-lock.json
    
       https://help.heroku.com/0KU2EM53
 !     Push rejected, failed to compile React.js (create-react-app) multi app.
 !     Push failed

->npm和yarn 衝突
->fix

git rm package-lock.json

創立測試用戶：
https://developers.facebook.com/apps/1429736664051172/roles/test-users/

[e-mail]
123456qwerty

return:

accessToken: "EAAUUVoH7reQBAHDXo6xfzVtZBDpyj2JMtB6nW7k4JRa0hIpJZAvT34VlWGyYGAYWSwX19qjDFX2r3VayQN7M1JWWVOxvVpIRVrUf2gBVN59WFcVYAeWWi381n1nmX4nhqZBC8ifneMRoqxiyeeF1AoBVCqoYMcrlBZBE1ydY59pZAwTEpT3wSfN0dI2sNAJsnJCamvyMFKWmVDZBA5aPLX"
​
data_access_expiration_time: 1633502589
​
email: "[e-mail]"
​
expiresIn: 4611
​
graphDomain: "facebook"
​
id: "100661288966215"
​
name: "Aiden Algjfgjcaaief Narayananson"
​
picture: Object { data: {…} }
​
signedRequest: "z7ikF2vK_WCYQNHpwSMr2p7PdkUBbCHCjWCC1HSYe1o.eyJ1c2VyX2lkIjoiMTAwNjYxMjg4OTY2MjE1IiwiY29kZSI6IkFRQnVpdTNWSTlIdEwwTlgwRUkwckpFS0xRZ0pkTXV6U0VWZDg5NTR4V0pEMkVqNWpVc3NxRGdYLUVEWWNDTmJkZ2dzTGxQdk5EOGprRGNwZDlRbzQtcVZITF9FamVDQlQtSm9pbllLQzZYdGpxVTk3YjJVVUNnMEc4STFTakVvRldZWUs2R3VVNzU4N1NCSHFLS2g2S3d5LXUtTXlQX1RRRHRlN2tQcjMyd1RsbUg3T2JBVkxoVWZQNi1LUGlzODh2czV2SEFNeGxHQkZMaWZ4SFFBYjVZd181Rzk2RFFCMlZzamdKeTByajhBaWNkOExwblh3dXlCWS0zVkVJc29RSnRaT2VGN292ZVFSRzVpU1RQX3ZXcWZkZGFoVGQ5UVI4eFR5dHBCc1lYTE0tanBtSGtqZzR3alZnWGphc3lYNHJmeDlFc2tWVGVYWHdraTJmNGlzelhSIiwiYWxnb3JpdGhtIjoiSE1BQy1TSEEyNTYiLCJpc3N1ZWRfYXQiOjE2MjU3MjY1ODl9"
​
userID: "100661288966215"