Even Better Support for React in Flow – Flow – Medium

Even Better Support for #ReactJS in Flow:  by @calebmer #JavaScript

  • It is time to rethink how Flow models React.In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.The biggest change we are…
  • A React component in 0.53.0 looks like this:type Props = { foo: number,};type State = { bar: number,};class MyComponent extends React.ComponentProps, State { state = { bar: 42, }; render() { return this.props.foo + this.state.bar; }}When your component has no state, you only need to pass in a single type…
  • Without state your component definition would look like this:type Props = { foo: number,};class MyComponent extends React.ComponentProps { render() { return this.props.foo; }}If your component has default props then add a static defaultProps property:type Props = { foo: number,};class MyComponent extends React.ComponentProps { static defaultProps = { foo: 42, };…
  • For the React Router example above, you would type the Route component’s children as:type Props = { children: (data: { match: boolean }) = React.Node, path: string,};class Route extends React.ComponentProps { /* … */ }To learn more about typing React children read our documentation guide on the topic.The children prop…
  • Here is how you would type a simple higher-order component that injects a number prop, foo:function injectPropProps: {}( Component: React.ComponentType{ foo: number } Props,): React.ComponentTypeProps { return function WrapperComponent(props: Props) { return Component {…props} foo={42} /; };}class MyComponent extends React.Component{ a: number, b: number, foo: number,} {}const MyEnhancedComponent = injectProp(MyComponent);//…

The first version of Flow support for React was a magical implementation of React.createClass(). Since then, React has evolved significantly. It is time to rethink how Flow models React. In Flow 0.53…
Continue reading “Even Better Support for React in Flow – Flow – Medium”

Even Better Support for React in Flow – Flow – Medium

Even Better Support for React in Flow

by @calebmer



#ReactJS #Flow #JavaScript

  • It is time to rethink how Flow models React.In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.The biggest change we are making is to modify how you define React class components.
  • A React component in 0.53.0 looks like this:type Props = { foo: number,};type State = { bar: number,};class MyComponent extends React.ComponentProps, State { state = { bar: 42, }; render() { return this.props.foo + this.state.bar; }}When your component has no state, you only need to pass in a single type argument.
  • Without state your component definition would look like this:type Props = { foo: number,};class MyComponent extends React.ComponentProps { render() { return this.props.foo; }}If your component has default props then add a static defaultProps property:type Props = { foo: number,};class MyComponent extends React.ComponentProps { static defaultProps = { foo: 42, }; render() { return this.props.foo; }}Flow will infer the type of default props from your static property.
  • For the React Router example above, you would type the Route component’s children as:type Props = { children: (data: { match: boolean }) = React.Node, path: string,};class Route extends React.ComponentProps { /* … */ }To learn more about typing React children read our documentation guide on the topic.The children prop returns a React.Node, which is the type for any value that can be rendered by React.
  • Here is how you would type a simple higher-order component that injects a number prop, foo:function injectPropProps: {}( Component: React.ComponentType{ foo: number } Props,): React.ComponentTypeProps { return function WrapperComponent(props: Props) { return Component {…props} foo={42} /; };}class MyComponent extends React.Component{ a: number, b: number, foo: number,} {}const MyEnhancedComponent = injectProp(MyComponent);// We don’t need to pass in `foo` even though// `MyComponent` requires it!MyEnhancedComponent a={1} b={2} /;Here we use the new React.ComponentTypeProps utility along with an intersection to inject the prop foo.Even MoreThere is a lot more that we fit into this release for our React support.

The first version of Flow support for React was a magical implementation of React.createClass(). Since then, React has evolved significantly. It is time to rethink how Flow models React. In Flow 0.53…
Continue reading “Even Better Support for React in Flow – Flow – Medium”

Even Better Support for React in Flow – Flow – Medium

Even Better Support for #ReactJS in Flow:  by @calebmer #JavaScript

  • It is time to rethink how Flow models React.In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.The biggest change we are making is to modify how you define React class components.
  • A React component in 0.53.0 looks like this:type Props = { foo: number,};type State = { bar: number,};class MyComponent extends React.ComponentProps, State { state = { bar: 42, }; render() { return this.props.foo + this.state.bar; }}When your component has no state, you only need to pass in a single type argument.
  • Without state your component definition would look like this:type Props = { foo: number,};class MyComponent extends React.ComponentProps { render() { return this.props.foo; }}If your component has default props then add a static defaultProps property:type Props = { foo: number,};class MyComponent extends React.ComponentProps { static defaultProps = { foo: 42, }; render() { return this.props.foo; }}Flow will infer the type of default props from your static property.
  • For the React Router example above, you would type the Route component’s children as:type Props = { children: (data: { match: boolean }) = React.Node, path: string,};class Route extends React.ComponentProps { /* … */ }To learn more about typing React children read our documentation guide on the topic.The children prop returns a React.Node, which is the type for any value that can be rendered by React.
  • Here is how you would type a simple higher-order component that injects a number prop, foo:function injectPropProps: {}( Component: React.ComponentType{ foo: number } Props,): React.ComponentTypeProps { return function WrapperComponent(props: Props) { return Component {…props} foo={42} /; };}class MyComponent extends React.Component{ a: number, b: number, foo: number,} {}const MyEnhancedComponent = injectProp(MyComponent);// We don’t need to pass in `foo` even though// `MyComponent` requires it!MyEnhancedComponent a={1} b={2} /;Here we use the new React.ComponentTypeProps utility along with an intersection to inject the prop foo.Even MoreThere is a lot more that we fit into this release for our React support.

The first version of Flow support for React was a magical implementation of React.createClass(). Since then, React has evolved significantly. It is time to rethink how Flow models React. In Flow 0.53…
Continue reading “Even Better Support for React in Flow – Flow – Medium”

RNG (React, Next.js, GraphQL) can slay the MEAN stack

  • This was not without hurdles as the community split during the early years, but in 2015 they reconsolidated from the IO.js fork and became the powerhouse we now know.The term “MEAN stack” is known as the use of MongoDB, Express, Angular, and Node.
  • It looks to me like the time for MEAN being king of the valley has come to a close.Enter RNG, this is the use of React, Next.js/Node, and GraphQL as a development stack, sure, there is no MongoDB or MySQL/PHP (-M or -MP) but more on that later.
  • It is a long video so if you want to keep reading feel free to watch it later.If this is the first time you have heard of GraphQL you should know that it is a replacement layer to any and all API calls, no more routing and no more data fetching headaches.
  • Just pick the data in the “graph nodes” and poof, call resolved.The major selling point would also be the ability to use any storage service as long as you configure the GraphQL layer to support it.ConclusionThe new React, Next.js, and GraphQL (RNG) stack has the potential to once again shift the JavaScipt ecosystem and arise as the prevalent stack for start-ups and tech companies to adopt for their apps.
  • The benefits in performance and ease of front-end and back-end development collaboration are undeniable with the use of GraphQL not only as a JavaScript centric app.What is not to like?Side noteSmall PSA, keep in mind the issues in the community with licensing as open-sourced software and communities fight for transparency and ownership of our beloved code.

Technologies rise and fall, and in recent years there has been an impressive amount of open-source communities backing libraries and platforms. There are instances where a “stack” or combination of…
Continue reading “RNG (React, Next.js, GraphQL) can slay the MEAN stack”

Even Better Support for React in Flow – Flow – Medium

Even Better Support for React in Flow @calebmer  #Reactjs #Javascript #Webdev

  • It is time to rethink how Flow models React.In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.The biggest change we are making is to modify how you define React class components.
  • A React component in 0.53.0 looks like this:type Props = { foo: number,};type State = { bar: number,};class MyComponent extends React.ComponentProps, State { state = { bar: 42, }; render() { return this.props.foo + this.state.bar; }}When your component has no state, you only need to pass in a single type argument.
  • Without state your component definition would look like this:type Props = { foo: number,};class MyComponent extends React.ComponentProps { render() { return this.props.foo; }}If your component has default props then add a static defaultProps property:type Props = { foo: number,};class MyComponent extends React.ComponentProps { static defaultProps = { foo: 42, }; render() { return this.props.foo; }}Flow will infer the type of default props from your static property.
  • For the React Router example above, you would type the Route component’s children as:type Props = { children: (data: { match: boolean }) = React.Node, path: string,};class Route extends React.ComponentProps { /* … */ }To learn more about typing React children read our documentation guide on the topic.The children prop returns a React.Node, which is the type for any value that can be rendered by React.
  • Here is how you would type a simple higher-order component that injects a number prop, foo:function injectPropProps: {}( Component: React.ComponentType{ foo: number } Props,): React.ComponentTypeProps { return function WrapperComponent(props: Props) { return Component {…props} foo={42} /; };}class MyComponent extends React.Component{ a: number, b: number, foo: number,} {}const MyEnhancedComponent = injectProp(MyComponent);// We don’t need to pass in `foo` even though// `MyComponent` requires it!MyEnhancedComponent a={1} b={2} /;Here we use the new React.ComponentTypeProps utility along with an intersection to inject the prop foo.Even MoreThere is a lot more that we fit into this release for our React support.

The first version of Flow support for React was a magical implementation of React.createClass(). Since then, React has evolved significantly. It is time to rethink how Flow models React. In Flow 0.53…
Continue reading “Even Better Support for React in Flow – Flow – Medium”