portfolio page setup guide to students
TODO Show them what we expect them to build, showcase a demo page
TODO Setup a React Project and run it
cd ~/af/dirty/ npx create-react-app portfolio cd portfolio npm install npm run start
TODO Show them around src/ directory
Ask them to ignore everything except App.js and App.css(which we will go back to
TODO Now that the project is running let's clear the code in src/App.
Show Socials Demo Component from James web page
TODO Replicate the html first
TODO Show styling and class names
TODO Convert it into a component(<SocialIcon />).
TODO Explain Component idea.
TODO Make the social Icons, Expand / Shrink
This is basically done to show Js interactivity. Not a great example of reactivity
TODO If time permits show them how to create blogs listing component from the same page.
Optionally show routing using react router** But In this case start by designing the component first
TODO Show reactivity in here by having a like icon and the num of likes of a post
TODO Render the blogs using static data
TODO upload the project to Gitlab pages to showcase it to the world 🥳🥳🥳
Tell them what are the sections in the page they need to build
This is basically taken from Shashi's document