Relax with React – Natasha Gitlin – Medium

Relax with React  #props #react #components #state #lifecycle #reactjs

  • With JSX, you pass a function as the event handler rather than a string.ComponentsReact is made up of container and presentational components or as Dan Abramov coined it, smart and dumb.
  • Presentational components are concerned with [how things look], receive data and callbacks with exclusively props and rarely have their own state.
  • Container components concerned with [how things work], provide application data and fetch data.
  • It is just another way of building an MVC framework where the presentational components are the views and container the controllers.LifecycleThe lifecycle of a component are customizable and goes through different phases when the components are in a state of change.
  • A prop supports or keeps something in position whereas a state is a condition that is susceptible to change.Before I dive right into my final project, I need to figure out the proper structure of my application.

I have made it to the final level. I’ve acquired the XP and skillset needed to ascend to the top and attain the apex of web development. Mind you, this is just the first hurdle in my programming…
Continue reading “Relax with React – Natasha Gitlin – Medium”

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”

How I learnt Redux concepts — Crowdfire Engineering

#Redux explained in 4 simple steps, good #tutorial by @narendra_shetty 👏 📚 #reactjs

  • 2. Created a dispatcher method This is the only way to change the state of the application.
  • State is read-only The only way to mutate the state is to emit an action , an object describing what happened.
  • Dispatcher is called along with the action type which indicates how the state has to be changed.
  • We can now use any rendering logic to create a UI based on the state of the application and if any user actions needs to change the state, it has to go through dispatcher.
  • 4. Created a method to subscribe for the state change This method is used when an app needs to listen to the changes happening to the state.

Read the full article, click here.

@OpenCoconut: “#Redux explained in 4 simple steps, good #tutorial by @narendra_shetty 👏 📚 #reactjs”

So in the past few months there is a lot of fuss going on in Javascript community about React and Redux. Everyone is writing their…

How I learnt Redux concepts — Crowdfire Engineering

State Streams and React — Medium

  • Each connected component is forced to shallow compare in the shouldComponentUpdate lifecycle method because it doesn’t know if it just received a state update which is relevant or not.
  • The above gives us two action streams that we can use to reduce state with.
  • A state stream is effectively the result of reducing a stream of actions.
  • As mentioned before, the two core building blocks of a module’s state stream is its action stream and its reducer (of said action stream).
  • Accessing State in Action Streams

Read the full article, click here.

@MarkusCtz: “Why RxJS is the Better Tool for Unidirectional Data Flow: @christianalfoni @BenLesh @dan_abramov #reactjs #redux #rx”

Why RxJS is the Better Tool for Unidirectional Data Flow

State Streams and React — Medium