How to use React’s Provider Pattern

How to use React's Provider Pattern  #reactjs #webdev

  • Therefore you could use React’s context to give every component access to the colored theme.
  • That way every component that needs to be styled according to the colored theme could get the necessary information from React’s context object.
  • You have the Provider component that makes properties accessible in React’s context and components that consume the context.
  • This Provider component uses React’s context to pass down the state implicitly.
  • You provide the state to your component as props, the component wraps it into React’s context and all child components can access the state by using a higher order component such as from the react-redux library.

This article gives you a walkthrough for React’s provider pattern. After reading it, you should be able to implement…
Continue reading “How to use React’s Provider Pattern”

Now that it’s okay to use @reactjs again, I can say: I’ve been working on this @WordPress + React thing for awhile

  • Postlight’s Headless WordPress + React Starter Kit is an automated toolset that will spin up two things: – – The following setup will get WordPress running locally on your machine, along with the WordPress plugins you’ll need to create and serve custom data via the WP REST API.
  • To install and start WordPress, run the following command: – – When that completes successfully, the WordPress REST API will be available at http://localhost:8080.
  • To import data and media from a live WordPress install locally, use Migrate DB Pro.
  • At this point you can start setting up custom fields, and if necessary, creating custom REST API endpoints in the Postlight Headless WordPress Starter theme.
  • Once you have Docker installed on your computer, you can run the container locally using this command:

headless-wp-starter – 🔪 WordPress + React: a starter kit
Continue reading “Now that it’s okay to use @reactjs again, I can say: I’ve been working on this @WordPress + React thing for awhile”

8 things to learn in React before using Redux

8 things to learn in #ReactJS before using #Redux:

  • A component can manage a whole lot of state, pass it down as props to its child components and pass a couple of functions along the way to enable child components to alter the state in the parent component again.
  • Component A is the only component that manages local state but passes it down to its child components as props.
  • In addition, it passes down the necessary functions to enable B and C to alter its own state in A.

    Now, half of the local state of component A is consumed as props by component C but not by component B.

  • When you lift the local state management down to component C, all the necessary props don’t need to traverse down the whole component tree.
  • When a library such as Redux “connects” its state managements layer with React’s view layer, you will often run into a higher order component that takes care of it (connect HOC in react-redux).

Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux…
Continue reading “8 things to learn in React before using Redux”

Stop Managing CSS – Charlie Hulcher – Medium

Stop Managing CSS  #cssinjs #react #styledcomponents #css #http2 #reactjs

  • Stop Managing CSSA response to Managing CSS JS in a HTTP/2 WorldThis article on getting great performance out of HTTP/2 would have excited me hugely before.
  • Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely the future when your styles are separate from everything else.I believed in separating styles, behavior, and structure for a long time.
  • Keep style alongside behavior and structure.Coming from that context, reading about the right way to manage CSS felt like watching exciting evolution for a dated paradigm.
  • A cleaner design for a horse harness is a beautiful thing but doesn’t beat the engine.Solving the problem of chunked CSS delivery in order to get performance benefits from HTTP/2 sounds to me like reinventing the wheel from what you’re probably already doing.
  • Why rebuild that process in parallel for CSS?The core problem comes down to managing CSS inclusion/exclusion from the project through a human process.

This article on getting great performance out of HTTP/2 would have excited me hugely before. Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely…
Continue reading “Stop Managing CSS – Charlie Hulcher – Medium”

react-mobx-react-router-boilerplate

  • React, MobX, React-Router and Webpack boilerplate with async routes.
  • This boilerplate is also ready for deploying your app to Heroku.
  • Components are now loaded async with react-router-loader and the store is injected via MobX Provider.

React, MobX, React-Router, MobX-Router and Webpack (heroku-ready) boilerplate with async routes.
Continue reading “react-mobx-react-router-boilerplate”

notifme/notifme-sdk: A Node.js library to send all kinds of transactional notifications.

  • A Node.js library to send all kinds of transactional notifications.
  • Multiple providers strategies — Want to use more than one provider?
  • Tools for local testing — Run a catcher locally to intercept all your notifications and display them in a web interface.
  • Congratulations, you should see the following lines in your console:

    Notification Catcher is a web interface for viewing and testing notifications during development.

  • Open http://localhost:1080 on your favorite browser, you should see the notification:

notifme-sdk – A Node.js library to send all kinds of transactional notifications.
Continue reading “notifme/notifme-sdk: A Node.js library to send all kinds of transactional notifications.”

Mocking API responses with React Apollo – Carlos Martinez – Medium

  • Mocking API responses with React ApolloApollo Client and the GraphQL tools that have been made open source within the last years are pretty awesome, the community that is being builded around them is great.
  • However, as with every new technology, there are a lot of things that need to mature and improve.Documentation on testing is definitely one of the bits that needs a lot of improvements, it isn’t clear what to do, and I personally found myself digging into the source code to understand what to do.One of the problems I faced was that I wanted to use mock responses when testing my app components, and there are at least two ways of doing this:The first way is to use graphql-tools.
  • From their docs:This package allows you to use the GraphQL schema language to build your GraphQL.js schema, and also includes useful schema tools like per-type mocking.You can use this library together with a custom MockNetworkInterface to return mocked responses to your components:const { mockServer } = require(“graphql-tools”);const { print } = MockNetworkInterface { constructor(schema, mocks = {}) { if (!
  • schema) { throw new Error(‘Cannot create Mock Api without specifying a schema’); } this.mockServer = mockServer(schema, mocks); } query(request) { return request.variables); }}This is nice, and very flexible, with graphql-tools you can do pretty much whatever you do in your actual API.What I didn’t like about this approach is that you need your schema in sync with the schema defined in your API (you can do this making an instrospection query to your backend), I also found this approach overcomplicates things unnecessarily.The second (and simpler) approach I found was to use the mockNetworkInterface class, this class is defined in react-apollo/test-utils, you can have a peek on it here.To use it, you first need to define some Mock Requests (these requests need to be exactly the same your components will make):const GraphQLMocks = [ { request: { query: UserProfileQuery, variables: {} }, result: { data: { current_user: { id: 1, first_name: ‘Foo’, last_name: ‘Bar’, email: ‘foo@example.com’ } } } }];The UserProfileQuery is exported from your component:export const UserProfileQuery = gql` query userProfile { current_user { id first_name last_name email } }`;And this is how you use it to setup your tests:import { mockNetworkInterface } from ApolloClient from ‘apollo-client’;import { ApolloProvider } from ‘react-apollo’;import { mount } from ‘enzyme’;import App from ‘.
  • /App.js’;import React from ‘react’;const setupTests = () = { const networkInterface = // or mocks); const client = new ApolloClient({ networkInterface, addTypename: false }); const wrapper = mount( ApolloProvider client={client} App / /ApolloProvider ); return { wrapper };};It is important that you pass addTypename: false to ApolloClient, otherwise you would have to include a __typename field in all your mocks and queries.Now any queries your components make will be handled by your mocked responses, you have full control of what you want to return.And that’s it!

Apollo Client and the GraphQL tools that have been made open source within the last years are pretty awesome, the community that is being builded around them is great. However, as with every new…
Continue reading “Mocking API responses with React Apollo – Carlos Martinez – Medium”