DEV Community

Cover image for Why using ReactQL Starter Kit for your App will save you Weeks in Development

Why using ReactQL Starter Kit for your App will save you Weeks in Development

courseprobe profile image Course Probe ・3 min read

Why using ReactQL Starter Kit for your App will save you Weeks in Development

ReactQL is a “done for you” starter kit that seamlessly integrates:

React v16.4

User interface (UI)

Create reusable components that combine UI and logic, and compile down to HTML on the server. Seamless server and browser compatibility, from the same codebase.

Apollo Client 2.0 + MobX

GraphQL & MobX store management

Connect to any back-end GraphQL server, and handle state declaratively with MobX. Full re-hydration from SSR.

React Router 4

Universal HTTP/app routing

New in v4, write routes declaratively inside your React components. Zero configuration required.

Webpack 4

Code bundling & minification

Extensive Webpack config generates browser + server bundles, optimises your code paths, crunches images and generates code ready for production.

Emotion + PostCSS + SASS + LESS

Next-gen CSS stylesheets

Koa 2

Built-in web server with SSR

Bolster your SEO with SSR and improve user experiences with fast time-to-first-byte (< 10ms) with the performant Koa 2 web server, built in to your server bundle.

Super powers, as standard
ReactQL solves the tedious set-up code, so you can focus on what matters

  • GraphQL queries run on the server first, giving users and search engines rich HTML with data, markup and styles — with no configuration needed.

  • Dumps your React + GraphQL into plain HTML dynamically per request, with full client-side support. Store state automatically rehydrated from both Apollo & MobX.

  • Navigating your site will be blistering fast, thanks to pre-loaded routes and async data loading. Obliterate full-page reloads and enjoy server-side rendering, to boot.

  • Enjoy full sourcemaps and hot code reloading in development. When you’re ready to go live, just
    npm run production

  • ReactQL is written in Typescript, offering strong typing out-the-box (even for GraphQL via GraphQL Code Generator)

  • Thanks to Webpack, ReactQL automatically eliminates unused code paths in your browser code, for minimal bundle sizes.

  • Freely edit React components, styles or other code in development, and watch changes happen in real-time in the browser no refresh needed.

  • Your code, images and CSS will be minified to save every byte possible. Assets in production will be served gzipped and Brotli compressed, too.

  • Almost every line of code is littered with comments, so you can get to grips with how it’s wired together, fast.

  • GraphQL store state crunched on the server is sent down the wire to the browser, so your user can pick-up where your server finishes. Everything is just GraphQL.

  • Vendor code is automatically split from the code you write, making async route loading and caching fast and automatic. No need to maintain a separate vendor list.

  • From HTTP hardening in Koa, to declarative

    rewinds via Helmet, ReactQL gives you an optimised starter kit with all the finer details taken care of — freeing you to code.


React js Doc

React js pdf documentation

Discussion (2)

Editor guide
w3bdesign profile image

Development seems to have stopped since 2019.

ryskin profile image

Want to write the same, it's so sad, a very good boilerplate, it's still good, but soon will be not used if no updates.