react - Offirmo-team/wiki GitHub Wiki

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'

const SomeViewM = React.memo(
   function SomeView({children, title, onClick}) {
      return (
         <div id="fab">
            <h1>{title}</h1>
            <FloatingActionButton onClick={onClick}>
               {children}
            </FloatingActionButton>
         </div>
      )
   }
)
SomeView.propTypes = {
   onClick: PropTypes.func,
}
SomeView.defaultProps = {
   onClick: () => {},
}

import ReactDOM from 'react-dom'

var foo = React.createElement('li', null, 'First Text Content');
ReactDOM.render(foo, document.getElementById('example'));

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'

// https://facebook.github.io/react/docs/reusable-components.html
class CoolComponent extends React.Component {
   static propTypes = {
      ...
   }
   static defaultProps = {
      initialCount: 0
   }

   state = {
      ...
   }

   constructor (props) {
      console.info('~~ constructor', arguments)
      super(props)
   }

	// inheriting :
	// .state => NEVER mutate this.state directly, treat this.state as if it were immutable.
	// this.setState(state => ({bubbles: state.bubbles.slice(0, -1)})) XXX asynchronous, don't expect this.state to mutate immediately
	// .replaceState(nextState, [callback]) XXX do not use, pending removal
	// .forceUpdate([callback])
	// setProps


	// NO "This is only supported for classes created using React.createClass.
	// Did you mean to define a state property instead?"
	/*getInitialState () {
		console.info('~~ getInitialState', arguments)
		return {
			foo: 42
		}
	}*/

	// NO "This is only supported for classes created using React.createClass.
	// Use a static property to define defaultProps instead."
	/*getDefaultProps () {
		console.info('~~ getDefaultProps', arguments)
		return {
			value: 'default value'
		}
	}*/

	// invoked once
	componentWillMount () {
		console.info('~~ componentWillMount', arguments)

	}

	render () {
		console.count('~~ render')
		console.info('~~ render', arguments)
		return (
			<p>
				Hello, <input type="text" placeholder="Your name here" /> !<br />
				{this.props.children}
			</p>
		)
	}

	// invoked once, client only
	componentDidMount () {
		console.info('~~ componentDidMount', arguments)

	}

	// https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops
	// REM : props may NOT have changed
	// cf. https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html
	componentWillReceiveProps (nextProps) {
		console.info('~~ componentWillReceiveProps', arguments)

	}

	// https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate
	shouldComponentUpdate (nextProps, nextState) {
		console.info('~~ shouldComponentUpdate', arguments)
		return true // optimisation possible
	}

	// https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate
	// REM : NOT called in the initial rendering
	componentWillUpdate (nextProps, nextState) {
		console.info('~~ componentWillUpdate', arguments)
		return true // optimisation possible
	}

	// https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate
	componentDidUpdate (prevProps, prevState) {
		console.info('~~ componentDidUpdate', arguments)

	}

	// https://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount
	componentWillUnmount () {
		console.info('~~ componentWillUnmount', arguments)

	}
}

// CoolComponent.mixins

// CoolComponent.statics


ReactDOM.render(
	<CoolComponent />,
	document.getElementById('example')
)

// To render an HTML tag, just use lower-case tag names in JSX:

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

// To render a React Component, just create a local variable that starts with an upper-case letter:

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

// React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

<Person name={window.isLoggedIn ? window.name : ''} />
<input type="button" disabled={true} />
<Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>
  <Nav>
    {/* child comment, put {} around */}
    <Person
      /* multi
         line
         comment */
      name={window.isLoggedIn ? window.name : ''} // end of line comment
    />
  </Nav>

<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />
<div data-custom-attribute="foo" />

import PropTypes from 'prop-types'

PropTypes.bool,
PropTypes.func,
PropTypes.number,
PropTypes.object,
PropTypes.string,
PropTypes.element, // A React element.
PropTypes.node, // Anything that can be rendered: numbers, strings, elements or an array (or fragment) containing these types

PropTypes.array,
PropTypes.arrayOf(PropTypes.number),


// You can also declare that a prop is an instance of a class. This uses JS's instanceof operator.
PropTypes.instanceOf(Message),

// You can ensure that your prop is limited to specific values by treating it as an enum.
PropTypes.oneOf(['News', 'Photos']),

// An object that could be one of many types
PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.instanceOf(Message)
]),

// An object with property values of a certain type
PropTypes.objectOf(PropTypes.number),

// An object taking on a particular shape
PropTypes.shape({
      color: PropTypes.string,
      fontSize: PropTypes.number
}),

// You can chain any of the above with `isRequired` to make sure a warning is shown if the prop isn't provided.
PropTypes.func.isRequired,

// A value of any data type
requiredAny: PropTypes.any.isRequired,

let children = state.children.map(c => c.element)
	children = React.Children.map(children, (child, index) => {
		return (typeof child === 'string')
			? child
			: React.cloneElement(child, {key: `${index}`})
	})

const children = React.Children.map(this.props.children, child => {
        const { value } = child.props
          return React.cloneElement(child, {
              isActive: value === this.state.value,
              onClick: () => {console.log(value); this.setState({value})},
          })
      })

import { Router, hashHistory } from 'react-router'
import { routes } from './routes'

<Router history={hashHistory}>
  { routes() }
</Router>

import SubAppRoutes from '../subapp/routes'

export function routes() {
  return (
    <Route>
      <Route path='dependencies'
        component={Dependencies} />
      <Route path='download'
        component={Download} reducer={downloadReducer} />

      {WebAppRoutes() }

    </Route>
  )
}