Demo of create-react-app, redux, bootstrap and storybook

Recently I need make a To-do-list demo by React, Redux, Storybook, which I finally decide to use create-react-app instead of setting everything from the beginning. Create-react-app is super handy for the new react beginners. It’s easy and could be very fast to setup a basic reactjs project.

It’s not the first time I read the user guide, but there’re really some good points that I’d like to share with ou.

Create-React-App

npm run eject

If you are new to create-react-app, I strongly recommend you run this command frist and check what there inside. Create-reat-app is not a magic at all, it just a tool for people saving time to create the project with a lot of nice features.

Adding a Stylesheet

I don’t think SASS, LESS is an elegant solution for those big react project. Developers, Designers always add/delete/modified styles which which makes the CSS uncontrollable due to the cascading. For small react projects, however, it’s ok.
I’m a CSS-in-JS guy which recommended to code CSS by javascript(why?), and there are a lot of libraries nowadays like Aphrodite, Styled-component, etc.. Michele Bertoli made a list of comparison, think about the solution before you start the project.

Adding Bootstrap

If you have no idea of what’ll your project layout be, please add bootstrap into it, at least it will suit you most requirements, otherwise, you could just using Flexbox or newly released CSS grid layout.

Developing Components in Isolation

React Storybook is a super good tool to collaborate between the developers and UX designers, and Product owners, people knows what kinds of UI components will be, and they could find the problems at a very early stage. Try to use it, and maintain this, which it takes time, but you will get benefit.

Redux

If you know your application needs redux, then add this into your project. Otherwise, start from the basic react app, build components, manage state by lifecycles… when the project grows, you’ll see the point that you need redux..

Github project

To-do-list-redux-storybook-demo: https://github.com/davidctj/To-do-list-redux-storybook-demo

Please follow and like us: