Table of Contents

Now it's time to put together what we learned so far to build together a big project. We'll start with thinking about UI structure while being in the right React mindset

Component structure

Thinking in React

• Componentization
• Where to put state?
  • The higher the better!

Implementation Highlights

App.jsx

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      username: "Lenny",
      list: data.music,
      formVisible: false
    };
  }
...
render() {
    return (
      <div>
        <Header />
        <div className="options">
          <button onClick={this.showForm}>NEW SONG</button>
        </div>
        <SongList
          name={`${this.state.username}'s list`}
          list={this.state.list}
        />
      </div>
    );
  }

This is similar to the Memes view we saw before. The only difference is that we're getting it from a JSON file instead of an API. The list is rendered to SongList which maps songs to Song components and displays it in a grid.

SongForm.jsx

state

class SongForm extends React.Component {
	constructor(props) {
	    super(props);
			this.state = {
	      id: "",
	      title: "",
	      artist: "",
	      album: ""
	    };
	  }
...

We have a state value for each of the form inputs