R-SE

https://github.com/tom-wagner/badmovies/tree/sample_solution

R-SE

Main points:

• stateful/ES6 class components vs stateless/functional components

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
 

R-SE

View - the HTML. Model - the data available for the current view. Controller - the JavaScript function that makes/changes/removes/controls the data.

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

<div ng-app="" ng-init="firstName='John'">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>

R-SE

1. Create store

• import { createStore } from 'redux'
• const store = createStore(mainReducer)

2. Use Provider to connect react and redux

• import { Provider } from 'react-redux'

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('app'));

R-SE

https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${videoId}&key=${YOUTUBE_API_KEY}