React Notes

General:

github.com/stephengrider
project link: https://github.com/StephenGrider/ReduxCasts

Screen Shot 2017-11-03 at 11.31.26 AM.png

1.

1.1JSX
1.2 state
two kinds of component:

• functional component
• class component - this one has state property.

1.3 classes
1.4 Arrow functions

2. Redux

Screen Shot 2017-11-06 at 9.17.26 AM.png
Redux is the data contained inside the application box.
React is really the views contained

2.1 State vs Prop
state: changes in the internal value, did not change the rest of the app
prop: injected into other components

function mapStateToProps(state) {
  //whatever is returned will show up as props inside
  return {
  asdf: '123' 
 };
}

component state is different from the application state

2.2
Component

import React from 'react';
import ReactDOM from 'react-dom';
//functional component
const SearchBar = () =>{
  return <input />;
};


//class based component
import React, {Component} from 'react';

class SearchBar extends Component {
  render(){
   return <input />; 
  }
}

export default SearchBar

2.3 State

import React, {Component} from 'react';

class SearchBar extends Component {
 constructor(props){
  super(props)
 };
 this.state = {term: ''};
}

render() {
 return <input onChange = {event => console.log(event.target.value)} />;
}

export default SearchBar;