Week 8 - Learning REACT
Summary
Last week, a wrote a completely functional django API, so that a web frontend can retrieve all the necessary data for its operation. This week, I started to migrate the frontend to REACT.
Development
React basic concepts
React is a javascript library to ease the creation of interactive web applications.
Components
React apps are made out of components. A component is a piece of the user interface that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
React components are JavaScript functions that return markup. The markup syntax is called JSX.
Displaying data
JSX lets you put markup into JavaScript. Curly braces “escape back” into JavaScript so that you can embed some variable from your code and display it to the user.
Conditional rendering
In React, there is no special syntax for writing conditions. Instead, you’ll use the same techniques as you use when writing regular JavaScript code.
Hooks and Props
Functions starting with use are called Hooks. For example, useState is a built-in Hook provided by React that the components can use to store internal info.
They provide a simple interface to update variables between components. Usin props (parameters in REACT), you can pass information between components. You can even pass hooks as props to execute more complex interactions.
My first REACT interface
With all these concepts in mind, I developed a more professional interface. Now, the application features a diagram-based tree editor and draggable separators between components.
I experimented with two diagram libraries: ProjectStorm and Beautiful React Diagrams. Although I initially chose the latter, I later discovered that it has been unmaintained for years and decided to switch to the more complex and powerful ProjectStorm library.