The gh-user-finder from heron2014

gh-user-finder

Github user finder and note taker application build with React

Reference

Project based on tutorial from egghead

gh-user-finder's People

Contributors

Watchers

gh-user-finder's Issues

Create Firebase database

ReactFire module bounds FireBase database to our Components state. If our component state changes, it will automatically update the databse

npm install reactfire --save
npm install firebase --save

Can't use mixins with ES6

article about react and es 6

Because I couldn't find solution atm I am changing the ES6 into ES5 for this component (Profile.js)
After changes I got this error:

possible solution-warning-react-createelement

Router

Start react-router

What is IndexRoutes - here - specify children routes, if a component doesn't match any path

You don't need to define your children components in the parent to render.

class App...

render () {
  return (
    <SomeComponent />
  )
}

in your main.js /routes

<Route path='/' component={App}>
      <IndexRoute component={SomeComponent} />
    </Route>

Then in your App,js

class App...

render () {
  return (
    <div>
    {this.props.children}
    </div>
  )
}

Creating profile user, bios, notes

Creating children components of Profile.js as stateless components (basic).

set up the project - react, webpack, babel

Steps:

- npm init
- npm install react --save // you can install specific version like [email protected] 
- npm install react-dom --save // you can install specific version like [email protected]
//install dev dependencies 
// babel is compiler which will translate es6 to es5 so the browser can read it
- npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react
- install babel-preset-stage-0 --save-dev 
- npm install webpack webpack-dev-server --save-dev
- npm install eslint-plugin-react --save-dev 
//you can isntall webpack as global so you wont have to do previous step
// like npm install webpack -g