Rekit Studio IDE for React and Redux development

Rekit Studio #IDE for #reactjs  and #Redux #development  #javascript

  • It is called Rekit Studio and it provides the capability for code generation, dependency diagraming, refactoring, building, unit tests, and a meaningful way to navigate code.
  • Meet Rekit Studio IDE for React and Redux development!
  • If you familiar with the previous version of Rekit Studio called Rekit Portal, it had no ability to edit code.
  • In contrast to Rekit Studio.
  • Rekit Studio also automates project setup, webpack configuration and organizes your folder structure.

The short announce of Rekit Studio IDE for React and Redux development.
Continue reading “Rekit Studio IDE for React and Redux development”

Introducing React Paginating 🎉🎉🎉 – Dzung Nguyen – Medium

Introducing React Paginating 🎉🎉🎉 @davidnguyen1791 

#Reactjs #Javascript #Webdev #Tech

  • Introducing React Paginating 🎉🎉🎉Today, I am happy to announce a React Paginating component.gif react-paginating demoThere are some popular components which help us to solve pagination problem such as react-paginate, react-pager, … Now there is another one.
  • It’s called react-paginating with a different approach.How “react-paginating” is uses Function as Child Components pattern which allows a component to publish any variables, states or functions to the outside as input params of a function which is going to be used for handling logic and rendering the UI.Here are some…
  • The formula to calculate totalPages:const totalPages = Math.ceil(total / limit);pageCountHow many pages you want to display.I.e:pageCount = 5with pageCount = 5pageCount = 9with pageCount = 9currentPageThe page currently you are visiting.
  • The component calculates and publishes props which allow controlling UI.
  • After that, you might put your CustomAnchor / somewhere on your “storybook” or components manager.DemoConclusionIf you see it is useful for you.

There are some popular components which help us to solve pagination problem such as react-paginate, react-pager, … Now there is another one. It’s called react-paginating with a different approach…
Continue reading “Introducing React Paginating 🎉🎉🎉 – Dzung Nguyen – Medium”

MERN v3.0 is underway 🎉 – Hashnode

  • MERN v3.0 is underway 🎉It’s been a little over a year since we at Hashnode made our boilerplate code available to the community.
  • We have been humbled by the traction which MERN has gotten over the years.
  • Little did we know that our small little side project would become the go-to solution to get started with the MERN stack for the community.
  • While retrospecting our open-source contributions, the need for a new version of MERN came to light, as highlighted by the numerous issues and PR’s that have been raised over the past year to update the repository.It is 2018, and a lot has changed in the React landscape.
  • xMoving from React Router v2 to v4Out of the box Yarn supportUpgrade to Webpack 3 and move to babel-preset-envBring base Node version to v8.x LTS, for all that async-await goodness 😋Have a simpler workflow so that you can start your project(s) with much more ease!You can track the progress and…

It’s been a little over a year since we at Hashnode made our boilerplate code available to the community. We have been humbled by the traction which MERN has gotten over the years. Little did we know…
Continue reading “MERN v3.0 is underway 🎉 – Hashnode”

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”

Introducing Create XP App – Nader Dabit – Medium

Introducing Create XP App  #nodejs #reactnative #react #iosappdevelopment #reactjs #reactjs

  • Introducing Create XP AppCreate XP App is ReactXP project generator that will allow you to build apps that run on iOS, Windows, Android, and the web using a single codebase.Though this is a working project, it is definitely still a work in progress and I will be getting feedback, adding improvements, and adding polish over the next few weeks / months.A few things about ReactXPBuilt on top of React NativeOpen sourced by Microsoft, used in new version of SkypeRecommends the use of TypeScriptTo learn more about ReactXP, check out their repo and their docs.To Install and create an app:Install the clinpm i -g create-xp-app2.
  • Create your projectcreate-xp-app new MyAwesomeProjectTo run on the webRun npm run web-watch (this compiles and watches your TypeScript)npm run web-watch2.
  • Open index.html in your browserTo run on iOS / Android / WindowsRun npm run rn-watchnpm run rn-watch2.
  • Start the packagernpm start // or use haulUse the command line, Xcode or Android Studio to build and deploy the native app code just like you would with any other React Native project.To learn more, contribute, or submit issues check out the repo located here.My Name is Nader Dabit .
  • I am a software consultant trainer the founder of React Native Training where we teach developers at top companies around the world how to quickly get up and running with React Native.

Create XP App is ReactXP project generator that will allow you to build apps that run on iOS, Windows, Android, and the web using a single codebase. Use the command line, Xcode or Android Studio to…
Continue reading “Introducing Create XP App – Nader Dabit – Medium”

Create React App and MVPs – kwight.ca

create-react-app by @reactjs is a great reminder of @henrikkniberg 's

  • You are commenting using your Facebook account.
  • View all posts by Kirk Wight
  • Rather than building the “complete” version of a product first, build the most basic version that allows you to gather feedback, then improve in further iterations.
  • I also love how a simple eject command allows the developer to continue down their own path of tool customization without any sort of “lock-in”.
  • The end result is a product that’s more stable, available sooner, and solves real problems more so than the traditional method of “build it then ship it” development.

Read the full article, click here.


@kwight: “create-react-app by @reactjs is a great reminder of @henrikkniberg ‘s “EUP” (the anti-MVP)”


create-react-app is a great little tool by Facebook that allows the creation of React apps with a single command. It’s extremely simple and very effective: in just one week of work, the authors removed a huge boat anchor to React productivity, being the initial setup of a diverse and ever-changing pile of development tools. I also love how…


Create React App and MVPs – kwight.ca