React exercise - extendable for Redux
- fork and clone this repo
- use
create-react-app
to create a new app in this project directory - create a booklist app that loads books from
lib/books.db.js
via fake xhr - add a form to allow user to add books to the fake db
- add an input text field to allow users to filter the book list
App Container
+----------------------------------------------------+
| |
| BookListAppTitle |
| +----------------------------+ |
| | | |
| | props.title | |
| +----------------------------+ |
| |
| BookFilterInput |
| +----------------------------+ |
| | | |
| | input onChange setFilter | |
| +----------------------------+ |
| |
| BookList |
| +----------------------------------------------+ |
| | | |
| | for each props.books: Book | |
| | +----------------------------------------+ | |
| | | | | |
| | | props.title props.author | | |
| | +----------------------------------------+ | |
| +----------------------------------------------+ |
| |
| NewBookForm Container |
| +----------------------------------------------+ |
| | | |
| | <form> handleSubmit | |
| | handleChangeTitle | |
| | handleChangeAuthor | |
| | <button type="submit"> | |
| | | |
| +----------------------------------------------+ |
| |
+----------------------------------------------------+
.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── components
│ ├── BookList.js
│ ├── BookListItem.js
│ ├── BookFilterInput.js
│ └── BookListAppTitle.js
├── containers
│ ├── App
│ │ ├── index.js
│ │ ├── index.test.js
│ │ └── styles.css
│ └── NewBookForm
│ └── index.js
├── index.css
├── index.js
└── lib
└── books.db.js
- Add redux
- Add react router
- Create 3 pages a user can browse through
- Home page
- A view to list all the books
- Clicking on a
BookListItem
should redirect to a Single Book View
- Single book view
- A view that displays a single book and its contents
- New Book Form view
- A view rendering the form to add a new book
- Home page
- Create a new book component to view a single book