Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/atulmy/universal-react

🌐 A simple universal react application with server side rendering built with latest versions of React (v16+), React Router (v5+), Redux (v4+), Express (v5+), Webpack (v4+), Babel Preset ES6 👨‍💻
https://github.com/atulmy/universal-react

babel express isomorphic learn-by-examples react react-router-v4 redux server-side-rendering universal universal-javascript universal-react webpack2

Last synced: 3 months ago
JSON representation

🌐 A simple universal react application with server side rendering built with latest versions of React (v16+), React Router (v5+), Redux (v4+), Express (v5+), Webpack (v4+), Babel Preset ES6 👨‍💻

Awesome Lists containing this project

README

        

# 🌐 Universal React
Simple universal React application with server side rendering.

Built using latest version of React (v16), React Router (v5+), Redux (v7+), Express (v5+), Webpack (v4+), Babel Preset ES6

## 📝 Features
- [x] List blogs (async API call using `axios`)
- [x] View single blog
- [x] Add blog
- [x] Container Components ([read here](https://medium.com/@learnreact/container-components-c0e67432e005))
- [x] Server Side Rendering
- [x] Cache data in client `state` to prevent re-fetch

## ▶️ Running
- Clone repo `git clone [email protected]:atulmy/universal-react.git universal-react`
- Install NPM modules `cd universal-react` and `npm install`
- Run `npm run start`

## 📦 Packages Used

### dependencies
- **react** (Library for building user interfaces)
- **react-dom** (React package for working with the DOM)
- **react-router-dom** (A complete routing library for React)
- **redux** (Predictable state container for JavaScript apps)
- **redux-thunk** (Thunk middleware for Redux)
- **react-redux** (Official React bindings for Redux)
- **react-helmet** (Manage all of your changes to the document head)
- **express** (Fast, unopinionated, minimalist web framework)
- **axios** (Promise based HTTP client for the browser and node.js)

## 📚 Resources
- Universal JavaScript Web Applications with React - Luciano Mammino ([YouTube](https://t.co/HVXd0HMOlC))
- Container Components - ([Medium Post](https://medium.com/@learnreact/container-components-c0e67432e005))
- React Router 4 SSR example - Ryan Florence ([Gist](https://gist.github.com/ryanflorence/efbe562332d4f1cc9331202669763741/))
- Start learning by looking at sample codes: [#LearnByExamples](https://github.com/topics/learn-by-examples)

## ⭐ Showcase
Following projects have been built with or inspired from [universal-react](https://github.com/atulmy/universal-react/)
- Crate - Get monthly subscription of trendy clothes and accessories - [GitHub](https://github.com/atulmy/crate)
- HIRESMART - Application to streamline hiring process - [GitHub](https://github.com/atulmy/hire-smart)
- Would really appreciate if you add your project to this list by sending a PR

## 🎩 Author
Atul Yadav - [GitHub](https://github.com/atulmy) • [Twitter](https://twitter.com/atulmy)

## 📜 License
Copyright (c) 2017 Atul Yadav http://github.com/atulmy

The MIT License (http://www.opensource.org/licenses/mit-license.php)