Setup begins. #2

Let's get right into the action.

Creating React / Redux from template

npx create-react-app table-prep --template redux
cd table-prep
code .


You've all seen it, such a beautiful series of letters and dashes. Even ending in punctuation! It's like it was meant to be. But we're not done. I'll be adding more in the future, but for now I'm going to add just one of my favorites.

Adding Styled Components Package

npm install --save styled-components

I will be using Styled Components for my components. It's beautiful, not just in the browser but also in it's reusability and organized file structure.

On the topic of beautiful, let's go ahead and add some scripts to to enable easy linting.

Adding Scripts

Inside of package.json we are going to add 2 lines of code to our scripts object.

"lint": "eslint ."
Allows us to run npm run lint in our terminal to check for linting errors in all of our code.

"format": "eslint . --fix"
Allows us to run np run format in our terminal to have eslint edit our files for us to fix errors or warnings (when it's something that eslint is capable of fixing).

Removing some of the boilerplate.

src/App.js
I removed all of the code within the <div className="App></div>

src/features
I removed every file from within features and any references to the exports in other files.

src/app/store.js
I removed the old reducer

And.... That should be it for now. I might have removed something I forgot about, and I will definitely remove / clean up some of the files later on. But for now, it's time to actually start writing code.

Header Photo by Lukasz Grudzien on Unsplash