hackernews react

해커뉴스-반응

해커의 React 구현 버전은 온라인으로 https://ckinmind.github.io/hackernews-react를 방문하세요.

기술 스택

• ES6을 사용한 React.js
• 라우팅을 위한 React-Router
• 아약스용 jQuery
• 도구 구축을 위한 웹팩

프로젝트 설명

• 이 프로젝트는 학습 프로젝트입니다(원본이 아님). 원래 프로젝트 주소는 React-hacker-news입니다.
• 이 프로젝트는 Yeoman이 구축했으며 기본 스캐폴딩은 Generator-react-webpack을 사용합니다.
• 이 프로젝트는 원본 프로젝트에 많은 수정을 가했습니다. 자세한 내용은 아래 버전 업데이트를 확인하세요.
• HackerNews API 참조

버전 업데이트

• [v1.3] : 스타일 최적화, 디렉터리 단순화, 세부 업데이트 지침 이슈 11
• [v1.2] : 버그 수정, 재사용을 위한 구성 요소 분리, 세부 업데이트 지침 문제 8
• [v1.1] : ES6 재작성, 기능적 구성 요소, 최적화된 처리 흐름, 세부 업데이트 지침 문제 7
• [v1.0] : 원본 버전(기본적으로 원본 프로젝트와 동일), 세부 업데이트 지침 5호

시작하는 방법

 > git clone https : //github.com/ckinmind/hackernews-react.git
> cd hackernews - react
> npm install
> npm start 

질문 모음

• isMounted() 문제에 대해서는 문제 3을 참조하세요.
• 컴포넌트가 소멸된 후 비동기 ajax로 인해 발생하는 문제는 isMounted와 관련이 있습니다. 문제 6을 참조하세요.
• jquery를 별도로 패키징하는 웹팩 구성 문제에 대해서는 이슈 10을 참조하세요.

## 디렉토리 설명

 .
├── /cfg/                       # webpack配置文件存放目录
│   ├── base.js                 # 基础配置
│   ├── default.js              # 默认配置
│   ├── dev.js                  # 开发环境配置
|   ├── dist.js                 # 生成环境配置
│   └── test.js                 # 测试环境配置
├── /dist/                      # 存放最终打包输出的用于生产环境的项目文件
├── /node_modules/              # node模块存放的目录
├── /src/                       # 存放开发环境项目源码
│   ├── /components/            # 组件目录
│   ├── /config/                # 配置目录（没用到）
│   ├── /styles/                # 样式文件目录，内有一个App.css基础css文件
│   ├── index.html              # 项目入口文件
│   ├── index.js                # js入口文件
│   └── route.js                # route文件
│── .babelrc                    # Babel 配置文件
│── .gitignore                  # 配置不需要加入Git版本管理的文件
│── package.json                # npm的依赖配置项
│── README.md                   # 项目说明文件
│── server.js                   # 项目运行的js文件，命令可查看package.json中的script
└── webpack.config.js           # webpack配置文件，不同环境的配置项在cfg目录下