I utilized props and state to put together a small React Sticky Note Application. Inspired by google's Keeper planner. Sort of a little twist to a todo list. I aimed at trying to be a bit differrent. As todo apps are everywhere now a days. This application uses state to track the current sticky notes added as well as the text that the user has entered. Although event handlers and like onclick appear to be rendered inline, they will be collected and implemented using event delegation.
Here's A Brief Look @ The Application(Gif of React Sticky Notes).
Building Encapsulated Components That
Manage Their Own State, Then Composing
Them To Make Complex UIs.
check out a live demo of the project here http://react-google-sticky-notes.surge.sh/
-[Material-UI]
-[Babel/core]
-[Reactjs -16]
-[Webpack -4]
-[Hot Module Replacement]
The following tools are recommended for a React project. Also you will find included below some links for building some complex UI animations and conversion of SVG image into Data URL with the help of Webpack loader.
- Material-UI UI and components library.
- ESLint-loader, When using with transpiling loaders(like babel-loader),make sure they are in correct order(bottom to top). Otherwise files will be checked after being processed by babel-loader.
- CSS-Tricks, For building complex UI animations in React.
- Webpack CSS-loaders interprets @import and url() like import/require() and will resolve them.
- SVG-React-Webpack To utilize an SVG image in your React project, it will have to be transformed into a Data URL. We will need an appropriate webpack loader in our bundler.
git clone https://github.com/FernandoNunez-Dev/React-Google-Sticky-Notescd React-Google-Sticky-Notesnpm installnpm startvisit http://localhost:8080/