OMDB with React Router
In order ease into React Router, we're going to use a familiar API: OMDB. We'll use this API to create a simple application with multiple routes.
Getting Started
Fork and clone the starter repo below to get started.
https://github.com/WDI-SEA/react-omdb
The App
/
- home page with a search form, to display results/results/:imdbID
- page to see movie details/about
- a static about page
OMDB Search Component
After verifying that the starter code runs, let's make a OMDBSearch
component inside a new file src/components/OMDBSearch.jsx
. It should contain the following:
- React
- A new React component
- a
render
function to render some text
- a
- Module export
const React = require('react');
const OMDBSearch = React.createClass({
render: function() {
return (
<div>
<h1>Search for Movies</h1>
</div>
);
}
});
module.exports = OMDBSearch;
About Component
Let's also make an About
component for our About page. It will be very similar to the component above, inside a new file src/components/About.jsx
, only it will say About.
const React = require('react');
const About = React.createClass({
render: function() {
return (
<div>
<h1>About</h1>
<p>Movie searching!</p>
</div>
);
}
});
module.exports = About;
Modify src/app.jsx
to render these components.
const React = require('react');
const ReactDOM = require('react-dom');
const OMDBSearch = require('./components/OMDBSearch');
const About = require('./components/About');
const App = React.createClass({
render: function() {
return (
<div>
<OMDBSearch />
<About />
</div>
);
}
});
ReactDOM.render(<App />, document.getElementById('container'));
Once finished, run gulp
and open the app using nodemon
. The two components should render on the page.
React Router
Now, let's make this a little more useful by installing react-router
, in order to get the OMDBSearch
and About
components to appear on different pages.
npm install --save-dev react-router
Then, require the following dependencies from react-router
in src/app.jsx
.
const Router = require('react-router').Router
const Route = require('react-router').Route
const Link = require('react-router').Link
const browserHistory = require('react-router').browserHistory;
These will give us the necessary modules to add routing to the application. Let's add the Router
and set up Routes
in the render
function inside App
.
const App = React.createClass({
render: function() {
return (
<Router history={browserHistory}>
<Route path="/" component={OMDBSearch} />
<Route path="/about" component={About} />
</Router>
);
}
});
This is what we need to set up our Router. The Router
component contains the routes and history for our frontend routes. Each Route
component contains a path and a component to render for that route.
Try navigating to http://localhost:3000
and http://localhost:3000/about
and see if the routes work.
Search Route
We're missing one route, the route for search results. We'll need one more component for that route, so let's make a component called ShowMovie
in /src/components/ShowMovie.jsx
.
const React = require('react');
const ShowMovie = React.createClass({
render: function() {
return (
<div>
<h1>imdbID: {this.props.params.imdbID}</h1>
</div>
);
}
});
module.exports = ShowMovie;
In the Router, we'll be able to pass parameters through the route, and they'll be available through props
! Completing the Router:
The complete /src/app.jsx
const React = require('react');
const ReactDOM = require('react-dom');
const OMDBSearch = require('./components/OMDBSearch');
const About = require('./components/About');
const ShowMovie = require('./components/ShowMovie');
const Router = require('react-router').Router
const Route = require('react-router').Route
const Link = require('react-router').Link
const browserHistory = require('react-router').browserHistory;
const App = React.createClass({
render: function() {
return (
<Router history={browserHistory}>
<Route path="/" component={OMDBSearch} />
<Route path="/about" component={About} />
<Route path="/results/:imdbID" component={ShowMovie} />
</Router>
);
}
});
ReactDOM.render(<App />, document.getElementById('container'));
Before moving forward, make sure the routes we defined render components. Our next step will be adding movie search functionality to OMDBSearch
and ShowMovie
.