⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!

  • How well that static site performs and how easily you can build that site is another story.ProsVery easy to get startedWell documentedConsSubpar developer experience for static functionality no hot-reloadingLarge per-page JS bundles, resulting in a lot of unnecessary duplicate code being downloaded.Difficult root component customizationDestructive routing.
  • We also knew that we needed to ditch built-in proprietary connectors ASAP; being able to get your data from anywhere is important, but the ability to use and access that data in your site is paramount.Most importantly, we needed a tool that would allow us to build things like an…
  • It’s insanely fast, touts fantastic SEO capabilities, and is probably the most React-friendly static-site library on the internet.Let’s get to it.How does it work?react-static starts by exporting a single JS bundle, which includes every template for your entire site.
  • To connect a component to this data, you use a convenient HOC called getRouteProps.The HTML files generated by react-static ensure that pages load instantly and are optimized for SEO.Once the page is loaded, your site invisibly and instantly transitions to your react app.At this point, navigating around your app will…
  • 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.

At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. Over the last year, we’ve launched many sites using different static site tools that claim to solve these…
Continue reading “⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!”

Using React’s Router in Single Page Web Apps (basics)

  • Using React’s Router in Single Page Web Apps (basics)Let’s face it.
  • Here’s an example:import { BrowserRouter as Router } from “react-router-dom”const App = () = { return ( Router …routes /Router )}The next thing we’ll need is the Route component (also from react-router-dom).
  • Example:import { BrowserRouter as Router, Route } from “react-router-dom”import { nav } from “/components/nav”import { homepage } from “/components/homepage”const App = () = { return ( Router Route path=”/” component={nav} Route path=”/home” component={homepage} /Router )}In this example, we will render the nav component on route “/” and we will match the homepage component on route “/home”.
  • Example:import { BrowserRouter as Router, Route } from “react-router-dom”import { welcome } from “/components/welcome”import { homepage } from “/components/homepage”const App = () = { return ( Router Route exact path=”/welcome/home” component={homepage} Route exact path=”/welcome” component={welcome} /Router )}The second option is to use another component from the library called Switch.
  • Example:import { BrowserRouter as Router, Route, Switch } from “react-router-dom”import { welcome } from “/components/welcome”import { homepage } from “/components/homepage”const App = () = { return ( Router Switch Route path=”/welcome/home” component={homepage} Route path=”/welcome” component={welcome} /Switch /Router )}Notice that even though the url path welcome/home should match both routes, we will only render the first matched route, thereby rendering the homepage component.

Building an SPA is super cool, and super exciting. Why is it so exciting? I guess it’s that intense feeling of accomplishment when you change the page without accessing a new web page. It gives us a…
Continue reading “Using React’s Router in Single Page Web Apps (basics)”

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”