An example website built with React and tons of other great stuff
Often developers want to know the proper way to structure their applications, and poll users for their favorite tech stack. This project aims to provide an answer to those questions through example.
For this example to be of use to you, you should have a basic understanding of
- React
- ES6
- JSX
If you're new to React I highly recommend you check out Mark Erikson's excellent list of resources and then come back.
- Scalable Architecture
- Organizing by feature instead of type means as the application grows you won't have to search through hundreds of files to find the one you're looking for. Additionally you'll have the added benefit of easier debugging.
- Immutable State
- Creates state predictability and eliminates the unwanted side effects and headaches of mutable data.
- Bleeding-edge JavaScript
- Classes, template literals, destructuring assignments, generator functions, all that fun stuff.
- Composable CSS
- The styles are located next to the components but not in them; separating logic and styles while increasing readability. Only the styles for the current component are loaded for optimal performance.
- Code Splitting
- Not only the css but also the javascipt, images, and html of the current path are loaded decreasing page rendering time and saving bandwith on the client side.
- Offline-first
- Load the app once and from then on a service worker will load the page in case an internet connection isn't available.
- SEO
- Head tag management, structured data / rich snippets, everything a search engine wants and needs.
- Battle Tested
- My web app currently has 100% test coverage as all good apps should.
- React
- React Redux - State Management
- Redux Saga - Async State Management
- React Router - Page Routing
- Styled Components - Everything CSS
- Reselect - Memoization
- React Helmet - SEO
- Webpack - Building, Dev Server, Hot-Reloading, Code-Splitting
- React Transition Group - Animation
- Immutable - Immutable Data Structures
- Font Face Observer - Font Loader (Prevents FOIT)
Joseph Ireland - Website