3 Ways to Fine-tune Presentational Components

Three ways to fine-tune your React presentational components  #reactjs #javascript

  • Here are three ways I’ve found to make React presentational components work as re-usable building blocks.
  • Here are two stories for a text input component: the first shows the component in its valid state, and the second show the component in its invalid state.
  • Instead, extract a new component and pull it up: – – Let the container decide explicitly when and where show presentational components.
  • As you keep pulling presentational components up, they start looking like enhanced native elements, so you’d like to be able to pass all props you would pass to a native element, like or .
  • Inside the component, extract the props you’ve defined yourself and pass the rest to the element that you’re wrapping: – – Here, we’re separating the prop from the rest, and passing the remaining props to the element.


Saturday, Feb 17 2018

in

javascript

react

Continue reading “3 Ways to Fine-tune Presentational Components”

Introducing React Paginating 🎉🎉🎉 – Dzung Nguyen – Medium

Introducing React Paginating 🎉🎉🎉 @davidnguyen1791 

#Reactjs #Javascript #Webdev #Tech

  • Introducing React Paginating 🎉🎉🎉Today, I am happy to announce a React Paginating component.gif react-paginating demoThere are some popular components which help us to solve pagination problem such as react-paginate, react-pager, … Now there is another one.
  • It’s called react-paginating with a different approach.How “react-paginating” is uses Function as Child Components pattern which allows a component to publish any variables, states or functions to the outside as input params of a function which is going to be used for handling logic and rendering the UI.Here are some…
  • The formula to calculate totalPages:const totalPages = Math.ceil(total / limit);pageCountHow many pages you want to display.I.e:pageCount = 5with pageCount = 5pageCount = 9with pageCount = 9currentPageThe page currently you are visiting.
  • The component calculates and publishes props which allow controlling UI.
  • After that, you might put your CustomAnchor / somewhere on your “storybook” or components manager.DemoConclusionIf you see it is useful for you.

There are some popular components which help us to solve pagination problem such as react-paginate, react-pager, … Now there is another one. It’s called react-paginating with a different approach…
Continue reading “Introducing React Paginating 🎉🎉🎉 – Dzung Nguyen – Medium”

React Native Storybook

Senne blogs about 'React Native Storybook'

#reactnative #mobile

  • A few weeks ago I gave an internal presentation about Storybook for React Native.
  • Storybook allows you to create stories with your components which increases development speed, improves reusability and allows you to create prototypes with actual components that can also be used in the real app.
  • A small demo showing some of the features that Storybook offers can be seen here: – – You can find the presentation slides here.

Storybook allows you to create stories with your components which increases development speed, improves reusability and allows you to create prototypes with actual components that can also be used in the real app.
Continue reading “React Native Storybook”

Norbert de Langen: Storybook has reached outside the React ecosystem & will continue to do so

Read our interview with @NorbertdeLangen about his recent work on Storybook:  #ReactJS

  • We strongly believe the problems Storybook solves are not unique to any single platform.Of course, we’re also going to be improving the features and performance of Storybook, and create new ways for you to extend Storybook and customise it for your use-case.
  • Finally: we’re really seeing the community getting involved with Storybook, we get pull requests making Storybook better in all sorts of ways we didn’t expect.
  • So who knows what will be included in the next release?Has rebranding from React Storybook changed its culture or direction?The culture certainly changed — now the community itself is driving Storybook forward.
  • If anything, I’d say our focus on helping the community co-maintain Storybook has had a major impact.Do your company clients adapt React style guides to their workflow?Yes in fact, most of them do.What do you think is the future of web and mobile development?Who knows?
  • I’m super excited about native support for ES modules in the modern browsers and Node.js!What are your favorite components, libraries, or community projects?Babel, Webpack, React, Glamorous, Yarn, Express, ESlint, Prettier, Jest, GraphQL.I’m also a huge fan of community-driven meetups.Pick one and tell us why: Redux or MobX?It depends.

Today, we’re opening our new series of interviews for React Day Berlin. Since Norbert de Langen is going to speak about building Storybook in Berlin in December, we decided to ask him a couple of…
Continue reading “Norbert de Langen: Storybook has reached outside the React ecosystem & will continue to do so”