Note-Taking App: React.js Advanced

Coding challenge from the Udemy Course the Complete 2020 Web Developer Bootcamp

I wrote the code in App.jsx, CreateArea.jsx, and Note.jsx. The other files were provided by the instructor.

💡Lessons Learned

• Using logical operator && as abbreviated statement (see line 41 in CreateArea.jsx)
• ES6 ternary operator
• React functional components
• React component tree management
• Changing state with props
• Changing state with Hooks (useState, setState)
• Material UI icons and animations

🚀 Getting Started

• Live on Code Sandbox

To run this project locally:

• In your terminal, navigate to the root folder and run the following commands

$ npm install
$ npm start

🕹 How to Use

To add a note:

• Click on the text input field with the placeholder "Take a note..."
• Enter your desired Title and body text
• Click the yellow plus icon button. To delete a note:
• Click on the yellow trash icon button

📣 Reference

• Section 33: React.js of the Udemy Course the Complete 2020 Web Developer Bootcamp