Skip to content

tws-demo/301-react-form

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

基于 react 的表单练习

运行方式

  1. 请用react-create-app 创建项目的base,不用直接clone 上面的库

练习要求

重要:本题包含四个篇目:基础,进阶,提高,出栈,做完一个篇目后,需要到 https://jinshuju.net/f/rXjiN5 提交做题记录

基础篇

  1. 根据图例,用 ant-design + html 完成切图,尽量少用或者不用自定义样式(自定义样式在less中) mockup

  2. 使用 react + redux 完成组卷功能,要求如图例

  3. 可以使用假数据,假数据为Paper信息和homeworkQuiz信息

    • 一个Paper信息

{ "name": "react", "description": "考察react基础", "sections": [ { "type": "logicPuzzle", "definition": { "easy": 2, "normal": 3, "hard": 4 } }, { "type": "homeworkQuiz", "title": "编程题", "definition": { "quizzes": [ "12345" // quizId ] } } ] }

- homeworkQuiz信息
```json
{
 "items": [
   {
     "_id": "12345",
     "title": "react",
     "stack": "Javascript"
   },
   {
     "_id": "12346",
     "title": "jersey",
     "stack": "Java+Gradle"
   }
 ],
 "totalCount": 30
}

进阶篇

  1. 加入 mongoose,创建相应Model

  2. 实现如下接口

    
    GET api/papers # 获取Papers列表
    GET api/papers/:id # 获取一张试卷
    POST api/papers/:id # 创建一个试卷
    PUT api/papers/:id #更新一个试卷
    DELETE api/papers/:id #删除一个试卷
    
    GET api/homeworkDefinitions #获取homeworks列表
    
  3. 利用上述接口完成此功能

  4. 完成api部分的测试

提升篇

  1. 学习 http://airbnb.io/enzyme/ 并完成对React 的单元测试

  2. 学习 Redux-Form http://redux-form.com 并用其重写页面

出栈篇

  1. 说说你对"数据驱动视图"这个概念的理解
  2. 待定...

About

code base for rxjs & reactjs

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 92.3%
  • HTML 5.9%
  • CSS 1.8%