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: about 1 month 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 👨‍💻

• Host: GitHub
• URL: https://github.com/atulmy/universal-react
• Owner: atulmy
• License: mit
• Archived: true
• Created: 2017-04-22T12:56:41.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-02-25T09:24:31.000Z (over 3 years ago)
• Last Synced: 2024-09-23T20:02:01.484Z (about 1 month ago)
• Topics: babel, express, isomorphic, learn-by-examples, react, react-router-v4, redux, server-side-rendering, universal, universal-javascript, universal-react, webpack2
• Language: JavaScript
• Homepage:
• Size: 1.59 MB
• Stars: 79
• Watchers: 6
• Forks: 24
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

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)