React Starter

React Starter is intended to be used in conjunction with Express Starter to mimic a deployed environment. It also works perfectly fine as a standalone application but out-of-the-box, it expects the server generated by Express Started to be running in order to fetch an image. If it isn't running, you will see a fetch error for an image on the landing page.

Tech Stack

• React
• React Router
• Redux
• SASS
• Typescript
• Webpack

Features

• Mobile menu
• Client-side routing
• Viewport toggle for responsive development

Up and running

The steps below assume you are using both repos for the client and the server. If you fork these repos in order to build your own applications, you should rename all instances of react-starter and express-starter to your desired names before executing npm i in either repo.

• mkdir my-project
• cd !$
• git clone https://github.com/samuraijane/react-starter.git
• mv react-starter client
• git clone https://github.com/samuraijane/express-starter.git
• mv express-starter server
• cd client
• npm i
• npm run client
• In a separate terminal instance: cd server
• npm i
• npm run dev

Builds

Build scripts are executed from within Express Starter. For them to work properly, the client and server directories must be siblings to each other. If you change the names of these directories (as we did in the steps above), you will also need to update the names in build scripts themselves. However, as long as you are consistent in changing all instances of react-starter and express-starter to your desired names, this will take care of itself. If the build breaks the first time you run it, though, it is likely due to a problem with naming.

Branching

• To emphasize that the work in this repo is client-side, the primary branch is named client. The branches for Express Server are dev and prod.
• Feature branches must break off of client

Typescript

At root, we have a directory for types/. This is where we keep the defintions enum, interface, and type that are used in more than one place in the application. If you need to define a type used locally in only one file, define it in that file.

Naming conventions

• Use kebab case for filenames and directories (e.g. my-file.tsx instead of myFile or my_file). One reason we do this is because it narrows search results when looking for variable and function names which cannot be initialized using kebab case.
• When defining an enum, always do so in the plural and beginning with a capital letter (e.g. ViewportSizes instead of ViewportSize or viewportSizes).

BEM and Stylesheets

This application is written using the block-element-modifier methodology for CSS. Global styles live in src/styles/ but if a component needs style rules specific to said component, use a sibling stylesheet.

Responsive Design

This application includes a tool that shows the viewport dimensions fixed at the top center of the viewport. The tool can be toggled on and off on Mac with the keyboard combination of control + option + command + r.