https://github.com/andyatkinson/catch-of-the-day

React example application from "React for Beginners" series
https://github.com/andyatkinson/catch-of-the-day

Last synced: about 3 hours ago
JSON representation

React example application from "React for Beginners" series

• Host: GitHub
• URL: https://github.com/andyatkinson/catch-of-the-day
• Owner: andyatkinson
• Created: 2016-02-24T21:19:40.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-05-18T20:06:00.000Z (over 8 years ago)
• Last Synced: 2024-10-09T03:41:17.919Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 109 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
React example application from "React for Beginners" series

## Running the app

`npm install`

`gulp` - start up the gulp server to automatically reload JS and CSS

## Tips

 * Check react dev tool for variables like `$r` to be able to log out a component. Can inspect the component properties.

## React-Router

## History

`npm install history` (uses pushState)

## Helpers

`helpers.js` helper functions

`require('./helpers')` requiring a local relative (sibling) file

`refs`

`getInitialState` part of the react lifecycle

"Spread" = `{...this.props}` passes the props through, alternative to passing functions from parent component to child component one by one.

In Chrome React dev tools, can search for components on bottom.

React component lifecyle - hooks to get in to the component at different points in time

e.g. render(), getInitialState() (right before component is mounted)

Syncing state

`componentDidMount()` invoked once on the client, after rendering occurs (in this example, we fetch the data from firebase)

Would put the ajax request in there too.

`componentWillUpdate` lifecycle event, props changes, state changes, this runs, passes new props and new state

`shouldComponentUpdate`

Bi-directional data flow - ReactLink (link state)

React Catalyst - mixin - deep nest listeners

Prop validation

Component validation - required props, type checking on props, `React.PropTypes.*`

ES6 and Babel, babeljs.io

ES6 de-structuring to import just specific modules