Understanding React — Component life-cycle – Bartosz Szczeciński – Medium

Understanding #ReactJS: Component life-cycle

  • DOupdate state via this.setStateperform last minute optimizationcause side-effects (AJAX calls etc.) in case of server-side-rendering onlyDON’Tcause any side effects (AJAX calls etc.) on client function will be called in each update life-cycle caused by changes to props (parent component re-rendering) and will be passed an object map of all the…
  • == this.props.myProps) { // nextProps.myProp has a different value than our current prop // so we can perform some calculations based on the new value }}Due to the fact that with React Fiber (post 16 beta) this function might be called multiple times before the renderfunction is actually called it…
  • == this.props.myProp) { // this.props.myProp has a different value // we can perform any operations that would // need the new value and/or cause side-effects // like AJAX calls with the new value – this.props.myProp }}DOcause side effects (AJAX calls etc.)DON’Tcall this.setState as it will result in a re-renderAn exception…
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render errorInfo)A new addition in React 16 — this life-cycle method is special in way that it can react to events happening in the child component, specifically to any uncaught…
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render loop.componentWillUnmountUse this function to “clean up” after the component if it takes advantage of timers (setTimeout, setInterval), opens sockets or performs any operations we need to close…

React provides developers with many methods or “hooks” that are called during the life-cycle of an component, which allows us to update the UI and application state. Knowing when to use which of them…
Continue reading “Understanding React — Component life-cycle – Bartosz Szczeciński – Medium”

How to Build a Todo App Using React, Redux, and Immutable.js — SitePoint

  • This helps us get a feel for what we’re going to need our components to render:
    const dummyTodos = [
    { id: 0, isDone: true, text: ‘make components’ },
    { id: 1, isDone: false, text: ‘design actions’ },
    { id: 2, isDone: false, text: ‘implement reducer’ },
    { id: 3, isDone: false, text: ‘connect components’ }
    ];

    For this application, we’re only going to need two React components, Todo / and TodoList /.

  • js

    import React from ‘react’;

    export function Todo(props) {
    const { todo } = props;
    if(todo.isDone) {
    return strike{todo.text}/strike;
    } else {
    return span{todo.text}/span;
    }
    }

    export function TodoList(props) {
    const { todos } = props;
    return (
    div className=’todo’
    input type=’text’ placeholder=’Add todo’ /
    ul className=’todo__list’
    {todos.map(t = (
    li key={t.id} className=’todo__item’
    Todo todo={t} /
    /li
    ))}
    /ul
    /div
    );
    }

    At this point, we can test these components by creating an index.html file in the project folder and populating it with the following markup.

  • /components’;

    const dummyTodos = [
    { id: 0, isDone: true, text: ‘make components’ },
    { id: 1, isDone: false, text: ‘design actions’ },
    { id: 2, isDone: false, text: ‘implement reducer’ },
    { id: 3, isDone: false, text: ‘connect components’ }
    ];

    render(
    TodoList todos={dummyTodos} /,
    the code with npm run build, then navigate your browser to the index.html file and make sure that it’s working.

  • Our dummy data is a great place to start from, and we can easily translate it into ImmutableJS collections:
    import { List, Map } from ‘immutable’;

    const dummyTodos = List([
    Map({ id: 0, isDone: true, text: ‘make components’ }),
    Map({ id: 1, isDone: false, text: ‘design actions’ }),
    Map({ id: 2, isDone: false, text: ‘implement reducer’ }),
    Map({ id: 3, isDone: false, text: ‘connect components’ })
    ]);

    ImmutableJS maps don’t work in the same way as JavaScript’s objects, so we’ll need to make some slight tweaks to our components.

  • The mapStateToProps function takes the store’s current state as an argument (in our case, a list of todos), then it expects the return value to be an object that describes a mapping from that state to props for our wrapped component:
    function mapStateToProps(state) {
    return { todos: state };
    }

    It might help to visualize this on an instance of the wrapped React component:
    TodoList todos={state} /

    We’ll also need to supply a mapDispatchToProps function, which is passed the store’s dispatch method, so that we can use it to dispatch the actions from our action creators:
    function mapDispatchToProps(dispatch) {
    return {
    addTodo: text = dispatch(addTodo(text)),
    toggleTodo: id

Dan Prince shows how to build a Todo app using React, Redux, and Immutable.js.
Continue reading “How to Build a Todo App Using React, Redux, and Immutable.js — SitePoint”

Re-created Twitter Moments using my Parallax Swiper component. #reactnative

Re-created Twitter Moments using my Parallax Swiper component. #reactnative

  • This component is inspired by an iOS pattern that no react-native-parallax-whatever previously delivered.
  • It emulates this pattern by using the ScrollView component which has features like velocity, paging, and platform specific easing curves; It also has optional dividers to split up each page.
  • You can see this pattern in apps like iOS Camera Roll, Twitter Moments, Kylie Jenner’s app, Vevo’s app, and more.
  • Hit me up on Twitter, or create an issue.

react-native-parallax-swiper – Full Screen Parallax Swiper Allowing Arbitrary UI Injection
Continue reading “Re-created Twitter Moments using my Parallax Swiper component. #reactnative”

Understanding React — Component life-cycle – Bartosz Szczeciński – Medium

  • DOupdate state via this.setStateperform last minute optimizationcause side-effects (AJAX calls etc.) in case of server-side-rendering onlyDON’Tcause any side effects (AJAX calls etc.) on client function will be called in each update life-cycle caused by changes to props (parent component re-rendering) and will be passed an object map of all the props passed, no matter if the prop value has changed or not since previous re-render phase.This function is ideal if you have a component whose parts of state are depending on props passed from parent component as calling this.setState here will not cause an extra render call.Please keep in mind that due to the fact that the function is called with all props, even those that did not change it is expected the developers implement a check to determine if the actual value has changed, for { if(nextProps.myProp !
  • == this.props.myProps) { // nextProps.myProp has a different value than our current prop // so we can perform some calculations based on the new value }}Due to the fact that with React Fiber (post 16 beta) this function might be called multiple times before the renderfunction is actually called it is not recommended to use any side-effect causing operations here.DODON’Tcause any side effects (AJAX calls nextState, nextContext)By default, all class based Components will re-render themselves whenever the props they receiver, their state or context changes.
  • == this.props.myProp) { // this.props.myProp has a different value // we can perform any operations that would // need the new value and/or cause side-effects // like AJAX calls with the new value – this.props.myProp }}DOcause side effects (AJAX calls etc.)DON’Tcall this.setState as it will result in a re-renderAn exception to the above rule is updating the state based on some DOM property which can be only computed once a component has re-rendered (e.g. position / dimensions of some DOM nodes).
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render errorInfo)A new addition in React 16 — this life-cycle method is special in way that it can react to events happening in the child component, specifically to any uncaught errors happening in any of the child components.With this addition you can make your parent-element handle the error by — for example — setting the error info in state and returning appropriate message in its render, or logging to reporting system, errorInfo) { this.setState({ error: errorString }); { if(this.state.error) return ShowErrorMessage error={this.state.error} / return ( // render normal component output );}When an error happens, the function will be called message of the errorerrorInfo — an object with a single field componentStack which represent the stack trace back to where the error occured, e.g.:in Thrower in div (created by App) in AppcomponentDidMountThis function will be called only once in the whole life-cycle of a given component and it being called signalizes that the component — and all its sub-components — rendered properly.Since this function is guaranteed to be called only once it is a perfect candidate for performing any side-effect causing operations such as AJAX requests.DOcause side effects (AJAX calls etc.)DON’Tcall this.setState as it will result in a re-renderAn exception to the above rule is updating the state based on some DOM property which can be only computed once a component has re-rendered (e.g. position / dimensions of some DOM nodes).
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render loop.componentWillUnmountUse this function to “clean up” after the component if it takes advantage of timers (setTimeout, setInterval), opens sockets or performs any operations we need to close / remove when no longer needed.DOremove any timers or listeners created in lifespan of the componentDON’Tcall this.setState, start new listeners or timersComponent cyclesThere are multiple reasons a component might re-render, and in each of them different functions are called allowing the developer to update certain parts of the Component.Component creationThe first cycle is the creation for component, which usually happens the first time a component is encountered in the parsed JSX tree:Component re-rendering due to re-rendering of the parent componentComponent re-rendering due to internal change (e.g. a call to this.setState())Component re-rendering due to call to this.forceUpdateComponent re-rendering due to catching an errorIntroduced in React 16 as “ErrorBoundaries”.

React provides developers with many methods or “hooks” that are called during the life-cycle of an component, which allows us to update the UI and application state. Knowing when to use which of them…
Continue reading “Understanding React — Component life-cycle – Bartosz Szczeciński – Medium”

Iterators Using ES6 – Felipe Valdivia – Medium

  • However, as is often the case when a task occurs frequently, JavaScript now provides methods that simplify this task.These methods, called iterators, are called on arrays and complete such tasks as altering each element and selecting elements that fit certain criteria.So in this article you are going to learn how to use some of this iterator.
  • forEach()” will execute the same code on each element of an array.forEach() ExampleThis iterator will execute the same code on each element of an array, so in the example above we are going to go over each element in our array and print it on the console, the argument that you can see in parenthesis doesn’t matter in this case we are using “fruitItem” because is a good practice to have descriptives names.
  • map() iterator but in this case we are creating a new array with the result, so we need to create the variable and inside the block have the condition, that in this case we are going to create a new array with all the numbers divided by 100.
  • filter() exampleIn this example you can see how with filter we go over all the items but we just return the ones that are shorter than 6 characters creating a new array just with these data that is already filter for our condition.ConclusionYes I know this article is short but I present to you 3 different types of iterator using javascript with this you can start playing with them creating projects just to get familiar with them.I can give you some research task that you can do, look for this 3 other that they are pretty common and learn how to use them, I hope you can start a project with this information or solve different problems.so briefly we can say:.
  • filter() checks every element in an array to see if it meets certain criteria and returns a new array with the elements that return truthy for the criteria.You can visit the Mozilla Developer Network to learn more about iterator methods (and all other parts of JavaScript!)

Hello guys this is my second article here about front end and this time I am going to be talking about the different iterators that we have in EcmaScript6. The idea of this post is just show you some…
Continue reading “Iterators Using ES6 – Felipe Valdivia – Medium”

Code your own combineReducers – Jakob Lind

New post! Code your own combineReducers function.  #reactjs #redux #javascript

  • A reducer is a function that takes the Redux state and a Redux Action as input parameters.
  • The combineReducer function call takes an object with reducers.
  • We now have the function combineReducers that accepts reducers as input parameters.
  • As we learned in the beginning in this article, a normal Redux reducer is a function that takes two parameters: state and action.
  • The output after running getState should be an object with all the reducer names as keys and the state as the value.

It’s time for a completely different approach. To master Redux, we will code it from scratch. Today it’s time for the combineReducer function.
Continue reading “Code your own combineReducers – Jakob Lind”