-
working on :https://github.com/heggy231/jok-jok/commit/b96f3851dd95a61366331bf4633476b5a40b3886
-
reading hw: https://create-react-app.dev/docs/proxying-api-requests-in-development/
-
ez chabot - https://www.npmjs.com/package/react-simple-chatbot npm
- questions - based on score, people by people into db - dating website people who love kpop
- korean food, korean culture,
- filter 2/5, 3/5 <<< rating (points)
- pick 5 questions (drop down select)
- filter databse matching: preference
npm i
in 2 places.- under root of this project, run
npm i
cd
intoreact-ui
directory, runnpm i
- under root of this project, run
npm run dev
- from the root of the project
./jok-jok
- Go to http://localhost:8080 to see the app running!
Note: Express server is serving react statics from
./react-ui/build
- from the root of the project
- whenever you update code in
./react-ui/src
, you need to runnpm run build
to see the changes reflected in the browser.
** OR **
-
cd
into./react-ui
then runnpm run start
(This will start the react server locally so that you can make changes to the react code.) -
npm run build
from the root of the project./jok-jok
(This will serve up react static files to Heroku live deployed server jokjok)
// what does npm run build do?
"build": "cd react-ui/ && npm install && npm run build"
- installling bootstrap: https://react-bootstrap.github.io/getting-started/introduction
- follow installation step:
npm install react-bootstrap@next [email protected]
- React Router DOM: https://reactrouter.com/web/guides/quick-start
npm install react-router-dom
extrapolate page routes into its own folders
[
{
id: "724fc344-9788-49a8-9dee-8819e1e3e7e9",
name: "Sheryl Schmitt",
gender: 'female',
avatar: "https://cdn.fakercloud.com/avatars/keryilmaz_128.jpg",
email: "[email protected]",
},
{}, {}, {} // 10 folks
]
- toggle thumbs up/down
- Try 1- hook setActive false/true didn't work:
const [isActive, setActive] = useState(false);
const toggleClass = () => {
setActive(!isActive);
};
<span>
<div className="rating">
<div
className={isActive ? "like active" : "like"}
onClick={toggleClass}
>
<i className="fa fa-thumbs-up fa-3x like" aria-hidden="true"></i>
</div>
<div
className={isActive ? "dislike active" : "dislike"}
onClick={toggleClass}
>
<i
className="fa fa-thumbs-down fa-3x like"
aria-hidden="true"
></i>
</div>
</div>
</span>
when user goes to /submission
- Chatbot
npm install react-simple-chatbot --save