React JS Movie Info App

Developer
Tushar Mehrotra
Size
4,870 Kb
Views
30,360
  1. React JS Movie Info App Previews
  2. React JS Movie Info App HTML Codes
  3. React JS Movie Info App CSS Codes
  4. React JS Movie Info App JS Codes

How do I make an react js movie info app?

I have created this app to practice react. In this app I am using OMDP API to fetch data for that I am using axios. You can search for movie or season & than click on any particular one & see the full details. I have to do a lot of improvement in this & may be this is not best practice to write react but this is up & running . What is a react js movie info app? How do you make a react js movie info app? This script and codes were developed by Tushar Mehrotra on 13 September 2022, Tuesday.

React JS Movie Info App Previews
IQ Test

React JS Movie Info App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React JS Movie Info App</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React JS Movie Info App - Script Codes CSS Codes

body { background: #D7D6D2;
}
input { display: inline-block; width: 100%; margin: 20px 0; border-radius: 4px; border: 2px solid #000; padding: 10px;
}
li { list-style: none;
}
img { width: 100%; height: 350px;
}
h2 { margin-top: 40px;
}
ul { padding: 0;
}

React JS Movie Info App - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/* Container Component */
var App = function (_React$Component) { _inherits(App, _React$Component); function App(props) { _classCallCheck(this, App); var _this2 = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this2.state = { movies: [], movieFullInfo: {}, isShowingDetails: false }; _this2.handleResponse = _this2.handleResponse.bind(_this2); _this2.handleData = _this2.handleData.bind(_this2); return _this2; } App.prototype.handleResponse = function handleResponse(data) { this.setState({ movies: data.data.Search, isShowingDetails: false }); }; App.prototype.handleData = function handleData(response) { var that = this; axios.get("http://www.omdbapi.com/?i=" + response).then(function (response) { console.log(response); that.setState({ moviefullInfo: response.data, isShowingDetails: true }); }).catch(function (error) { console.log("Error Found " + error); }); }; App.prototype.render = function render() { var componentRender; if (this.state.isShowingDetails) { componentRender = React.createElement(MovieDetails, { movieDetails: this.state.moviefullInfo }); } else { componentRender = React.createElement(Movies, { movieList: this.state.movies, handleData: this.handleData }); } return React.createElement( "div", { className: "container-fluid" }, React.createElement( "h2", null, "Search for Movies or Seasons" ), React.createElement(Search, { handleResponse: this.handleResponse }), componentRender ); }; return App;
}(React.Component);
/* Container Component ends */
/* Search Component */
var Search = function (_React$Component2) { _inherits(Search, _React$Component2); function Search(props) { _classCallCheck(this, Search); var _this3 = _possibleConstructorReturn(this, _React$Component2.call(this, props)); _this3.searchForMovie = _this3.searchForMovie.bind(_this3); return _this3; } Search.prototype.searchForMovie = function searchForMovie(e) { e.preventDefault(); var movie = this.searchMovie.value; var that = this; axios.get("https://www.omdbapi.com/?s=" + movie).then(function (response) { that.props.handleResponse(response); }).catch(function (error) { console.log("Error Found " + error); }); }; Search.prototype.render = function render() { var _this4 = this; return React.createElement( "form", { onSubmit: this.searchForMovie }, React.createElement("input", { type: "text", placeholder: "Search for movie", ref: function ref(input) { return _this4.searchMovie = input; } }) ); }; return Search;
}(React.Component);
/* Search Component ends */
/* Movies Component */
var Movies = function (_React$Component3) { _inherits(Movies, _React$Component3); function Movies(props) { _classCallCheck(this, Movies); return _possibleConstructorReturn(this, _React$Component3.call(this, props)); } Movies.prototype.render = function render() { return React.createElement(Movie, { movieList: this.props.movieList, handleData: this.props.handleData }); }; return Movies;
}(React.Component);
/* Movies Component ends */
/* Movie Component */
var Movie = function (_React$Component4) { _inherits(Movie, _React$Component4); function Movie(props) { _classCallCheck(this, Movie); return _possibleConstructorReturn(this, _React$Component4.call(this, props)); } Movie.prototype.handleId = function handleId(data) { this.props.handleData(data); }; Movie.prototype.render = function render() { var _this = this; var movie = _this.props.movieList.map(function (movie) { return React.createElement( "li", { className: "col-sm-6 col-md-4" }, React.createElement("img", { src: movie.Poster == "N/A" ? "http://buy.barcoding.com/c.3927469/shopflow-qs/img/no_image_available.jpeg?resizeid=5&resizeh=1000&resizew=1000" : movie.Poster }), React.createElement( "p", null, React.createElement( "a", { href: "#", onClick: _this.handleId.bind(_this, movie.imdbID) }, movie.Title ) ) ); }); return React.createElement( "ul", { className: "row" }, movie ); }; return Movie;
}(React.Component);
/* Movie Component ends */
/* Movie Details Component */
var MovieDetails = function (_React$Component5) { _inherits(MovieDetails, _React$Component5); function MovieDetails() { _classCallCheck(this, MovieDetails); return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments)); } MovieDetails.prototype.render = function render() { return React.createElement( "div", { className: "container" }, React.createElement("img", { src: this.props.movieDetails.Poster }), React.createElement( "h2", null, this.props.movieDetails.Title ), React.createElement( "b", null, "IMDB Rating - ", this.props.movieDetails.imdbRating ), React.createElement( "p", null, "Released on - ", this.props.movieDetails.Released ) ); }; return MovieDetails;
}(React.Component);
/* Movie Details Component ends */
ReactDOM.render(React.createElement(App, null), document.querySelector("#app"));
React JS Movie Info App - Script Codes
React JS Movie Info App - Script Codes
Home Page Home
Developer Tushar Mehrotra
Username MTushar
Uploaded September 13, 2022
Rating 3
Size 4,870 Kb
Views 30,360
Do you need developer help for React JS Movie Info App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tushar Mehrotra (MTushar) Script Codes
Name
Animated Responsive Skill Bar
MixItUp With Ajax
Profile card
React Tabs
Angular ToDo App
A Pen by Tushar Mehrotra
Vertical timeline page
Subscribe Newsletter
Portfolio
Codepen Pens
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!