A Comprehensive Guide to React.js in 2018

  • These components are defined either in pure JavaScript or they can be defined in what the React team calls “JSX”.
  • The reason the React team went with this approach is because, since the virtual DOM is a JavaScript representation of the actual DOM, React can keep track of the difference between the current virtual DOM(computed after some data changes), with the previous virtual DOM (computed befores some data changes).
  • In more layman’s terms, because manipulating the actual DOM is slow, React is able to minimize manipulations to the actual DOM by keeping track of a virtual DOM and only updating the real DOM when necessary and with only the necessary changes.
  • The process looks something like this, – – Some user event which changes the state of your app → Re-render virtual DOM -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.
  • Signal to notify our app some data has changed→ Re-render virtual DOM -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.

This is the original guide for learning to build apps with React.js. Recently upgraded to support React 16.3 and friends.
Continue reading “A Comprehensive Guide to React.js in 2018”

Array Methods Explained : Filter vs Map vs Reduce vs Foreach

  • we all know why this method is used for and even you don’t know about this method the name pretty much explains everything.Foreach takes a callback function and run that callback function on each element of array one by one.var sample = [1, 2, 3];// es5sample.forEach(function (elem, index){ console.log(elem + ‘ comes at ‘ + index);})// es6sample.forEach((elem, index) = `${elem} comes at ${index}`)/*output1 comes at 02 comes at 13 comes at 2*/For every element on the array we are calling a callback which gets element its index provided by foreach.Basically forEach works as a traditional for loop looping over the array and providing you array elements to do operations on them.okay!
  • If the value is true element remains in the resulting array but if the return value is false the element will be removed for the resulting array.var sample = [1, 2, 3] // yeah same array// es5var result = sample.filter(function(elem){ return elem !
  • As a ReactJS developer I use map a lot inside my application UI.Map like filter foreach takes a callback and run it against every element on the array but whats makes it unique is it generate a new array based on your existing array.Let’s understand map with an examplevar sample = [1, 2, 3] // i am never gonna change Boo!
  • Yeah// es5var mapped = sample.map(function(elem) { return elem * 10;})// es6let mapped = sample.map(elem = elem * 10)console.log(mapped);/* output */[10, 20, 30]Map ran through every element of the array, multiplied it to 10 and returned the element which will be going to store inside our resulting array.Like filter, map also returns an array.
  • ReduceAs the name already suggest reduce method of the array object is used to reduce the array to one single value.For example if you have to add all the elements of an array you can do something like this.var sample = [1, 2, 3] // here we meet again// es5var sum = sample.reduce(function(sum, elem){ return sum + elem;})// es6var sum = sample.reduce((sum, elem) = sum + elem)console.log(sum)reduce takes a callback ( like every function we talked about ).

Okay so yeah we know they are different they have different purpose and goals still we don’t bother to understand them. We use arrays. A lot of arrays. We use arrays to show search lists, items added…
Continue reading “Array Methods Explained : Filter vs Map vs Reduce vs Foreach”

React.js Forms: Controlled Components

#ReactJS Forms: Controlled Components

  • ) form so you can see how child components update the parent component’s state, and how the parent then updates the child component via props ( unidirectional data flow ).
  • The array of letters is joined again, and the new string is set to component state.
  • All of the form element components in this post are pure functional components.
  • Regular, or dumb, components receive data from their parent (container) component.
  • The component is very similar to the components covered already.

This tutorial covers controlled form components, and best practices like immutability and unidirectional data flow. There’re plenty of examples to borrow and tweak for use in your own projects.
Continue reading “React.js Forms: Controlled Components”

AJAX Requests in React: How and Where to Fetch Data

AJAX requests with #reactjs and axios

  • To fetch the data from the server, you’ll need an HTTP library.
  • React simply renders components, using data from only two places: props and state .
  • So to use some data from the server, you need to get that data into your components’ props or state.
  • First: React itself doesn’t have any allegiance to any particular way of fetching data.
  • The component’s state is updated by calling this.setState with the new array of posts.

First: React itself doesn’t have any allegiance to any particular way of fetching data. In fact, as far as React is concerned, it doesn’t even know there’s a “server” in the picture at all.
Continue reading “AJAX Requests in React: How and Where to Fetch Data”