What is React Static?

Overview of progressive static-site framework for React
16 October 2017   3262

React Static is a framework designed to help everyone painlessly build next generation, high-performance websites for the web.

With react-static you can deliver an amazing experience for your users and developers alike, without compromising React in any way. It’s insanely fast, touts fantastic SEO capabilities, and is probably the most React-friendly static-site library on the internet.

How does React Static work?

React Static framework architecture
React Static framework architecture 

Main advantages

  • Painless development & migration. There are very few differences (or changes to be made, if migrating) when compared to apps created with create-react-app, or any other standard react build system. And, if you’re already using React-Router, you likely won’t have to change anything at all!
  • Redux, Lifecycle Security, Route Animations & more! react-staticdoesn’t use any strange routing techniques or custom lifecycle methods, which means there is absolutely no dangerouslySetInnerHTMLReactDOM.render(), or any other destructive methods being used for navigation. It’s just good old React, so you can thoroughly rely on everything functioning how you would normally expect it to, including component lifecycles and state managers.
  • Data & Query Agnostic. You’ve worked hard enough producing and organizing all of the data for your website, so the last thing you need is some superfluous GraphQL layer or custom component lifecycle lodging itself between your data and your pages. With react-static, supplying and using your data is as simple. Fetch it at build time, supply it to your routes, and use the getRouteProps HOC. It’s heavenly, and it also makes testing your data and your components a breeze.
  • Lean builds for today and 2 years from now. react-static’s approach to code-splitting ensures your page data is optimized and stored separately from your JS bundle as JSON files. This means the main JS bundle will not grow in size with the amount of content on your site. Not only does this significantly improve build times for sites small and large, but also decreases the amount of duplicate code required to be downloaded by the client. All of this means faster browsing for your users, and more productivity for the developer.

See GitHub to learn more.  

Frontend News Digest 1 - 7.02

How to Create a WP Site with JAMstack, formatting dates in JS with Intl.DateTimeFormat, Edge DevTools now supports more languages and more
07 February 2020   436

Greetings! I hope your week went great! Here's new frontend technologies news digest.

Check the MongoDB One-to-Many Relationship tutorial with Mongoose examples, the CO2 emission of the websites new NodeJS update and other interesting things

Guides

  • How To Create A Headless WordPress Site On The JAMstack

Tutorial on simple way to create a WordPress site

  • MongoDB One-to-Many Relationship tutorial with Mongoose examples

Guide about Mongoose - the most popular way to use MongoDB from Node.js.

  • Formatting dates in JavaScript with Intl.DateTimeFormat

Check the modern way to format dates in a region friendly way using native APIs, as now supported all major browsers and both Node

Articles

  • CO2 emissions on the web

Learn the lever of CO2 emissions websites produce by consuming a lot of energy for its activity

  • Bringing the Microsoft Edge DevTools to more languages

Now Edge's DevTools support more languages

Video

  • Chrome 80 - What’s New in DevTools

Updates

  • massCode

Snippets manager for developers

  • micro-jaymock

Tiny API mocking microservice for generating fake JSON data

  • Node v13.8.0 (Current)

Another update of popular solution

  • Electron 8.0.0

Major release of popular JS based solution