A simple guide to follow while starting a new project

boilerplate.md

Project guide

The following suggestions are personal. That's how I like to go while I'm starting a React/React Native project.

Step by step

JS or TS?

Decide whether you want to use plain Javascript or Typescript

• If you decide for using Typescript, I strongly suggest you to follow this official (and up-to-date) guide

Delete useless files

Delete all of those files from your generated boilerplate

• e.g.: .watchmanconfig, .flowconfig (if you decide do not use flow), __tests__ folder (I prefer using .test files into each directory. It's easier for testing and for referencing the tested components)

Prettier

Establish the Prettier rules into the .prettierrc.js(json/yml) file

ESLint

Establish also the Lint rules into the .eslintrc.js(json/yml) file (Obviously this is a hard piece for this moment, because probably you will find and decide some rules later, while coding)

Project structure

Of course you can decide your own structure, but I really like the following way. Use it just as a guide, because I added some personal libraries and concepts that I like to use as well (typescript, duck pattern, etc)

src
|-commons
    |-types.ts // if you use Typescript
    |-styled-components
        |-styled.d.ts
        |-theme.ts
|-screens
    |-Home
        |-duck.ts
        |-index.tsx
        |-style.ts
|-App.tsx // root file (referenced by index.js)
|-navigator.ts
|-reducers.ts // combined reducers file
|-store.ts
index.js
.eslintrc.json (I prefer using .json extension because at this way the vscode helps you with linter intellisense)
...otherFiles

State manager

Will you need a state manager?

• Probably yes! A state manager is always welcome, except for really small projects.
• If yes, I strongly suggest you to decide between either Redux or MobX for it

Styling library

Personally, I like to build my own components with plain CSS. For doing that, the best library I know is called Styled Components. Take a look and give a chance.

If you are in a hurry project, and you don't want spending time building your own components, check out the following libraries: NativeBase and React Native Elements

Async middleware

If you don't use any State Manager, skip this part. Otherwise, you will need something to be able to use asynchronous approaches into your actions. You can build your own middleware for that, or be clever and use any great library already built. The most used ones are thunk and saga

Logging

At this point you have some options:

• For basic console.log commands, you can use the Android Studio's log cat for seeing it, or the xCode logger for iOS projects
• Opening the device's devTools, you can enable JS debugger, and see the console.log commands into your browser as well
• Download the React Native Debugger sounds a good option, because besides the log commands, you can also see all the project's event tree, and your store (considering you are using a state manager), and it is very helpful
• Reactotron sounds also an outstanding option for logging your app. The downside here is that you will need some extra configuration in your project to make this tool works

I think with all the suggestions above you are able to start coding a very complete and consistent app. The focus for all instructions is for a React Native project, but you can use it for React (web) as well

I hope you enjoy!