Simple, Touch-Friendly carousel component for @reactjs #reactjs #react-component

Simple, Touch-Friendly carousel component for @reactjs #reactjs #react-component

  • The basic carousel sample.The Carousel component returns a callback function with the following arguments.
  • and must be passed down to the elements – – But the Carousel component also returns other arguments, like , , , , , – – For the component to work, for example, on mobile devices, set the value to true for touching.
  • Set the value for and place the argument in your jsx template – – When you stop moving your mouse triggers a function which calculates the position of the elements.
  • For example, you want to fetch data or trigger some function when you reach the end of the carousel.
  • The default value for is 0 – – must be passed to the component – – Use the arguments and from the callback.

react-awesome-carousel – Simple, Touch-Friendly carousel component for React.js
Continue reading “Simple, Touch-Friendly carousel component for @reactjs #reactjs #react-component”

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

Understanding React — Component life-cycle

#react #reactjs #js

  • 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”

The most unknown redux performance trick – Julien De Luca – Medium

  • The most unknown redux performance trickRegarding optimizing redux, there are some well known techniques: memoizing, using reselect for example.But there is one that remains unknown to many, although it’s simple and very efficient: The connect’s areStatesEqual option.When state changes, all connect functions will be called, props mapped from state and…
  • Imagine something like this :Considering action addTodo adds a todo item in the todo reducer, when this action will be called, both connect will then be called and mapStateToProps computed.Using areStatesEqual option, you can tell when not to bother to call mapStateToProps at all.The docs say :[areStatesEqual] (Function): When pure, compares incoming…
  • This function is passed 2 arguments: the previous state, and the next state.
  • You return a boolean telling whether the two states have changed, regarding the state slice you’re interested in, and if the function returns true, mapStateToProps will not even be called.Let’s update our example to use this function :Now, when state.users.all changes, the TodoContainer’s areStatesEqual option will be called, it will return…
  • It makes much more sense when using more complex mapStateToProps.Memoization remains useful when using props in mapStateToProps and methods that return new objects or arrays.Perfs gain can be really impressive only using this simple trick.Enjoy !

Regarding optimizing redux, there are some well known techniques: memoizing, using reselect for example. But there is one that remains unknown to many, although it’s simple and very efficient: The…
Continue reading “The most unknown redux performance trick – Julien De Luca – Medium”

Deep dive into observed Components with React.js and FrintJS

  • Higher-order componentThe API of the observe higher-order component (HoC) is quite simple:import React from ‘react’;import { observe } from ‘frint-react’;function MyComponent(props) { return div…/div;}const ObservedComponent = default ObservedComponent;It receives a function (that we called fn above), where you can generate your props that will be ultimately passed to your target…
  • Generating props synchronouslyThe fn function also gives you access to the FrintJS App’s instance:const ObservedComponent = observe(function (app) { // this will be the `props` in MyComponent return {}; })(MyComponent);Since you have access to your app instance, you can also get values from it, including providers:const ObservedComponent = observe(function (app)…
  • Because they have this dynamic nature, the observe HoC gives you access to parent props as an Observable:const ObservedComponent = observe(function (app, props$) { // …})(MyComponent);In addition to your FrintJS App instance (app), there is a second argument props$, which is props passed down to you from the parent Component…
  • But as your application grows, there will be times, when you need to work with multiple Observables and return a single props stream.This is where a helper function called streamProps shipped with frint-react can come handy.If you are an RxJS ninja, you may skip this part =DThe streamProps function will…
  • In that case, you may want to pass some default props to your target component before new values are generated.The streamProps helper function receives an optional first argument, where you can pass your default props:import { streamProps } from ‘frint-react’;const defaultProps = { foo: ‘n/a’, bar: ‘n/a’, baz: ‘n/a’,};const props$…

Our focus in this article will be about using the observe higher-order component, shipped from frint-react package. To make the most out of this, it is advised that you read these previous articles…
Continue reading “Deep dive into observed Components with React.js and FrintJS”

React State vs Props explained – codeburst

  • Let me define a React component a plain javascript function side by side.class DummyComponent extends React.Component { render () { return divHey/div }}const DummyFunction = () = console.log(‘Hey’)We defined a React component named DummyComponent and returned a div containing text Hey similarly, we defined a function named DummyFunction and output…
  • Let’s take a look at State.React Component StateA state in React Component is its own local state, the state cannot be accessed and modified outside the component and can only be used inside the component which is very similar to, you already guessed it a function own local scope.
  • Let’s demonstrate this with an example.class DummyComponent extends React.Component { state = { name: ‘Manoj’ } render() { return divHello {this.state.name}/div; } }const DummyFunction = () = { let name = ‘Manoj’; console.log(`Hey ${name}`)}As you can see a component state can be compared to a function local scope.
  • Let’s take a look how we can use props in react.class DummyComponent extends React.Component { render() { return divHello {this.props.name}/div; } }// when using the componentDummyComponent name=”Manoj” /DummyComponent name=”Ajay” /We used one react component in multiple places here but with a different name.
  • Props, on the other hand,make components reusable by giving components the ability to receive data from the parent component in the form of props.We also get to know that React components are pretty similar to normal JS functions so from the next time keep this thing in mind 😉 .

Before jumping to state vs props we have to compare a React component with a javascript plain function. Let me define a React component & a plain javascript function side by side. We defined a React…
Continue reading “React State vs Props explained – codeburst”

The most unknown redux performance trick – Julien De Luca – Medium

  • The most unknown redux performance trickRegarding optimizing redux, there are some well known techniques: memoizing, using reselect for example.But there is one that remains unknown to many, although it’s simple and very efficient: The connect’s areStatesEqual option.When state changes, all connect functions will be called, props mapped from state and…
  • Imagine something like this :Considering action addTodo adds a todo item in the todo reducer, when this action will be called, both connect will then be called and mapStateToProps computed.Using areStatesEqual option, you can tell when not to bother to call mapStateToProps at all.The docs say :[areStatesEqual] (Function): When pure, compares incoming…
  • This function is passed 2 arguments: the previous state, and the next state.
  • You return a boolean telling whether the two states have changed, regarding the state slice you’re interested in, and if the function returns true, mapStateToProps will not even be called.Let’s update our example to use this function :Now, when state.users.all changes, the TodoContainer’s areStatesEqual option will be called, it will return…
  • It makes much more sense when using more complex mapStateToProps.Memoization remains useful when using props in mapStateToProps and methods that return new objects or arrays.Perfs gain can be really impressive only using this simple trick.Enjoy !

Regarding optimizing redux, there are some well known techniques: memoizing, using reselect for example. But there is one that remains unknown to many, although it’s simple and very efficient: The…
Continue reading “The most unknown redux performance trick – Julien De Luca – Medium”

JavaScript ES 2017: Learn Async/Await by Example – codeburst

  • Consider the below code:function doubleAfter2Seconds(x) { return new Promise(resolve = { setTimeout(() = { resolve(x * 2); }, 2000); });}In this code we have a function called doubleAfter2Seconds.
  • Here’s what the boilerplate code looks like:function addPromise(x){ return new Promise(resolve = { // Code goes here… // resolve() });}Awesome.
  • In this example we should be returning x + 2*a + 2*b + 2*c. Here’s the code:function addPromise(x){ return new Promise(resolve = { = { = { = { resolve(x + a + b + c); }) }) }) });}Lets walk through the code again, line by line.First, we create…
  • Here’s what that looks like:async function addAsync(x) { // code here…}Now that you’ve created an async function, we can make use of the await keyword which will pause our code until the Promise has resolved.
  • Here’s how easy that is:async function addAsync(x) { const a = await doubleAfter2Seconds(10); const b = await doubleAfter2Seconds(20); const c = await doubleAfter2Seconds(30); return x + a + b + c;}And here’s the full code:As you can see, we’re still making use of the same doubleAfter2Seconds function.

ES 2017 introduced Asynchronous functions. Async functions are essentially a cleaner way to work with asynchronous code in JavaScript. In order to understand exactly what these are, and how they work…
Continue reading “JavaScript ES 2017: Learn Async/Await by Example – codeburst”