I’ve created a flexbox bootstrap like grid for #reactjs, that uses #styledcomponents and styled-system … \cc @jxnblk

  • Lightweight bootstrap like grid system for reactjs that uses flexbox.
  • Built on top of and much to:

    If like me, you still think about grids in terms of bootstrap, , , , , , and , then look no further.

  • styled-gel uses bootstrap 4’s mobile first repsonsive breakpoints which are by default:

    styled-system can be configured with styled-components to override the breakpoints and number of columns in a row with more configuration options to come.

styled-gel – Styled-components over bbc gel-grid
Continue reading “I’ve created a flexbox bootstrap like grid for #reactjs, that uses #styledcomponents and styled-system … \cc @jxnblk”

Firekit concepts to sync Firebase and redux – Tarik Huber – Medium

Firekit concepts to sync Firebase and redux  #react #firebase #javascript #redux #reactjs

  • That is one of the main concepts firekit uses to manage the sync of the firebase realtime database and the redux store.
  • Firekit allows you to make your firebase reference with all the native firebase query and filtering functions and just send the resulting reference to firekit and it will listen to all changes and sync them to the redux store.Saving only simple jsonIf using instances of classes in your library you get into the situation to save to the redux store complicated objects and functions.
  • By saving only simple json in your redux store persistence can be done however you want and with every tool and concept you wish.Persistent listenersThe main reason I choose to create firekit is that all other libraries link the whole listening cycle to a single component.
  • You can leave the listening cycle in a component, page, application or any other level you want.This approach is the same no matter if you are listening to lists or simple paths in the firebase realtime database.ConclusionFirebase is made to make our developer lives easier.
  • The main goals are to give the user maximal flexibility for using firebase and just providing easy and simple tools to sync data to the redux store.I you are interested on how the library works or want to try a real world project visit the github repo with the source code or the demo page.If you like how this library works you could put a star on the github repo đ

Firekit is a library that helps you sync your Firebase realtime database with the redux store of your react application. It uses some new approaches witch we will try to present in this article. If…
Continue reading “Firekit concepts to sync Firebase and redux – Tarik Huber – Medium”

[React Native 016.3] Using GraphCool with React Native

Using @graphcool with @reactnative -  #reactNative #programming

  • The second screen is a screen to create a post, by passing the image URL and the post description.
  • The rest of the ListPage component is just a list showing each Post and its image.
  • Let’s use this mutation and create a new Post:

    Once we run this mutation, we can refresh our app and see this new Post we have created in our app.

  • On the inline code, we will put our code, it does a POST request to our slack, and we will pass the post description and image url.
  • Let’s save, that, open our slack and create a new Post in our App.

A serverless solution for GraphQL that works great with React Native
Continue reading “[React Native 016.3] Using GraphCool with React Native”

Full-stack React + GraphQL Tutorial – Apollo GraphQL

Full-stack #ReactJS + #GraphQL tutorial: Declarative data fetching and mocking with Apollo

  • /App.css’;const ChannelsList = () = (ul liChannel 1/li liChannel 2/li /ul);class App extends Component { render() { return ( div className=”App” div className=”App-header” img src={logo} className=”App-logo” alt=”logo” / h2Welcome to Apollo/h2 /div ChannelsList / /div ); } }export default App;create-react-app sets up hot reloading for you, so as soon as you save the file, the browser window with your app should update to reflect the changes:If it looks like this, you’re on the right track …3.
  • Let’s install Apollo Client and some helper packages that we’ll need to get GraphQL into our app: npm i -S react-apolloreact-apollo is a neat integration of Apollo Client with React that lets you decorate your components with a higher order component called graphql to get your GraphQL data into the component with zero effort.
  • Now with that, let’s add a few imports at the top of our App.js and create an instance of Apollo Client:import { ApolloClient, gql, graphql, ApolloProvider,} from ‘react-apollo’;const client = new ApolloClient();Next, we decorate the original ChannelsList with a GraphQL HOC that takes the query and passes the data to our component:const channelsListQuery = gql` query ChannelsListQuery { channels { id name } } `;const ChannelsListWithData = wrapped with the graphql higher order component, our ChannelsList component will receive a prop called data, which will contain channels when it’s available, or error when there is an error.
  • In addition data also contains a loading property, which is true when Apollo Client is still waiting for data to be fetched.We’ll modify our ChannelsList component to make sure the user knows if the component is loading, or if there has been an error:const ChannelsList = ({ data: {loading, error, channels }}) = { if (loading) { return pLoading …/p; } if (error) { return p{error.message}/p; } return ul { channels.map( ch = li key={ch.id}{ch.name}/li ) } /ul; };Finally, we have to replace the ChannelsList inside our App’s render function with ChannelsListWithData.
  • In order to make an instance of Apollo Client available to the component we just created, we also wrap our top-level app component with ApolloProvider, which puts an instance of the client on the UI.Your App component should now look like this:class App extends Component { render() { return ( ApolloProvider client={client} div className=”App” div className=”App-header” img src={logo} className=”App-logo” alt=”logo” / h2Welcome to Apollo/h2 /div ChannelsListWithData / /div /ApolloProvider ); } }Okay, we’re almost done!

GraphQL is a new API-definition and query language that has the potential to become the new REST. It makes it easy for UI components to declaratively fetch data without having to worry about backend…
Continue reading “Full-stack React + GraphQL Tutorial – Apollo GraphQL”

Redux with React – First Look #reactjs #Redux #javascript #appdev #programming #devops

Redux with React - First Look  #reactjs #Redux #javascript #appdev #programming #devops

  • Let’s start with the basics:

    According to the official site Redux is defined as a predictable state container for JavaScript apps.

  • In Redux, reducers are functions (pure, I will explain what a pure function is later) that take the current state of the application and an action and then return a new state.
  • 3 – Store

    Store is the object that holds the application state and provides a few helper methods to access the state, dispatch actions and register listeners.

  • – Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers.
  • You might be interested in:

    Predictability of outcome:

    There is always one source of truth, the store, with no confusion about how to sync the current state with actions and other parts of the application.

influenced by Flux architecture and became popular very quickly, excellent documentation and size (2 KB). Also it is very easy to use redux with react
Continue reading “Redux with React – First Look #reactjs #Redux #javascript #appdev #programming #devops”

Migrating to react-router v4…the SSR way – Frontend Weekly – Medium

Check out our new article: Migrating to react-router v4…the SSR way  #ReactJS

  • Now you need 2 types of router :BrowserRouter on the Client side and StaticRouter on the stateless server side.v3const ReactRouterContext = ReduxProvider = routes, location: req.url }, (err, redirectLocation, renderProps) = { if (err) { res.status(503); } else if (redirectLocation) { return res.redirect(302, redirectLocation.pathname + redirectLocation.search); } else if (renderProps) { return res.send(`!
  • DOCTYPE ReduxProvider({ store }, } return null; });but in v4, match no longer exists, as StaticRouter handles it all on the server side.
  • All we need to do is to render the same Router configurations in the server as in Client to match the checksum and that’s it.
  • if (context.url) { return res.redirect(302, context.url); } else { const renderHTML = ReactDOMServer.renderToString( ReduxProvider( { store }, serverConfig(req, context) ) ); return res.send(`!
  • This only needs to be rendered on the server side.const serverConfig = (req, context) = ( StaticRouter location={req.url} context={context} App / /StaticRouter);In order to match the checksum, a client-side version router is needed of course.const history = Provider store={initStore} Router history={history} App / /Router /Provider, Up Server and ClientServer: ReduxProvider(essentially createFactory – props store in)Client: Provider

Migrating to React v15.5 is a good preparation for the full embrace of React v16 (:scream), and it wasn’t too much of a pain as it was mostly with React.PropTypes deprecation and some other API…
Continue reading “Migrating to react-router v4…the SSR way – Frontend Weekly – Medium”

“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”