React

Sidenote_21.07.29

Koowoy
Steps to try when pip doesn’t work properly Run in Administrative Mode Reinstall pip with py -m ensurepip --upgrade (pip documentation) Alternative command when django-admin doesn’t work From Django Docs command not found: django-admin¶ django-admin should be on your system path if you installed Django via pip. If it’s not in your path, ensure you have your virtual environment activated and you can try running the equivalent command python -m django.

Connecting React App to Google Sheets using Google Apps Script

Koowoy
Reference: For general structure - Youtube Channel Get __it Done! For auto increment id on Google Sheets - Stack Overflow Question Motivation For my react app, I wanted to create a page where I could ask for the user’s email and name, maybe for future marketing purposes. Although storing these kind of data would conventionally require a backend server and a database connected to it. However, I wanted this project to be as lightweight as possible, preferably a Front End only project.

TIL of the Past: 20-10-07

Koowoy
React - Create React App Creating a react app was… harder than I expected, although Repl.it supported React template and even the Create React App template. Concept of React With React, front end can be broken down into “Components”, which allows for further uses of the function later on. Literally, it means that parts of html is written in pieces in javascript form, so that it can be written more efficiently with lots more extensibility.

Deploy React App With Github Pages

Koowoy
References:Youtube Tutorial by Telmo Sampaio Create-React-App Documentation Although I thought the deployment part wouldn’t take that much time. But because of some minor mistakes I made in some stages, which was not explicitly explained by the create react app documentation, I had to start over a multiple times until I figured things out. Basic Steps as explained by the documentation 1. Add homepage field to package.json The field could be placed in order in the package.

Using SVG in Create-React-App (color/text manipulation, download as png)

Koowoy
Introduction I was asked to build a small app that takes in user input and create a downloadable image using those inputs. The user inputs their name and three colors (using html color picker) and the result image renders according to those inputs. SVG After researching for different ways to manipulate images, I came across ‘svg’. Svg stands for ‘scalable vector images’, and put short, instead of saving image pixel by pixel as in other image files, svg saves ‘paths’ of the image and ‘draw’ this paths when called.