building_react.md

1. This is what goes in index.js import React from 'react'; import ReactDOM from 'react-dom'; import './base.scss'; import App from './containers/App/App'; import { Provider } from 'react-redux' import { createStore } from 'redux' import { composeWithDevTools } from 'redux-devtools-extension'; import { rootReducer } from './reducers/index.js'

const store = createStore(rootReducer, composeWithDevTools())

`ReactDOM.render(

, document.getElementById('root') );`

2. This is a class component

`import React, { Component } from 'react'; import './LoginForm.scss'; import User from '../User/User'; import { connect } from 'react-redux'; import { chooseUser } from '../../actions/index.js';

export class LoginForm extends Component { constructor() { super() this.state = { userName: "", error: false, } }

generateUsers = () => { return this.props.hostList.map(host => { return ( ) }) }

handleChange = (event) => { this.setState({[event.target.name]: event.target.value}) }

render() { return ( chosenUser.name &&

stuff {generateUsers()} <button className="back-button" onClick={()=> clickHandler '/'}>Back

)

} } `

notice it extends component and needs a render() with a return. The chosenUser.name makes sure that that info has rendered before the render does.

3. This is a functional component

`import React from 'react' import './HostPage.scss'

export const User = ({user}) => { return (

Meet {user.name}!

) }

export default User;`