https://github.com/jounqin/react-hackernews

HackerNews clone built with React, ReactRouter & Redux, with full page server-side rendering
https://github.com/jounqin/react-hackernews

react react-router react-server-render react-ssr redux

Last synced: 3 months ago
JSON representation

HackerNews clone built with React, ReactRouter & Redux, with full page server-side rendering

• Host: GitHub
• URL: https://github.com/jounqin/react-hackernews
• Owner: JounQin
• License: mit
• Created: 2016-06-27T05:39:29.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-04-12T01:46:00.000Z (10 months ago)
• Last Synced: 2024-04-14T00:45:24.441Z (10 months ago)
• Topics: react, react-router, react-server-render, react-ssr, redux
• Language: JavaScript
• Homepage: https://react-hn.1stg.me
• Size: 5.57 MB
• Stars: 58
• Watchers: 6
• Forks: 21
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-hackernews

[![Travis](https://img.shields.io/travis/com/JounQin/react-hackernews/master.svg)](https://travis-ci.com/JounQin/react-hackernews)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

HackerNews clone built with React, ReactRouter & Redux, with full page server-side rendering



  

    

    


    Live Demo

  



## Features

> Note: in practice, it is unnecessary to code-split for an app of this size (where each async chunk is only a few kilobytes), nor is it optimal to extract an extra CSS file (which is only 1kb) -- they are used simply because this is a demo app showcasing all the supported features. In real apps, you should always measure and optimize based on your actual app constraints.

- Server Side Rendering

  - react + react-router + redux working together

  - Server-side data pre-fetching

  - Client-side state & DOM hydration

  - Automatically inlines CSS used by rendered components only

  - Preload / prefetch resource hints

  - Route-level code splitting

  - custom dynamic title for SEO

- Progressive Web App

  - App manifest

  - Service worker

  - 100/100 Lighthouse score

- Experience

  - Hot-reload in development

  - CSS extraction for production

## Inspired by

[vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0)

[react-server-renderer](https://github.com/JounQin/react-server-renderer) / [vue-server-renderer](https://ssr.vuejs.org)

[react-async-component](https://github.com/ctrlplusb/react-async-component) / [react-async-bootstrapper](https://github.com/ctrlplusb/react-async-bootstrapper)

[react-style-loader](https://github.com/JounQin/react-style-loader) / [vue-style-loader](https://github.com/vuejs/vue-style-loader)

## Architecture Overview



## Build Setup

**Requires Node.js 7+**

```bash

# install dependencies

npm install # or yarn

# serve in dev mode, with hot reload at localhost:4000

yarn dev

# build for production

yarn build

# If you care about node_modules size

yarn run prune

# serve in production mode

yarn start

```

## License

MIT