DEV Community

Cover image for LEARNING HOW TO: useEFFECT and useSTATE, A REACT APP.
Boitumelo Ngwenya
Boitumelo Ngwenya

Posted on

LEARNING HOW TO: useEFFECT and useSTATE, A REACT APP.

I have been working on a web app called "Heat" , the sole purpose of the app is to help me learn and apply JavaScript and improve my CSS, lots of backend also. The plan was to create a visually appealing web app with a couple of fun features.

What I have learned in the process:

The front end is built using react js, I chose react just out of curiosity and finding out what the buzz is about, one of my objectives was integrating some Google APIs into the project, the one I went for was the Google Maps API, I am using it for the search bar's AutoComplete. The implementation was not too difficult due to Reacts' -> @react-google-maps/api library which helps integrate Google Maps features to react apps. The search component is going to be integrated with add restaurant section.

The front-end is hosted on netlify, which is linked to my github and it auto updates the app on every push to the remote repo, it was pretty straight-forward.

Heat is a Single Page Application (SPA) and the implementation is managed through the React Router DOM, it enables navigation on the client side by mapping URLs to components. This means users can visit different parts of the app through different URLs, even though the entire application is loaded as a single HTML page.

What I am currently working on:

I am currently working on the Register, Login and Logout elements of the app which are backed by Flask/Python. Flask also has a couple of libraries which aid the development process, such as SQLAlchemy and Login Manager. The back-end side has had a gentle learning curve compared to the front-end. I am still grappling with useState and useEffect, which are key hooks in react for managing state.

After completing the Authentication element of the app, I am considering migrating to Java for the BackEnd. Thoughts?

Lots of learning. #React #JavaScript #Flask #WebDevelopment

Top comments (0)