During my time at MEGASAP, July 2021, they have given me a task to convert the existing Django templates for their attendance tracking dashboard for employee and employer to React due to scalability and better UX in the future. However, they do not want to buy or have another server just to host React front end, so I need to include React directly in Django as an app using "django-admin startapp" command.
Since the React embedded in Django application, I cannot use the common "npx create-react-app" way because the common way will generate the files that might not be accessible in Django statics. So, I need to combine certain library and using Webpack to compile all the Javascript file into one main file (main.js) and directly put the "main.js" into Django static folder.
To enable developing the front end using React, these are the front end tools I need to get set up:
- Webpack ⇒ setting up the Javascript, SASS, CSS, Images and others file compilation into a single "main.js" file and output the file into Django static folder.
- Babel ⇒ to enable the latest Javascript syntax being convert into older version so that old browser can access the content.
- React, React Router, React Hooks ⇒ the typical React library for developing the React application, together with front end routing system and global state management using Context API.
- Others React Library ⇒ React i18n for internationalization or language translation, React Helmet for dynamically changing the or any tag based on any condition given.
- Other Library ⇒ axios for fetching the data through API from Django Rest Framework.
As for backend, which is the Django, the API need to be built since all the communication for Django to React through REST API. So, the Django Rest Framework has been used.
Working at MEGASAP for a short while really give me some new experience on how to work with React and Django, and how to start a React application without any boilerplate.
Top comments (0)