RESTful API, Authentication & React study log

The past two months were the so-called “Klausurphase '' in Germany and I barely updated anything here in those two months. Now it’s time to restart in this new semester.

Here is my plan:

Other than that I also want to learn more about web3 concepts. I’ll update my progress here. Hopefully I will finish building a few more fun projects at the end of this semester.

Cheers 🍻

Date: 27 Apr 2022

Building API using Node.js, express, MongoDB. Finished GET/POST/DELETE methods.

Now the API is running on localhost but I need to run it on a server so the next step is to install MongoDB on my server. Other than that everything is fine.

Date: 1 May 2022

create react app with create-react-app command. Use dynamic values and Lists in JSX. Use conditionals in JSX to control the content of the page.

JSX feels like a mixture of JavaScript and HTML but some keywords are reserved in JSX such as class so if I want to set class for a HTML element I should use className instead.

The tutorial I’m following is aged and it’s still using ReactDOM.render(react 17) which is no longer supported in React 18. I followed the React document and rewrote it with root.render.

Another problem is I did not see any mention of index.js in the index.html file like it usually does but somehow index.js still has access to the index.html DOM. I did some googling and found out it’s using Webpack with html-webpack-plugin.

Date: 2 May 2022

Add css for components, set inline css.

Again, the index.css is bundled with index.html through webpack just as the case of index.js.

Color tokens in JSX will not show color picker in VS Code by default so I looked up some extensions. The first one I tried is json-color-token. It actually worked but only supported hex color tokens. Sometimes I also use for example ragb so I tried another one called vscode-color-picker and now it worked! After installation remember to add this to your setting.json:

"vscode-color-picker.languages": [
   "python",
   "typescript",
   "json",
   "jsonc",
   "javascript",
   "javascriptreact"
 ]

If the color picker did not show up, try cmd+shift+p and then reload window. After that the color picker should be there.

Date: 5 May 2022

State and global state in React and useState hook.

  1. I kinda like the concept of components. It reminds me of the EJS template but in a more elegant way. Hook in React is new to me and the purpose of hook is to handle events thus to make the app interactive. Maybe later I should draw some flow charts to visualize the flow of this concept.

  2. Keys are needed for list item! However, there’s no need to specify the key in the Item.jsx file. Instead, it should be specified in the ItemList.jsx file. The React official document explained it well.

  3. Passisng props from one component to another component should be careful. For example passing element from ElementList.jsx to Element.jsx, the element in ElementList.jsx looks like this:

{id: 1, 
score: 10, 
comment: 'Lorem ipsum dolor sit amet consectetur adipisicing…ommodi alias voluptatem est voluptatum ipsa quae.'}

And then pass it to the Element.jsx:

<Element key={item.id} item={item} />

The item in Element.jsx would be:

{item: {id: 1, 
score: 10, 
comment: 'Lorem ipsum dolor sit amet consectetur adipisicing…ommodi alias voluptatem est voluptatum ipsa quae.'}}

In order to access score information, instead of

item.score

you need to use:

item.item.score

I understand why it works this way but still it looks a bit weird. Maybe it’s because I’m new to this. I’ll update here if I get better explaination/understanding.

Okay I know why now. The standard way is to use props for the passed item and whatever you call the item in ElementList.jsx, it’s gonna be an object in props.

function Element(props) {
    const [score, setScore] = useState(props.item.score);
    const [comment, setComment] = useState(props.item.comment);