JavaScript Design Patterns – Meryl Dakin – Medium

JavaScript Design Patterns  #softwaredesignpatterns #mvc #react #javascript #reactjs

  • The gif below shows the interaction among these.MVC DemonstrationThe Controller (animalsController) updates the View (animalList)The View (animalForm) delivers User input to the ControllerThe Controller updates the Model (Animal) of changes based on User inputThe Model notifies the Controller of the changes so the Controller can update the View (animalList)MVC ComponentsModel- The model works with the database and API’s to call for and structure the data for the app.
  • It informs the Controller of the current state of the data so the Controller can serve that information to the View.View- The view is the user interface of the app.
  • When the Model gets user data, it can change the state of the app and pass the new state back to the Controller.Controller- The controller is the go-between from Model and View.
  • Component Architecture of ZooBookIn React, the components act like Views on steroids.The Components all represent a rendered piece of the website, but they also do the work of maintaining state and logic (without a state management tool like Redux).
  • — Thinking in React, React.js DocsComponent DemonstrationThe layers we have are performing the following roles:Presentational Components:App: Renders the NavBar and ZooContainerNavBar: Renders links around the site and the site titleZooForm: Renders form for User inputZooList: Renders container for animals to be appended into a listAnimal: Renders each animal in ZooList“Smart” Component (maintains state):ZooContainer: This layer is special.

As a developer with experience in Rails and vanilla JavaScript but new to React.js, the most intimidating shift is going from Model-View-Controller architecture to Component architecture. This post…
Continue reading “JavaScript Design Patterns – Meryl Dakin – Medium”

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”

React’s Five Fingers of Death. Master these five concepts, then master React.

The 5 things you need to know to understand #ReactJS:

  • If you’ve enjoyed this article, please share it and recommend it (that little green heart just below).
  • The consequence of using the functional component syntax is that you lose access to the component methods we just talked about.
  • Higher-order components are a common pattern for giving a component access to new tools.
  • A HoC is a component that you can wrap around another component to pass it special props, and it’s typically created using a higher-order component factory function .
  • And we’ve also talked about the component methods supported by these classes.

A few years ago, my friend Sean started telling me how this brand new front-end library called React was going to take over the web. At first I dismissed it as just another framework fad. But then I…
Continue reading “React’s Five Fingers of Death. Master these five concepts, then master React.”

Tackling React Native Storage — Part 1 – Eric Kim – Medium

Tackling #ReactNative Storage - Part 1  #redux

  • Results is auto-updating no need to re-fetch the data const todoItemsResults = store.getTodoItems() const mapStateToProps = (state, props) => ({ …
  • Tip 2: Create a wrapper around Realm
  • According to Realm getStarted guide, Realm.
  • When you are dealing with a large amount of data, or simply require a faster local storage, consider using Realm.
  • You still need to update the UI because React does not know that Realm.

Making data persist in React Native can be hard. I have worked with AsyncStorage, RealmDB, and Firebase using React Native. Today I am going to cover RealmDB but also briefly touch on AsyncStorage…
Continue reading “Tackling React Native Storage — Part 1 – Eric Kim – Medium”

Container Components – Learn React with chantastic – Medium

Container Components:  by @learnreact #Reactjs #JavaScript #WebDev

  • Your component is responsible for both fetching data and presenting it.
  • Say you have a component that displays comments.
  • Nestled in the talk is this gem about container components .
  • Lets pull out data-fetching into a container component.
  • I’m a big fan of container components.

At React.js Conf, Jason Bonta talked about how they build High Performance Components at facebook. Nestled in this talk is this gem about container components. Say you have a component that displays…
Continue reading “Container Components – Learn React with chantastic – Medium”

Introducing React Component Hierarchy – BPXL Craft – Medium

  • The particular example uses the -c flag to hide container components and highlight children of containers with an asterisk (*).
  • If your container components merely render their children with JSX, that works too.
  • rch uses Babylon to parse your components, which is the same parser that is used in Babel .
  • Is an sample of the output when using rch against the root App component from the open-source SoundCloud client sound-redux .
  • Components may be defined in any way (ES6 React.

React is a great tool for building UIs. Building a React application involves breaking up your app into pieces called “components.” While…
Continue reading “Introducing React Component Hierarchy – BPXL Craft – 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”