React Crash Course for Beginners, Part 4

In this final tutorial in our React series, we'll create a new <AddMovie /> component for adding new movies manually via a custom form. This will bring development for the 'Movie Mojo' app to a close.

The code for the final project is available to download via the link to the right of the screen (you might need to scroll down). Later on I'll provide step-by-step instructions on how to get the project up and running on your system.

Create the AddMovie Component

The <AddMovie /> component outputs a form to allow users to manually enter details about an individual film and add it to the existing movies in the gallery once the form has been submitted.

The form requires three text inputs for title, year, and poster image; plus a text area for the movie description. In /src/components/, create a new file called AddMovie.js and add the following:

import React, { Component } from 'react';

class AddMovie extends Component {
  render() {
    return (
      <form className="movie-form">
        <p>Add a Movie</p>
        <input ref={ ( input ) => this.title = input } type="text" placeholder="Title" />
        <input ref={ ( input ) => this.year = input } type="text" placeholder="Year" />
        <input ref={ ( input ) => this.poster = input } type="text" placeholder="Poster" />
        <textarea ref={ ( input ) => this.description = input} placeholder="Description">
        </textarea>
        <button type="submit">Add Movie</button>
      </form>
    );
  }
}

export default AddMovie;

The React ref attribute stores a reference to each form input field as a component class property. We'll use these references shortly as a way to easily grab input field values.

Firstly, though, add the following styles to App.css to make the form a little more aesthetic:

/* movie form styles */

.movie-form {
  width: 250px;
  margin: 0 auto;
}

.movie-form input, .movie-form textarea {
  width: 250px;
  font-size:14px;
  padding: 5px;
  margin: 5px;
}

.movie-form button {
  font-size: 16px;
  padding: 4px;
  margin: 10px 10px 30px 10px;
}

In App.js, add the <AddMovie /> component inside the closing <div> wrapper element:

<AddMovie />

Then, at the top of the file, import the <AddMovie /> component to make it available.

import AddMovie from './AddMovie';

Your 'Movie Mojo' app should now display a form towards the bottom of the browser window.

We need to specify a callback method that executes whenever the form is submitted, which we can use to create a new movie. Add this to the <form> element:

onSubmit={(e) => this.addNewMovie(e)}

Then, add the addNewMovie() method to the top of the <AddMovie /> component class:

addNewMovie(e) {
  e.preventDefault();
  var movie =  {
    title: this.title.value,
    year: this.year.value,
    description: this.description.value,
    poster: this.poster.value
  };
  console.log(movie);
}

The first task is to prevent the default submission event from firing, which we do with e.preventDefault(). Otherwise, when the form is submitted, the web page will automatically refresh, which is not what we want.

Then, we create a new movie object by grabbing the form input field values we conveniently stored as component class properties earlier.

A console.log() command outputs the movie object so we can test it's being created correctly upon form submission.

Once you're satisfied the movie object is being correctly generated, go ahead and delete the console.log() call.

In order to display the new movie in our gallery, we need to add it to the movie state object. Once this is done, React will take care of updating the DOM for us.

To accomplish this, create a new method in App.js (where the app state object lives) to handle adding a movie to the current state.

addMovieToGallery( movie ) {
  console.log( 'mooooooovie', movie );
}

Don't forget to bind the new method to the this so it's available throughout the class.

this.addMovieToGallery = this.addMovieToGallery.bind( this );

Incidentally, you may wonder why we needed to do this here but not for the addNewMovie() method we added to the <AddMovie /> component above. This is a side effect of using an ES6 arrow function, as it automatically binds this for you. This little trick is well worth remembering as it reduces the code complexity, whilst improving your code's readability.

To use addMovieToGallery() in our <AddMovie /> child component code, we simply pass down a reference to it via props. In App.js, update the <AddMovie /> call to be:

<AddMovie addMovie={this.addMovieToGallery} />

Back in AddMovie.js, update the addNewMovie() method to pass the movie object to the addMovieToGallery() method via the addMovie prop we just created.

addNewMovie(e) {
  e.preventDefault();
  var movie =  {
    title: this.title.value,
    year: this.year.value,
    description: this.description.value,
    poster: this.poster.value
  };
  this.props.addMovie( movie );
}

Now, when we fill out the form, we get the movie object outputted to the console, as before, but this time it's via the addMovieToGallery() method in the <App /> component.

Delete the console.log() command in addMovieToGallery() and replace it with the following code to add the entered movie details to the movies state object:

addMovieToGallery( movie ) {
  var ts = Date.now();
  var newMovie = {};
  newMovie[ 'movie' + ts ] = movie;
  var currentMovies = { ...this.state.movies };
  var newMovies = Object.assign( currentMovies, newMovie );
  this.setState({ movies: newMovies });
}

This is pretty similar to what we did in part three for the loadAdditionalMovies() method. The main difference is that a unique key needs to be generated, on the fly, for each additional movie entry. This is achieved by using the current time stamp as the unique key and appending it to movie.

This will result in each additional movie, added via the form, having unique keys.

movie1501686019706
movie1501686027906
movie1501686032929

... and so on.

Open up the 'Movie Mojo' app in the browser and add two new movies to the gallery via the form. There are extra movie poster images added to the ./public/posters/ folder for convenience, so you can easily test adding movies to the gallery. You can access these by downloading the finished app project.

Each time you submit the form, an additional movie is added to the gallery!

Installing Movie Mojo

Click the link to the right (about halfway down the page) to download the finished 'Movie Mojo' project zip file. Once it's extracted, open a command-line window and navigate to the movie-mojo directory, and enter:

npm install

This will take a few minutes to download all the 'Node.js' modules needed to run the project.

Then type:

npm start

This will compile the React app and open it in a browser via a dedicated mini web server.

Conclusion

We've covered quite a lot in this four-part tutorial series, so congratulations if you've made it all the way through and followed along with the code.

You should now feel comfortable with the basics of React, and this will hopefully give you the confidence to go on and build more complicated apps.

I'd recommend downloading the 'Movie Mojo' project and examining the source code to make sure you understand how it all fits together.

There's lots of scope to extend the app, so why not try to come up with some new extra features? This is also a great way of cementing your learning, by attempting to implement new React elements to the app.

Here are some ideas you could consider adding:

• Add UI and code to remove movies from the gallery.


• Allow sorting by movie title, year, etc.


• Introduce a ratings system.

I'd love to hear any feedback you might have about this tutorial via the comments below. Did you find it easy to follow, or were there parts you struggled with? I'm always looking to make my tutorials better, so feedback is always very welcome.

Happy React coding!