Refs in React : All you need to know ! – Hacker Noon

Refs in React : All you need to know !



#reactJS #javascript #developer

  • borrowed from evening while looking into a popular react library, I came across ‘refs’ and even knowing it how it works i wasn’t quite convinced with my understanding so decided to dive more deeper into it and finally sharing my thoughts with you people.According to react docs , refs are used to get reference to a DOM(Document Object Model) node or an instance of a component in a React Application i.e. refs would return the node we are referencing .
  • But i would suggest using classes for use-case of this kind as its much better and also refs has its caveats which we would see soon.When it returns a DOM node or a component’s instance?If the ref points to a standard component (DOM node, such as input, select, div etc) then to retrieve the element; you just need to call this.refs.ref.If the ref points to a composite component (a custom component you have created yourself) you need to use the new ReactDOM module like so is the ref value first set ?
  • Don’t Inline refs callbacks: I used inline callbacks to show you why it is bad thing to doArrow and bind functions in a render() produce a performance hit by creating a new function on EVERY re-render.
  • It should be done something like thisAlso If the ref callback is defined as an inline function, it will get called twice during updates, first with null and then again with the DOM element.
  • ExampleReact Official DocsAs MyFunctionalComponent has no instances , above code won’t work as intended.BUT ref attribute will work inside a functional component as long as you refer to a DOM element or a class component:React Official DocsHope you now have a good understanding of refs along with it use-cases and caveats.

Last evening while looking into a popular react library, I came across ‘refs’ and even knowing it how it works i wasn’t quite convinced with my understanding so decided to dive more deeper into it…
Continue reading “Refs in React : All you need to know ! – Hacker Noon”

React Progressive Web Apps — Part 1 – Gethyl George Kurian – Medium

  • How to create your first PWA app and/or convert your existing app into PWA.In this example I created new React app with PWA in mind, but the idea should be quite similar if you have to convert your existing app into PWA.You need to understand the lifecycle of a SW, which are listed below, and you can read more about it in this link.Register the Service Worker(SW)If a browser supports SW, then the service worker will be registered.
  • Here is the code snippet from index.htmlRegister SW if browser supportsIf the above registration step was successful, then the SW file will be downloaded.
  • This would be ideal place to clean up the cache to remove any cache item which is no longer required maybe.Apart from the above lifecycle of SW, if you noticed in the earlier section, I mentioned to also go through the Fetch API.
  • Well that is because SW can intercept the fetch event, and this will help if you want to cache something from the network.Updating Cache / Making network calls — Fetch eventSW listens to fetch event, and in our example since we handle only the basic case of caching only the static files, you can see below, when there is a fetch event within the SW’s scope (Refer the registration step to see the scope),it is intercepted, and we checked if request has a response already in the cache, then we return the response from cache.
  • Adding your app to the Home Screen.Perfect!Step 1 above showed you the importance of SW and how it helps to make your app to be offline first.Step 2, tells you how you can run it from your virtual device.And now let us make it feel a bit more like an app, but letting you add this to your homepage, so that you can launch it anytime later without the need to remember the url or bookmark it.This is where you need to under about web manifest json file, which was one of the topic I mentioned would be good to know.

Progressive Web Apps(PWA) are gaining a lot of popularity these day, and with one of the updates this year (2017), the Create React App creates your project by default as PWA. If you haven’t heard of…
Continue reading “React Progressive Web Apps — Part 1 – Gethyl George Kurian – Medium”

React.JS — Component Data Transfer – codeburst

  • If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done through state.So what is state?The heart of every React component is its “state”, an object that determines how that component renders behaves.
  • That might look something like this:class component_A extends Component { constructor() { super(); this.state = { data: [], };}In this case, we are defining the state of data.
  • Passing data from parent to child components is only slightly trickier, in that, we can’t pass data in an unbroken chain to other components.
  • [callback] in the child, and pass in the data as an argument.From our above example, our code might look something like this:class component_A extends Component { constructor() { super(); this.state = { listDataFromComponent_C: “ “, };}myCallback = (dataFromComponent_C) = {this.setState({ dataFromComponent_C: dataFromComponent_C});Now from within the child component (component_C) we can pass something to props are static, while state can be changed, once you have passed data from a child to a parent, or from parent to a child, you may need to interact with it differently within that new component.
  • It might look like the following:class component_A extends Component {constructor = {dataFromComponent_C: “ “};},myCallback = (dataFromComponent_C) = {this.setState({ dataFromComponent_C: dataFromComponentC });This is just a brief explanation of how to change data within a component, and transfer data to other child and parent components.

In React JS, there’s often a need to pass data from one component to another. If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done…
Continue reading “React.JS — Component Data Transfer – codeburst”

All About React Router 4

  • In some ways, earlier versions of React Router resembled our traditional mental model of what an application router “should be” by placing all the routes rules in one place.
  • Here are some JavaScript concepts you need to be familiar with for this article:

    If you’re the type that prefers jumping right to a working demo, here you go:

    Earlier versions of React Router centralized the routing rules into one place, keeping them separate from layout components.

  • For the first, let’s modify our to accommodate the browsing and profile pages for users and products:

    While this does technically work, taking a closer look at the two user pages starts to reveal the problem:

    New API Concept: is given to any component rendered by .

  • Here’s a different approach which is better:

    Instead of four routes corresponding to each of the user’s and product’s pages, we have two routes for each section’s layout instead.

  • For example, both these console logs will output the same value when the browser path is `/users`:

    ES2015 Concept: is being destructured at the parameter level of the component function.

This post is going to dig into to React Router 4, how it’s so different from previous React Router versions, and why that is. My intentions for this article aren’t to rehash the already well-written documentation for React Router 4. I will cover the most common API concepts, but the real focus is on patterns and strategies that I’ve found to be successful.
Continue reading “All About React Router 4”

How to use Presentational/Container components in a Redux app – Jakob Lind

I wrote about when and how to use presentational/container components #reactjs #redux

  • Either present something visual (presentational component) OR fetch data (container component).
  • You can use the container/presentational pattern when using both regular Ajax calls inside your components, or when you are using Redux to fetch data.
  • When you start coding your Redux app, you usually start with a wrapper component that receives the data from the Redux store.
  • It is possible to connect Redux to any React component in your application.
  • In a real world application you might need to do more advanced refactorings of the presentational components.

Have you read about Presentational/Container pattern but are still not sure how it looks when it’s used correctly? When should you use it and when should you NOT use it?
Continue reading “How to use Presentational/Container components in a Redux app – Jakob Lind”

React.js: The Hard Parts

State Management without #Redux:  #ReactJS #Javascript

  • If a user interacts with your application or refreshes the page, then we’ll look up state at that moment and rebuild the page.
  • In dynamic apps, like ones built using React, state change has to be dealt with immediately.
  • Managing state can get complicated if each component has some state.
  • Interaction with the components, like a mouse click, trigger these functions to update state.
  • For example to implement retweets:

    When the state is updated, the props will change too and render the child components again.

I am a full-stack software developer and passionate educator. I have been building for the web for almost two decades.
Continue reading “React.js: The Hard Parts”