A stronger (typed) React Apollo – Apollo GraphQL

A stronger (typed) React Apollo:  #ReactJS #GraphQL

  • Helping developers understand what they can use in their React components was our first priority when we set up flow types for Apollo.Let’s take for example a simple React component wrapped with the graphql HOC from React Apollo.
  • This component will display a hero from Star Wars and their friends with data returned from a GraphQL endpoint:The above code pulls some data from a GraphQL API using a query and includes lifecycle information, such as loading and error information.
  • We tell Flow what the shape of the result will look like from the server when the graphql enhancer wraps a component.
  • If you already are a user of Flow and have your data typed already, with a couple of imports and a single type addition, you can type any component that is wrapped with graphql!Currently Flow does not support the ES7 decorator syntax so you won’t be able to get all of the benefits of stronger type support if you are using decorators.
  • Let’s make a change to our initial component that converts it to use a prop called episode:We can define the props that our exported component will need (InputProps) and attach them to our enhancer using the second type generic of OperationComponent.

Static typing can be low-hanging fruit to improve your app. As data flows throughout the application, it is easy to forget its shape, and even for what it’s used. Although you could have unit tests…
Continue reading “A stronger (typed) React Apollo – Apollo GraphQL”

Super Powered Single Page Apps with React, WordPress and GraphQL by Jason Bahl

  • GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.
  • GraphQL provides a complete

    and understandable description of the data in your API, gives

    clients the power to ask for exactly what they need and

    nothing more, makes it easier to evolve APIs over time, and

A presentation created with Slides.
Continue reading “Super Powered Single Page Apps with React, WordPress and GraphQL by Jason Bahl”

React in Action is 50% off today. #React #reactjs

React in Action is 50% off today.  #React #reactjs

  • Grokking FRP teaches you a new way of thinking about programs and data as well as how to build robust and extensible user interfaces with the power of functional reactive programming.
  • Packed with illustrations, this book presents dozens of concrete, real-world problems and then shows you how FRP helps you solve them.
  • Use this same code to get half off Usability Matters and Reactive Application Development

Grokking FRP teaches you a new way of thinking about programs and data as well as how to build robust and extensible user interfaces with the power of functional reactive programming. Packed with illustrations, this book presents dozens of concrete, real-world problems and then shows you how FRP helps you solve them.
Continue reading “React in Action is 50% off today. #React #reactjs”

“Thinking in React” — A paradox statement – Sebastian K – Medium

Thinking in #ReactJS: A paradox statement  #JavaScript

  • But before we investigate further, let’s take a step back and think about the three basic principles of React components.React Components — Three Basic PrinciplesOther devs and I have identified three principles which should be the foundation for all React components:A component should be a pure function which transforms data into a user interface.
  • But what if multiple dumb components rely on the same data and should display updates to that data synchronously?Data Flow in ReactA simple React component treeLet’s take the component tree above as an example to study the way we move data around inside a React application.
  • This means that we have created a coupling between the target of our data (C and D) and all the components between these targets and their common state container (the root component).
  • There is a solution for this problem though, and its name is Context.Context to the Rescue!Context allows us to transform the root component into a context provider, which would then provide data for other components further down the tree without having to pass down this data explicitly the whole way to the target components.
  • You can read more about this in this article of MobX creator Michel Weststrate.In addition, the React documentation states that Context is an unstable API and recommends using a simple Provider component at the top of your hierarchy and using Higher Order Components to create the consumers which will then pass down the data to the actually consuming dumb components they wrap.

Managing state in React is a solved problem. Or is it? Dozens of state libraries exist, but why can we not simply use the tools React itself provides us?
Continue reading ““Thinking in React” — A paradox statement – Sebastian K – Medium”

My Simple React Tutorial. – Jeffrey Doyle – Medium

My Simple React Tutorial.  #webdevelopment #react #reactjs #javascript #apps #reactjs

  • In this case, a state object might look like:state = {currentTime {hour: 0, minute: 0, second: 0}, alarms: [], timeZone: ‘PST’}Say again that you’re creating a component which represents a list of items stored in a table.
  • In this case you’re going to want to store the items in the list, maybe the size of the list, and also the label the list has all inside that components state.
  • Now some developers will say that i’m storing too much inside my state object, but personally I like to keep all of the relevant data to my component inside that components state.
  • Lets explore our example of the list of items component and see what it might look like:As you can see, the state is where all of our data is stored inside our component.
  • When addItem is called and it performs the setState function on the component, the components state will change, and thus trigger the component to re-render according to the new state object, thus including the new item in the list.

React is one of the most powerful Javascript frameworks around right now, this tutorial will introduce you to React, and tell you why you need to start using it right now. Let’s face it, if you’ve…
Continue reading “My Simple React Tutorial. – Jeffrey Doyle – Medium”

Maximizing Debuggability with Redux – LogRocket

Maximizing Debuggability with Redux  #javascript #react #logging #debugging #redux #reactjs

  • By using front end logging tools like LogRocket, developers can easily understand and fix tricky bugs in production by reviewing the actions and state changes leading up to a bug.While this information is immediately useful in any Redux app, there is a lot more we can achieve by architecting an app with logging in mind.
  • When debugging issues, we can dig into this state object to see information on in-flight requests, queryCount (if we’re polling on a query), and timings.Storing this information in Redux is critical, since it puts full context on all network activity in the Redux logs.Rolling your own data fetching “framework”If you’d prefer a simpler approach, you can roll your own data fetching “framework” by simply dispatching explicit actions when querying and receiving data from the network.For example, lets say we’re building a blogging app.
  • This would then update state appropriately to:postsQuery: { url: ‘api.blog.com/posts’, isPending: true, data: […],}This example is far from thorough, but the idea is that by being explicit with Redux actions for each part of the request lifecycle, it becomes easy to debug any potential race condition or network error.Handling other sources of non-determinismIn addition to network fetching, there are lots of other sources of non-determinism that can cause bugs.
  • For example:myWebSocket.onmessage = function (event) { store.dispatch({ type: ‘BLOG_POST_UPDATE_RECEIVED’, payload: event, } store.dispatch({ type: ‘BLOG_POST_UPDATE_RECEIVED’, payload: event, }That way, when looking at the Redux logs for an error or user-reported issue, we can see all the data that was received over the websocket and, crucially, relate it in time to other redux actions and network requests.Local StorageOften, an app needs to read from local storage when it first starts up.
  • Once you get the library set up, you’ll see a new key in your Redux store called routing with information on the current router state.In addition, react-router-redux dispatches actions like @@router/LOCATION_CHANGE when its state changes.Also of note is that using react-router-redux lets you rewind router state when time-traveling in redux-devtools, since its state its state is derived from the state in Redux.A note about local vs Redux stateI don’t want to get into the debate on local vs Redux state here, but production Redux logging does change the calculus of this decision in some cases.

In my last blog post, Redux Logging in Production, I discussed one of the most important benefits of using Redux — debuggability. By using front end logging tools like LogRocket, developers can…
Continue reading “Maximizing Debuggability with Redux – LogRocket”

The State of State-Management in React

The State of State-Management in #React w/ @pavanpodila  -  #chstech #javascript #reactjs

  • The State of State-Management in React

    As you start building bigger apps in React, you soon realize that the complexity of your app is not because of the framework, rather it’s in the use of data.

  • Managing Data, aka Client-side state can get pretty tricky, especially with cross-cutting features that all manipulate the same subset of data.
  • In this talk, we will explore the current trends in managing client-side state in React.
  • This includes

    By the end of this talk, you will walk away with a variety of ideas to apply to your own apps.

  • Taming the complexity, inherent in client-state should not be intimidating any more.

Pavan Podila
Continue reading “The State of State-Management in React”