I just finished the React JS project for making a Recipe Box and I couldn’t wait to share it!
I am quite happy with the result and made a few adjustments to the actual requirements by adding an image link and the recipe link.
Also, I wanted to share some things I learnt while doing the React projects:
- React JS with Bootstrap - React JS does not completely work well with Bootstrap, but if you want to use bootstrap, here is a great option https://react-bootstrap.github.io/components.html.
- Local Storage - There is a great video on the Freecodecamp youtube channel explaining about local storage: https://www.youtube.com/watch?v=AwicscsvGLg
- Thinking in React: A good way to start a React project or any web project for that matter, is to break down the UI into parts or react components. Facebook has a very useful tutorial here: https://facebook.github.io/react/docs/thinking-in-react.html
- Lifting State Up: While doing the React projects, I found that I often needed to find a way to sync some information or State (in React words). The recommended way is to “lift” the shared information to the closest ancestor (aka store the state there) and passing them down to the children via “props”. You can find more information here: https://facebook.github.io/react/docs/lifting-state-up.html
I am still learning every day! Let me know what you guys think about my recipe box: the visual UI or even the code design