ruila/hero-skills

hero-skills

It is a little demo about modifying point skill of heroes.

Used Packages

React: JS Framework

TypeScript: It's s a syntactic superset of JavaScript which adds static typing.

Styled-Components: It allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

Eslint: It can define rules to keep code style consistent and help me find and fix problems with your JavaScript code.

Prettier: It is an opinionated code formatter that supports a lot of different programming languages, like: JavaScript. JSON. JSX. CSS.

Axios: Axios is a promised-based HTTP client for JavaScript. It has the ability to make HTTP requests from the browser and handle the transformation of request and response data.

React Router DOM: It enables you to implement dynamic routing in a web app. Unlike the traditional routing architecture in which the routing is handled in a configuration outside a running app, React Router DOM facilitates component-based routing according to the needs of the app and platform.

Comment Principle

Only comment things e.g. // TODO if the code is uncompleted or will be used in the future.

Obstacles to overcome

First time using styled-component, figuring out the art of decomposing components in the most efficient way took me some time, but I eventually did it by observing common factors and extracting them out along the way.

Folder Structure

• /src/api - axios Instance and APIs

• /src/components - reusable components

• /src/const - constant data for initializing or dummy data

• /src/pages - page components

• /src/types - types used in the project

Performance Optimization

1. Using React.memo to avoid re-rendering of HeroCard unless props active changes.
2. Using Suspense and React.lazy for code-splitting.

Install Dependencies

yarn

Start Project

yarn dev

then go to http://127.0.0.1:5173/