Replace mock data with a real datasource:
Send HTTP request once the page has loaded - we would typically use useEffect() Runs whenever component is frist rendered, never after. Do: fetch your data inside it.
Manage state for the component - use useState() hook
const [loadedNotes, setLoadedNotes] = useState([]); useEffect(()=> { //send http request and fetch data. //set on component setLoadedNotes(LOADED_NOTES); }, []); Full code (with function component):
function HomePage(){ const [loadedNotes, setLoadedNotes] = useState([]); useEffect(()=> { //send http request and fetch data....
Day 2 #100DaysOfCode
Day 2 Key Learnings:
pages folder name is reserved in nextjs. Others like components is not reserved. How props are passed to a component. Utilize _app.js for anything that affects all pages like Layout - wrap with Layout component, Navigation (with links) etc Using Programmatic (Imperative) Navigation The usual rule of a Reach Hook: Only use directly only at the root level of component function. (e.g. using useRouter) useRouter has not just query that gives slug, it also has push() whose job is equivalent to Link component Starting point of project with some templates...
Deploy to Heroku
The most updated documentation to get started with Heroku is the official Heroku Dev Center documentation.
Following is to get started with Node.js on Heroku
1. Install git and perform first time git setup Git installation First-time Git setup 2. Install heroku cli from here
3. Login in heroku using heroku cli heroku login On successful authentication, you get success message.
Logging in... done
Logged in as xxxxxxxx@xxxxx.com Prepare the app If dont already have the project in your local, clone it from your remote:...
Too many Chrome Tabs? Use this to find your tab
Ctrl + Shift + A lets you type and select tab by its title:
I tried scraping Twitter
Observed that when doing GET using Axios on https://www.twitter.com/<id> I did not get the HTML that I was expecting (having the tweets etc.) (although got the text in HTML on browser)
Saw this on googling: Twitter has updated their layout to render data primarily through Javascript. You will need to scrape https://mobile.twitter.com rather than https://twitter.com. As mobile twitter still renders html in the source. We will be updating the scraper soon to be able to crawl js rendered content....
