- This is an analysis document for my React big practice. In this practice, I will build an application to filter smartphones in a store by brand(Apple, Samsung, Xiaomi,...), price, and product favorites. In addition, you can view product details. You can find detailed requirements and my analysis as well as my target in this document. Through this practice, I hope I can learn how to use React.
- Introduce:
- The Target of this practice is to build a web application using React and other helper tools. The web application is about helping users achieve and filter list smartphones in a store by branch and price.
- You guys can get the wireframe design here: Link
- Plan: Plan practice-one.
- Deploy: here.
- Trainees can understand and get clear React JS concepts.
- Trainees can understand common components and create good common components which are reusable.
- Trainees can build a simple web application using React JS.
- Timeline:
- Editor: Visual Studio Code.
- Node v18.14
- Pnpm v7.28.0
- ReactJS v18.2.0
- Vite v4.3.9
- Prettier v2.8.8
- ESLint v8.38.0
- Step 1: Clone repository.
- With HTTPS:
$ git clone https://github.com/phuocduong-agilityio/internship-huy-dao.git
- With HTTPS:
- Step 2: Move to folder which just cloned in your computer
cd internship-huy-dao\ReactJS\practice-one
- Step 3: Move it to branch practice
$ git checkout feature/practice
- Step 4:
- Install package: Open terminal >
pnpm install
oryarn install
- Install Storybook library(can skip if you installed Storybook):
pnpm dlx storybook@latest init
ornpx storybook@latest init
- Install package: Open terminal >
- Step 5:
- Run project:
pnpm start
oryarn start
. - Run storybook:
pnpm run storybook
oryarn storybook
- Run project:
- Step 6:
- Open http://127.0.0.1:5173 in browser
- Huy Dao.
- Email: daoanhhuy26012001@gmail.com.