A simple demo to show the boilerplate-cra from React Avançado

This is a Create React App boilerplate with some configurations from React Avançado Course.

What is inside?

This project uses lot of stuff as:

• Create React App - CRA
• TypeScript
• React Router
• Styled Components
• Jest
• React Testing Library
• Storybook
• Eslint

Folder Structure

├── README.md
├── generators # folder to our templates
├── public # folder with our assets
├── src
│   ├── App.tsx # main file to our SPA (We define routes/components here)
│   ├── components
│   │   └──Example
│   │       ├── index.tsx
│   │       ├── stories.tsx
│   │       ├── styles.ts
│   │       └── test.tsx
│   ├── index.tsx # main file to ReactDom.render
│   ├── pages # we separated our pages/views/screens here
│   │   └── About.tsx
│   └── styles # any styles that you want to share inside the app
│       └── global.ts

Getting Started

First you can clone or use this template in your GitHub profile.

# install the deps
yarn

# run the project
yarn start

Other commands like generating components and test are listed below:

Commands

• start: runs your application on localhost:3000
• build: creates the production build version
• lint: runs the linter in all components and pages
• test: runs jest to test all components and pages
• generate <ComponentName>: generates a new component under src/components folder
• storybook: runs storybook on localhost:6006
• build-storybook: create the build version of storybook

Learn More

To learn more about the structure and other commands/modifications, see the Create React App Documentation.