adewaleadeniji / react-app-template Goto Github PK

A React-Redux and Tailwind CSS / Styled Components boilerplate for any future project

These technologies were used:

• Create React App
• Tailwind
• Styled Components
• React-Redux
• Redux

This boilerplate has been set up with React, Tailwind, Redux, and React-Router

The React components are subdivided between two folders, ./componentsand ./containers. Generally, containers refer to "smart" components and components refers to "dumb" components. Dumb here meaning stateless or re-usable.

I generally use the containers folder to have my main pages './HomePageContainer', './AboutPageContainer', etc. and keep all the re-usable components that compose these containers in the components folder.

When the project grows, the folder structure is usually re-organized for all the related components to be grouped together in new folders.

Kept Styled Components here in case there are specific re-usable components that we are going to need throughout the application. Might remove it later if necessary and if the bundle size of the application is too large.

Tailwind CSS is a great library for quick iteration and fast development. It's a CSS fraework packed with classes like flex, pt-4, text-center, etc. that allows us to make styling a faster process.

The routes are all stored in the Routes.js file of the ./routing folder. There, you'll find two special components

1. UnauthenticatedRoute --> Routes that don't require the user to be logged in to be displayed
2. AuthenticatedRoute --> Routes that require the user to be logged in to be displayed

The Authentication state is stored in the authentication reducer in the Redux store. It is passed down as a prop to the App.js component. Any call to the reducer with the respective action creator will trigger the isAuthenticated state to change and will show or hide components accordingly.

Actions creator functions are all stored in the ./actionCreators file

Finally, the reducers are all in the ./reducers file, which for now contains one reducer, the authentication reudcer.

1. Clone the GitHub repository

   git clone https://github.com/AdewaleAdeniji/react-app-template.git
   

2. Run npm install

3. Start coding.

Setting the boilerplate of a project usually takes away from the momentum of a good idea. Lost momentum might lead to a loss in productivity. More importantly, lost momentum is simply lost energy, lost positivity, it's just annoying. I don't need this in my life. This should allow me to jump start any project in the future.