- Work in a fork of this repository
- Work in a branch on your fork
- Write all of your code in a directory named
lab-
+<your name>
e.g.lab-duncan
- Submit a pull request to this repository
- Submit a link to your pull request on canvas
- Submit a question, observation, and how long you spent on canvas
- Students will learn to create frontend routes using react-router-dom
- Students will learn to restructure their applications into modules
- Students will learn the difference between view state and application state
- Students will learn to lift application state to better control one way data flow
- Students will learn to create and import sass partials
Your lab directory must include
- README.md -- with documention about your lab
- .babelrc -- with all dependencies and dev-dependencies
- .eslintrc.json -- with the class .eslintrc.json file
- .gitignore -- with a robust .gitignore
- .eslintignore -- with the class .eslintignore
- yarn.lock -- with the yarn lockfile
- package.json -- with all dependencies and dev-dependencies
- webpack.config.js -- with webpack config
- src/ -- containing the frontend code
- src/main.js -- for appending your app to the DOM
- src/action/ -- containing your action creators
- src/reducer/ -- containing your reducers
- src/lib/ -- containing your redux
- src/component/ -- containing your component folders
- src/component/app/index.js -- containing App component, provider, browser router, and route to
- in this app a category should contain at least the following properties
id
a uuidtimestamp
a date from when the category was createdname
a string that is the name of the categorybudget
a number that is the total amount of $ in the category- feel free to add more to your categories
- create a category reducer in your reducer directory
- this reducer should support the following interactions
CATEGORY_CREATE
CATEGORY_UPDATE
CATEGORY_DESTORY
- you should create an action creator for each interaction supported by your category reducer
- in
lib/store.js
export a function that will return a new redux store from your category reducer
Create the following components and structure them according to the following diagram.
App
Provider
BrowserRouter
Route / Dashboard
CategoryForm -- for creating categories
[Category Item]
CategoryForm -- for updating categories
The App component should set up the Provider for the redux store and the Router.
- should be displayed on the
/
route - should use react-redux's
connect
to map state and dispatchable methods to props - should display a
CategoryForm
for adding categories to the app state - should display a
CategoryItem
for each category in the app state
- should expect an
onComplete
prop to be a function- that function should be invoked with the CategoryForms state when the form is submitted
- should expect a
buttonText
prop to configure the submit buttons text - should support an optional
category
prop that will initialize the state of the form
- should display the category's name and budget
- should display a delete button
onClick
the category should be removed from the application state
- should display a CategoryForm
onComplete
the form should update the component in the application state
Write a description of the project in your README.md