c0d3ster / reactnodeboilerplate

Contains all things necessary to get started building a single-page web application with React and Node

ReactNodeBoilerplate

This boilerplate repository contains all files necessary to get started building a single-page web application with React and Node. The master branch contains my baseline collection of preferred web technologies. This list includes:

React

React Router v4

Webpack v4 (w/ babel-loader, css-loader, style-loader, file-loader)

Babel (env and react presets)

Node

Express

This is the baseline set up for most web apps that I develop. I will also use this repository to document how and why each of these technologies are used. I want this repository to be both a resource for myself to start projects more quickly but also a resource for other developers to learn more about my preferred technologies and easily build off my boilerplate. In addition to these baseline technologies I will begin building branches for the following additional features:

styling libraries (SASS, LESS, Bootstrap, Flex-box grid set up)

database support (MongoDB, MySQL)

Flux implementation (Alt, Redux)

HTTPS support (Free using certbot)

If anyone has any questions about the repository or finds any poor design patterns/practices, please don't hesitate to reach out to my or post an issue on the page. I'm always open to feedback and a smart developer will always be flexible in their technical progression, especially in the ever-changing world of web development.

Happy Coding,

Cody

reactnodeboilerplate's Issues

Modular CSS

My current design pattern for CSS is to simply create a styles.css file which is imported into the App.jsx then styles are globally accessible throughout the app. This is not scalable and will quickly begin to be cumbersome when looking for styles and making new styles. Make css files for each component and start importing CSS dynamically.

Sample Header and Footer Components

Wrap the Switch statement in App.jsx with a Header and Footer component with very basic styles to center header text and set max-width to 1400px and margin to 0, auto for the body wrapper.