JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
<div id="root">

</div>

Babel + JSX

const TrackList = (props) => (
	<div>
	  {props.tracks.map((track) => (
    	<div key={track.id}>{track.title || track.name} - {track.artist} 
      {props.onAddClick ? 
      	( <button onClick={() => props.onAddClick(track)}>Add</button> ) : null }
      {props.onRemoveClick ?
      	( <button onClick={() => props.onRemoveClick(track.id)}>Remove</button> ): null
      }
      </div>
    ))}
    
    {props.tracks.length === 0 ? 
    	( <strong>No tracks.</strong> ) : null
    }
	</div>
)
/*
const App = ({playlist, add, remove}) => (
	<div>
	  <h2>Current playlist</h2>
    <TrackList tracks={playlist} onRemoveClick={remove}></TrackList>
    <SearchResult onAddClick={add}></SearchResult>
	</div>
)*/

class App extends React.Component {
	
  render () {
  	/*
    // the following code would be required if connect from react-redux is not used
    // -> subscribe to state change and update component
    // So always use React-redux's connect to simplify code
    
    const store = this.context.store;
    console.log(this.props);
    
    const select = (state) => state.playlist;
    let playlist = select(store.getState());
    
    function handleChange() {
      let previousValue = playlist
      playlist = select(store.getState())

      if (previousValue !== playlist) {
        console.log('playlist changed');
        // re-render
        this.forceUpdate();
      }
    }
    
    this.unsubscribe = store.subscribe(handleChange.bind(this));
    // --> also unsubscribing in unmount would be required
    */
    
    console.log('playlist render', this.props);
  	return (
    	<div>
	  <h2>Current playlist</h2>
    <TrackList tracks={this.props.playlist} onRemoveClick={this.props.remove}></TrackList>
    <SearchResult onAddClick={this.props.add}></SearchResult>
      
      <hr/>
      <pre>
        debugging
        {JSON.stringify(store.getState(), null, 2)}  
      </pre>
	</div>
    )
  }
}

console.log('react', PropTypes.object);
App.contextTypes = {
	store:...