samsch

import React, {Component} from 'react';
import {connect} from 'react-redux';

import FunctionPlot from './function-plot';

require("../../css/functions.css");

function mapStateToProps(state) {
  return {
    expression: state.expression

samsch

<?php

namespace AppBundle\Services;

use AppBundle\Entity\AnEntityRepo;
use AppBundle\Services\OtherService;
use AppBundle\Services\ThirdService;

class Features
{

samsch

var Hello = React.createClass({
	render: function() {
    	return <div>{this.props.name}</div>;
	}
});

var HelloInput = React.createClass({
	render: function() {
    	return (
        	<div><input value={this.props.name} onChange={ev=>this.props.update(ev.target.value)}/></div>

samsch

//Action type constants don't have to have the same name as their value.
//Really, the const string value doesn't even have to be related to the action itself.
const UPDATE = 'randomValueGeneratedSomehow';

let updateThing = function(newValue) {
    return {
        type: UPDATE,
        payload: newValue,
    }
}

samsch

//Some store thing that has onUpdate as a method for setting listeners.
store.onUpdate(function(newState) {
    ReactDOM.render(
        <App state={newState} />,
        document.getElementById("root")
    );
});

//You either need to call render once here to get things started, or cause a state update.
ReactDOM.render(

samsch

The state shape would be something like:

{
    products: [
        {
            price: 7500,
            name: "Some product",
            //other details
        },
 {

samsch

var React = require('react');

//This would be passed props like:
{
    btns: [
        {id: 'btn1', label: 'Button 1'},
        {id: 'btn2', label: 'Button 2'},
        {id: 'btn3', label: 'Button 3'},
    ],
    onBtnClick: function(btnId) {

samsch

Is it unreasonable to have data that only exist in your selectors and as props passed down from them? For example, I might have a short list of possible items. An action creator sends the new item. The reducer replaces the state with the new item. The component could have the list of items itself, but then it's not associated with state as much as the component. If the list comes from the selector, it's more associated with the state, and can be used in multiple components.

• Seems like it should be able to work.
• One concern could be that the selector might be doing a job it shouldn't be.
• The counter argument is that if you don't put it in the selector, it would need to go somewhere else, namely a component or in the state. If it's not stateful information, in the state doesn't make sense. If the component is supposed to be reusable with different list, then it doesn't make sense there either. The possible answer here is that it would go in a higher-order component or container.

>samssh, yeah you make a

samsch

const React = require('react');
const ReactDOM = require('react-dom');

class Component extends React.Component {
    constructor(props) {
        super(props);
        this.handleButton = this.handleButton.bind(this);
    }
    handleButton(ev) {
        //name needs to be cast to an int since attributes are all strings.

samsch

Before trying to learn React or Redux, or use Webpack/Browserify or Babel, you should make sure you know Javascript at least reasonably well. A great resource learning Javascript is EloquentJS. If you have never programmed before, another great place to learn JS is Codecademy. The best resource for referencing the basic web languages (HTML, CSS, Javascript, and the DOM API) is the Mozilla Developer Network, commonly referred to as MDN.

Basic setup

• Setting Up a React.js Environment Using Npm, Babel 6 and Webpack
• It's potentially hazardous to use ES2015 import/export syntax, as the loading definition is non-existant. Right now Babel compiles it to CommonJS, and it's better to use that directly.

React

• React Docs