---
# System prepended metadata

title: Things react frontend note

---

# 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/
```
szxnsuxnjf_1625725618@tfbnw.net
123456qwerty
```

return:
```
accessToken: "EAAUUVoH7reQBAHDXo6xfzVtZBDpyj2JMtB6nW7k4JRa0hIpJZAvT34VlWGyYGAYWSwX19qjDFX2r3VayQN7M1JWWVOxvVpIRVrUf2gBVN59WFcVYAeWWi381n1nmX4nhqZBC8ifneMRoqxiyeeF1AoBVCqoYMcrlBZBE1ydY59pZAwTEpT3wSfN0dI2sNAJsnJCamvyMFKWmVDZBA5aPLX"
​
data_access_expiration_time: 1633502589
​
email: "szxnsuxnjf_1625725618@tfbnw.net"
​
expiresIn: 4611
​
graphDomain: "facebook"
​
id: "100661288966215"
​
name: "Aiden Algjfgjcaaief Narayananson"
​
picture: Object { data: {…} }
​
signedRequest: "z7ikF2vK_WCYQNHpwSMr2p7PdkUBbCHCjWCC1HSYe1o.eyJ1c2VyX2lkIjoiMTAwNjYxMjg4OTY2MjE1IiwiY29kZSI6IkFRQnVpdTNWSTlIdEwwTlgwRUkwckpFS0xRZ0pkTXV6U0VWZDg5NTR4V0pEMkVqNWpVc3NxRGdYLUVEWWNDTmJkZ2dzTGxQdk5EOGprRGNwZDlRbzQtcVZITF9FamVDQlQtSm9pbllLQzZYdGpxVTk3YjJVVUNnMEc4STFTakVvRldZWUs2R3VVNzU4N1NCSHFLS2g2S3d5LXUtTXlQX1RRRHRlN2tQcjMyd1RsbUg3T2JBVkxoVWZQNi1LUGlzODh2czV2SEFNeGxHQkZMaWZ4SFFBYjVZd181Rzk2RFFCMlZzamdKeTByajhBaWNkOExwblh3dXlCWS0zVkVJc29RSnRaT2VGN292ZVFSRzVpU1RQX3ZXcWZkZGFoVGQ5UVI4eFR5dHBCc1lYTE0tanBtSGtqZzR3alZnWGphc3lYNHJmeDlFc2tWVGVYWHdraTJmNGlzelhSIiwiYWxnb3JpdGhtIjoiSE1BQy1TSEEyNTYiLCJpc3N1ZWRfYXQiOjE2MjU3MjY1ODl9"
​
userID: "100661288966215"
```