This project was bootstrapped with Create React App.
Finish all of bellow mentioned steps to manage Idea Journal store ideas in local state of the app.
Exercise #1: Clone it on your machine and then in project directory install npm modules and dependencies, run app in the development mode.
npm i
npm start
- Components are like JavaScript functions - they accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen
- Class and Functional components
- Always start component names with a capital letter
- Components must return a single root element
- What UI should look like, it's neither string nor HTML
- JavaScript expressions are wrapped into {}
- Specifying attributes are string literals or {JavaScript expressions}
- camelCase property naming, e.g. className, tabIndex
Exercise (basics) #2: Create Note component displaying title and text of a note.
Exercise (basics) #3:
Create Footer component containing <div> with style class Footer and add it to App component.
- State is similar to props, but it is private and fully controlled by the component
- Class Components
- Initial this.state is assigned in class constructor
- Do not modify state directly, use setState()
Exercise (state) #4: Display modal window to add a new note.
Exercise (state) #5: Display or hide text in Note component.
- Props are attributes of component
- Read-only - component never modify its own props
Exercise (props) #6: Pass notes info via props from App to NoteList.
Exercise (props) #6: Pass note info via props from NoteList to Note.
Exercise (props) #7: Pass callback function from NewNoteModal to App and add a new note to a list.
EXTRA Exercise (props) #7: Pass callback function from Note to App and remove note from a list.
To run solution
cd solution/
npm i
npm start # or PORT=3001 npm start to run in parallel with working app