DEV Community

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

Posted on

1

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

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay