For organizational purposes, we created a folder styles inside src folder to place css folders inside.

We will be copying stuff from the html folder inside part 5 of the course (called Appsetup).

We created a stylesheet.css file inside, and copy-pasted some CSS from the course, and imported it in index.js.

Note: unlike components, when you import a stylesheet you have to put .css at the end.

Then, we copied the array from appsetup into our Main.js folder. We also removed import of List.js from our List folder because we will no longer be using it (so also remove the List elements).

Now we will create a new component called PhotoWall (so create PhotoWall.js inside components).

PhotoWall is the container of photos. So Main will mainly hold Title and PhotoWall.

We will also create a Photo.js component for each individual photo.

You will see the rest of code details below.

In video 5 of part 5, he converted all the class components into functional components (easy) but he will probably convert them back.

Class components allow us to use lifecycle methods, whereas functional components do not. In the case when we are only using render inside our class components, and no other methods, it is then better to convert them to functional components, otherwise keep them class.

The code up till video 5 (before we cover state management):

Main

import React, {Component} from 'react';
import Title from './Title';
import PhotoWall from './PhotoWall';

const posts = [{
    id: "0",
    description: "beautiful landscape",
    imageLink: "https://image.jimcdn.com/app/cms/image/transf/none/path/sa6549607c78f5c11/image/i4eeacaa2dbf12d6d/version/1490299332/most-beautiful-landscapes-in-europe-lofoten-european-best-destinations-copyright-iakov-kalinin.jpg" +
    "3919321_1443393332_n.jpg"
    }, {
    id: "1",
    description: "Aliens???",
    imageLink: "https://img.purch.com/rc/640x415/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA3Mi84NTEvb3JpZ2luYWwvc3BhY2V4LWlyaWRpdW00LWxhdW5jaC10YXJpcS1tYWxpay5qcGc=" +
    "08323785_735653395_n.jpg"
    }, {
    id: "2",
    description: "On a vacation!",
    imageLink: "https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2017/08/24/104670887-VacationExplainsTHUMBWEB.1910x1000.jpg"
    }]

class Main extends Component {

    render() {
        return (
            <div>
                <Title title={'PhotoWall'}/>
                <PhotoWall posts = {posts} />
            </div>
        )
    }
}

export default Main

Title

import React, {Component} from 'react';

class Title extends Component {

    render(){
        return <h1> {this.props.title} </h1>
    }
}

export default Title

List

// no longer used

PhotoWall

import React, {Component} from 'react';
import Photo from './Photo';

class PhotoWall extends Component {
    render(){
        return(
            <div className="photoGrid">
                {this.props.posts.map((post, index) => <Photo key={index} post = {post}/>)}
            </div>
        )
    }
}

//in the above, we are looping through the posts array
//that has been passed as props to PhotoWall by Main,
//then for each post, we are calling a function which actually
//calls the Photo component, and pass that individual post to it
//through props

//remember to always give the index as a key so that we don't get an error
export default PhotoWall;

Photo

import React, {Component} from 'react';

class Photo extends Component {
    render(){
        const post = this.props.post
        return (
            <figure className="figure">
                <img className="photo" src={post.imageLink} alt={post.description}></img>
                <figcaption><p>{post.description}</p></figcaption>
                <div className = "button-container">
                    <button className="remove-button">Remove</button>
                </div>
            </figure>
        )

    }
}

export default Photo;

Index

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Main from './components/Main';
import './styles/stylesheet.css';

ReactDOM.render(<Main/>, document.getElementById('root'));

And don't forget that we also included a css file.