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

I created this because I was frusterated by having to change the integer values when the environments changed for my projects. A simple update of PHP 5.6 (I think it was PHP 5.6.16 to 5.6.17) changed the integer values, which are usually what is suggested to be used in parameters.yml or config.yml.

By using the constants, you don't have to worry about stupid stuff like that. (Since that's what they were designed for.)

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

<?php

namespace AppBundle\Services\Factories;

//Inject the EM and Connection for the configured em that needs to be dynamic.
//I think you can actually just inject the EM, and call ->getConnection() it.
use Doctrine\ORM\EntityManager;
use Doctrine\DBAL\Connection;

//This service gets the dynamic DB creds from the request/user/whatever.

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

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) {