5 시간 안에 모든 기능을 갖춘 전자 상거래 웹 사이트를 구축하는 React and Node 튜토리얼에 오신 것을 환영합니다. 

코드 편집기를 열고 다음 시간 동안 저를 따라 React와 Node.JS를 사용하여 전자 상거래 웹 사이트를 구축하십시오.

https://dev.to/basir/react-node-tutorial-full-ecommerce-in-5-hours-2020-1hha 

소스 코드 및 데모 

? Demo : https://node-react-ecommerce-app.herokuapp.com/

? Code : https://github.com/basir/node-react-ecommerce

리 액트 및 노드 튜토리얼 보기 

다음과 같은 것을 배울 것입니다

• HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox
• React: Components, Props, Events, Hooks, Router, Axios
• Redux: Store, Reducers, Actions
• Node & Express: Web API, Body Parser, File Upload, JWT
• MongoDB: Mongoose, Aggregation
• Development: ESLint, Babel, Git, Github,
• Deployment: Heroku
• Watch React & Node Tutorial

00:02:00 Part 01- Introduction

Amazon과 같은 전자 상거래 웹 사이트를 구축하기 위한 자습서 개요를 제공합니다.

00:08:26 Part 02- Install Tools

웹 개발을 시작하려면 코드 편집기와 웹 브라우저를 설치해야 합니다. 이 부분에서는 코딩을 시작할 환경을 준비합니다.

00:12:36 Part 03- Website Template

이 부분에서는 전자 상거래 웹 사이트의 웹 템플리트를 작성합니다.

00:29:47 Part 04- Products List

정적 HTML 요소로 제품 목록을 작성합니다.

00:41:54 Part 05- Create Sidebar

사이드 바를 표시하고 숨기는 햄버거 메뉴를 만듭니다. 또한 제품의 세부 사항 페이지를 디자인합니다.

00:52:39 Part 06- Create React App

이 부분은 프론트 엔드에 관한 것입니다. UI 요소를 빌드 하기 위해 React 라이브러리를 사용합니다.

01:01:09 Part 07- Render Products

전자 상거래 홈페이지입니다. 제품 목록이 표시됩니다.

01:06:30 Part 08- Product Details

사용자가 제품을 클릭하면 해당 제품에 대한 세부 정보를 표시하는 페이지가 있어야 합니다. 이 레슨은 모두 매력적인 세부 사항 페이지를 작성하는 것에 관한 것입니다.

01:30:53 Part 09- Create Node Server

이 부분은 Node와 Express에 관한 것입니다. JavaScript 언어를 사용하여 웹 서버를 작성하는 데 널리 사용되는 프레임 워크입니다. MongoDB 데이터베이스를 생성하고 관리자를 저장하고 검색합니다.

01:39:52 Part 10- Fetch Server Data

이 레슨에서는 React Hooks를 사용하여 서버에서 데이터를 가져옵니다. 현대 async/await 스타일로 이 작업을 수행하기 위해 axios 라이브러리를 사용합니다.

01:47:55 Part 11- Manage State With Redux

데이터로 여러 양식을 처리 할 때 상태 관리보다 나은 것은 없습니다. 이 과정에서는 Redux를 사용하여 복잡한 상태를 처리하고 앱 동작을 예측 가능하게 유지합니다.

02:07:11 Part 12- Add Redux To Details

이 부분에서는 세부 사항 페이지 상태를 Redux로 이동합니다. 먼저 리듀서를 생성 한 후 액션을 정의하고 디테일 컴포넌트에 연결합니다.

02:29:23 Part 13- Shopping Cart Screen

쇼핑 카트는 전자 상거래 웹 사이트의 핵심입니다. 우리는 React와 Redux를 사용하여 사용자 친화적인 쇼핑 카트를 만드는 데 중점을 둡니다.

03:08:11 Part 14- Connect MongoDB

이 레슨은 MongoDB 데이터베이스의 데이터 지속에 관한 것입니다. 몽구스 패키지를 사용하여 모델을 생성하고 데이터베이스에서 데이터를 저장 및 검색합니다.

03:21:35 Part 15- Sign In User

사용자를 결제로 리디렉션 하기 전에 사용자를 등록해야 합니다. 이 부분에서는 사용자 정보를 얻기 위한 양식을 작성하여 데이터베이스에 저장합니다.

03:56:02 Part 16- Manage Products

관리자는 제품을 정의하고 원할 때마다 재고를 갱신 할 수 있어야 합니다. 이 페이지는 전자 상거래 제품 관리에 관한 것입니다.

04:38:43 Part 17- Checkout Wizard

이 부분에서는 로그인, 배송 정보, 결제 방법 및 장소 주문을 포함하여 결제 마법사를 구현합니다.

요약 

이 자습서에서는 Amazon과 같은 eCommerce 웹 사이트를 만들었습니다. 필요에 따라 이 프로젝트를 자유롭게 변경하고 포트폴리오에 추가하십시오. 또한 이 React and Node 튜토리얼에 대한 여러분의 의견을 듣고 싶습니다. 여기에 의견을 공유하십시오.