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”

Jest: Test suite with superpowers 😎

  • No need to write test cases for each component returned by render method.
  • The test case will look somthing like this:

    Whenever Jest sees this line , it is going to generate a snapshot and compare it with stored snapshot.

  • Snaps should be there in each dev’s machine so that if one of the devs changes some other component unknowingly, the snap test for that component will fail and he/she would know before pushing it.
  • You can also have a look at the example test case in our boilerplate code here.
  • We will write test case for the methods including snapshot test.

Jest: Test suite with superpowers 😎
Continue reading “Jest: Test suite with superpowers 😎”

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”

Using Higher Order Components in a React Application

  • If you have started using ReactJS recently often you might have felt that you are performing repeated logic in many components.
  • Well Higher Order Component (HOC) provides solution to such a kind of problems.
  • A function (Functional component in React) which takes a component and gives back another component.
  • So the exact benefits are:

    Functional components started from React V15.

  • But apart from that if we are careful enough we can have an architecture which can abstract logic that can be shared across other presentational components using HOC has great benefits.

If you have started using ReactJS recently often you might have felt that you are performing repeated logic in many components. For example consider an app having:
Continue reading “Using Higher Order Components in a React Application”

Presentational and Container Components – Dan Abramov – Medium

Presentational and Container Components
 via @dan_abramov
#react #reactjs

  • These all are not exactly the same, but the core idea is similar.My presentational components:Are concerned with how things look.May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.Often allow containment via this.props.children.Have no dependencies on the rest of the app, such as Flux actions or stores.Don’t specify how the data is loaded or mutated.Receive data and callbacks exclusively via props.Rarely have their own state (when they do, it’s UI state rather than data).
  • Are written as functional components unless they need state, lifecycle hooks, or performance optimizations.Examples: Page, Sidebar, Story, UserInfo, List.My container components:Are concerned with how things work.May contain both presentational and container components** inside but usually don’t have any DOM markup of their own except for some wrapping divs, and never have any styles.Provide the data and behavior to presentational or other container components.Call Flux actions and provide these as callbacks to the presentational components.Are often stateful, as they tend to serve as data sources.Are usually generated using higher order components such as connect() from React Redux, createContainer() from Relay, or Container.create() from Flux Utils, rather than written by hand.Examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList.I put them in different folders to make this distinction clear.Benefits of This ApproachBetter separation of concerns.
  • You can use the same presentational component with completely different state sources, and turn those into separate container components that can be further reused.Presentational components are essentially your app’s “palette”.
  • Presentational components can be stateful, and containers can be stateless too.Classes and Functions.
  • In my experience, presentational components tend to be stateless pure functions, and containers tend to be stateful pure classes.

There’s a simple pattern I find immensely useful when writing React applications. If you’ve been doing React for a while, you have probably already discovered it. This article explains it well, but I…
Continue reading “Presentational and Container Components – Dan Abramov – Medium”

Redux without React — State Management in Vanilla JavaScript

  • Other modules might then listen to changes in the store and update themselves .
  • Pure presentational component filenames are prefixed with a dollar sign.
  • The component subscribes to changes in the store
  • Container components on the other hand can dispatch actions or subscribe for changes.
  • The components had access to the store via my failed connect approach.

Moritz Kröger discusses his experiences of using Redux without React — the problems  faced, the solutions attempted and the lessons learned along the way.
Continue reading “Redux without React — State Management in Vanilla JavaScript”

Presentational and Container Components – Medium

Presentational and Container #Components:  by @dan_abramov #reactjs

  • Both presentational and container components can contain other presentational or container components just fine.
  • ** In an earlier version of this article I claimed that presentational components should only contain other presentational components.
  • When you notice that some components don’t use the props they receive but merely forward them down and you have to rewire all those intermediate components any time the children need more data, it’s a good time to introduce some container components.
  • Presentational components can be stateful, and containers can be stateless too.
  • Functional components are simpler to define but they lack certain features currently available only to class components.

You’ll find your components much easier to reuse and reason about if you divide them into two categories.
Continue reading “Presentational and Container Components – Medium”