My third React project

Travel Journal

I would say this has been my most engaging React project so far. Phew!

What I Learned

  • Props: one of the most fundamental topics in React. They help me easily write composable code.

  • Mapping Data: using the JavaScript map() function, this allows me to manipulate an array of data and transform them into an array of components (or JSX elements) in order to render them to the browser. See mapping in action in the example below:

...
// get the array from the file
import data from './data' 

export default function App() {
    // iterate over each array item and create a Card component each time
    const places = data.map(place => <Card />);
    console.log(places); // new array: [<Card />, <Card />, <Card />]
    return (
        <>
            {places} // array elements are rendered to the browser
        </>
    )
}

Screenshot 2022-02-22 034710.jpg

Thank you Scrimba for the amazing learning platform. You rock! ❤ happy.gif