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”

Supercharge Your React Native Development With React-Native-Debugger

  • Supercharge Your React Native Development With React-Native-DebuggerReact Native Debugger App IconThere will always be bugs — we will never run out of them.
  • There is struggle and get frustated debugging, and then there is chilling debugging where there is a tool to help you save time and effort.As the wise Edsger Dijkstra once saidIf debugging is the process of removing software bugs, then programming must be the process of putting them in.What is React…
  • It combines 3 very important debugging tools to make your development life cycle awesome.Screenshot of React Native Debugger zero stateReact Developer Tools lets you inspect the React component hierarchy, including component props and state.
  • It gives you the ability to inspect/change elements in your react native app just like you would in your web browser for webpagesRedux DevTools lets you inspect every state and action payload change.
  • When you print to the console with console.log in your code or use the debugger statement, you can see them in your Chrome devtools.React Native Debugger brings all these tools together and makes your development life a whole lot easier, trust me.

There will always be bugs — we will never run out of them. There is struggle and get frustated debugging, and then there is chilling debugging where there is a tool to help you save time and effort…
Continue reading “Supercharge Your React Native Development With React-Native-Debugger”