Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/potchangelo/react-just-react
ตัวอย่างโปรเจ็ค React จากคลิปสอน React ตั้งแต่ Ep.2-20 ของ Zinglecode
https://github.com/potchangelo/react-just-react
react react-components react-hooks react-router react-styled-component react-testing-library reactjs
Last synced: about 22 hours ago
JSON representation
ตัวอย่างโปรเจ็ค React จากคลิปสอน React ตั้งแต่ Ep.2-20 ของ Zinglecode
- Host: GitHub
- URL: https://github.com/potchangelo/react-just-react
- Owner: potchangelo
- License: mit
- Created: 2021-01-13T07:57:35.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-01T10:43:48.000Z (over 1 year ago)
- Last Synced: 2024-05-28T19:47:06.085Z (5 months ago)
- Topics: react, react-components, react-hooks, react-router, react-styled-component, react-testing-library, reactjs
- Language: JavaScript
- Homepage: https://www.youtube.com/watch?v=dxm-Mtd-LPs&list=PL_xSQKvnccpn-C2fZNJtCykO24yqFWkDn&index=2
- Size: 781 KB
- Stars: 7
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Just React examples code
ตัวอย่างโปรเจ็ค React จากคลิปสอน Ep.2-20 ของ Zinglecode
## YouTube video with playlist
https://www.youtube.com/watch?v=dxm-Mtd-LPs&list=PL_xSQKvnccpn-C2fZNJtCykO24yqFWkDn&index=2
## About React Router
เนื่องจาก React Router ที่ใช้ใน Github Repo อันนี้เป็น v5 (ตัวเก่า) ดังนั้นถ้าใครอยากดูตัวอย่างโค้ดของ React Router v6 (ตัวปัจจุบัน) กรุณาเปิดดูได้จากลิ้งค์นี้
https://github.com/potchangelo/react-just-react-router-v6
## Install and Run project on VSCode
0. ติดตั้ง Node.js ลงเครื่องให้เรียบร้อยก่อน (ใช้ Version 14, 16, หรือ 18 ก็ได้)
1. ดาวน์โหลดโปรเจ็คนี้ลงเครื่อง (เลือกจาก Github branch ที่ต้องการได้)
2. เปิดโฟลเดอร์โปรเจ็คใน VSCode
3. เปิด VSCode Terminal
4. ติดตั้ง Packages ของโปรเจ็ค (สามารถแก้ไขเลขเวอร์ชั่นของ Packages, Libraries ต่างๆ ให้เป็นเวอร์ชั่นล่าสุด ก่อนทำการติดตั้งได้ ที่ในไฟล์ package.json)
```
npm install
```
5. Run เว็บโปรเจ็ค
```
npm start
```
## Github branches for each episodes
1. [Start](https://github.com/potchangelo/react-just-react/tree/01-start)
2. [State x Object](https://github.com/potchangelo/react-just-react/tree/02-state-x-object)
3. [State x Array (Add)](https://github.com/potchangelo/react-just-react/tree/03-state-x-array-01)
4. [State x Array (Delete)](https://github.com/potchangelo/react-just-react/tree/04-state-x-array-02)
5. [State x Array (Edit)](https://github.com/potchangelo/react-just-react/tree/05-state-x-array-03)
6. [useEffect](https://github.com/potchangelo/react-just-react/tree/06-effect)
7. [useEffect return](https://github.com/potchangelo/react-just-react/tree/07-effect-return)
8. [useContext](https://github.com/potchangelo/react-just-react/tree/08-context)
9. [useContext x useState](https://github.com/potchangelo/react-just-react/tree/09-context-state)
10. [useContext x useReducer](https://github.com/potchangelo/react-just-react/tree/10-context-reducer)
11. [useRef](https://github.com/potchangelo/react-just-react/tree/11-ref)
12. [forwardRef](https://github.com/potchangelo/react-just-react/tree/12-forward-ref)
13. [Layout Components](https://github.com/potchangelo/react-just-react/tree/13-layout-components)
14. [CSS Modules](https://github.com/potchangelo/react-just-react/tree/14-css-modules)
15. [styled-components](https://github.com/potchangelo/react-just-react/tree/15-styled-components)
16. [React Router basic routes](https://github.com/potchangelo/react-just-react/tree/16-react-router)
17. [React Router nested routes](https://github.com/potchangelo/react-just-react/tree/17-react-router-nested)
18. [React Router dynamic routes](https://github.com/potchangelo/react-just-react/tree/18-react-router-dynamic)
19. [React Testing Library](https://github.com/potchangelo/react-just-react/tree/19-react-testing-library)