Frontend

Where to put the data fetching code? componentWillMount() ? Not any more. It’s been deprecated. You have no choice but put it inside componentDidMount() , which is recomendded by React. However ther is a big issue. componentDidMount() is actually AFTER render(). It "works" because after componentDidMount() finishes its job and changes some state, render() will …

Load data from backend before rendering a React component – best practice Read More »

It doesn’t disappear after window closed It doesn’t expire The old standard of it only allow string to be saved. New standard is not like so, but all mainstream browsers still use the old standard.

An anoying surprise

I set no margin or padding at all, but there is white space above the header. <header style=”background-color:gray”> <h1>Test margin collapsing</h1> </header> There is no margin in the "header" or "h1". So why? First of all, the browser adds margin to "h1". Open your developer console, you can see things like "-webkit-margin-before: 0.67em;" So there …

Why is there white space above the header? Read More »

I did a test about this. If Your site is www.host.com The iframe src is also www.host.com Then sanbox + "allow-same-orign" enabled => window.origin will be "www.host.com" sanbox + "allow-same-orign" DISABLED => window.origin will be null If Your site is www.host.com The iframe src is www.guest.com Then sanbox + "allow-same-orign" => window.origin will be "www.guest.com" …

What will the window.origin be in html5 sandbox iframes? Read More »

How can a ajax call fit into Redux paradigm? State: The state will be updated after ajax call is over. No problem. Reducer: Reducer will change the state when ajax call is over. No problem. Action: Action can be used to define "Ajax call over" But where to put the logic of really doing an …

Ajax in Redux with Thunk – Can’t be more weird Read More »

You can dispatch an action inside your component, for example, when a button is clicked, like render(){ return ( <div> … <div> <button onClick={ e => this.context.store.dispatch({type: ‘counterChange’, amount: 1}) }> + </button> <button onClick={ e => this.context.store.dispatch({type: ‘counterChange’, amount: -1}) }> – </button> </div> </div> ); } But a more preferred way is to …

Redux weird thing 3 – Action Creator Read More »

So a "container" component will be introduced to wrap the original one. The container component will adapt the store structure to "input parameters" the original one needs. Therefore, the original one doesn’t need to access store directly and will be reusable again. //The reusable component, which doesn’t access store any more class CounterComponent extends Component …

Redux – avoid to pass props down component tree manually – 3. Use an extra container component to keep the original one reusable Read More »

With connect() you don’t have to manually write the container component as a Component class. const CounterComponentContainer = connect( // store.state => props of child component. Normally it’s extracted as a function called mapStateToProps() state => { return {counter: state.counter} }, // store.dispatch => props of child component. Normally it’s extracted as a function called …

Redux – avoid to pass props down component tree manually – 4. Build container components more easily with connect() Read More »

Disclamer: “Weird” is a neutral word here. In Redux you are supposed to put “all” the data in the store. However, “temp” data like unsubmitted form input, should be inside the components. Data in the store should be cleaned, “official” daa.