[React] Research document for React

a24vinla commented

2026-04-02 08:09:27 +00:00

Collaborator

As React is a new technology for us a tutorial/general functionality documentation would be beneficial. Please add findings to comments.

a24vinla added the

project documentation

frontEnd

labels

2026-04-02 08:09:27 +00:00

c24danli was assigned by a24vinla

2026-04-02 08:15:44 +00:00

c24danli was unassigned by a24vinla

2026-04-02 08:16:09 +00:00

b23albst was assigned by c24elipe

2026-04-02 08:50:45 +00:00

b23albst commented

2026-04-02 10:49:46 +00:00

Collaborator

React is a javascrip library, that is used for building UIs based on components.

Components are are JS functions (look at the functions in Card.js and TemperatureView.js) that return markup and are easily nested. An example is Card.js, which is used in TemperatureView.js, which in turn is used in App.js.

React uses the syntax extension JSX for creating markup. Since JSX is based on html, you can probably write them mostly the same, with the differance that you can embed JS expressions in your markup with {}, such as:
{person.name}

CSS styling can be imported from other files by adding "className=..." to an element. See Card.js and Card.module.css to see how this can be done.

Events, such as a button being pressed, can be handled by a handler function (either imported, or from the same component).

React is a javascrip library, that is used for building UIs based on components. Components are are JS functions (look at the functions in Card.js and TemperatureView.js) that return markup and are easily nested. An example is Card.js, which is used in TemperatureView.js, which in turn is used in App.js. React uses the syntax extension JSX for creating markup. Since JSX is based on html, you can probably write them mostly the same, with the differance that you can embed JS expressions in your markup with {}, such as: {person.name} CSS styling can be imported from other files by adding "className=..." to an element. See Card.js and Card.module.css to see how this can be done. Events, such as a button being pressed, can be handled by a handler function (either imported, or from the same component).

b23albst commented

2026-04-02 11:33:49 +00:00

Collaborator

Another general functionality worth mentioning are hooks, which is basically allows react components to have a state and access some features, without being a class. Hook names start with use...

Here follows a brief explanation of the hooks used in the current state of the program (see useTemperature.js).

useState is used to preserve and update state variables in components.
const [value, setValue] = useState(initValue)
In this case value is the state variable that can be accessed and setValue is a function used to update value.

The useEffect hook is used to only fetch the API data once, instead of every time a component that uses useTemperature is rendered. This to avoid performance issues.

Here's a link that explains some of the built-in react hooks: https://react.dev/reference/react/hooks

Another general functionality worth mentioning are hooks, which is basically allows react components to have a state and access some features, without being a class. Hook names start with use... Here follows a brief explanation of the hooks used in the current state of the program (see useTemperature.js). useState is used to preserve and update state variables in components. const [value, setValue] = useState(initValue) In this case value is the state variable that can be accessed and setValue is a function used to update value. The useEffect hook is used to only fetch the API data once, instead of every time a component that uses useTemperature is rendered. This to avoid performance issues. Here's a link that explains some of the built-in react hooks: https://react.dev/reference/react/hooks

b23albst added the

needs review

label

2026-04-02 12:51:04 +00:00

b25marem was assigned by c24elipe

2026-04-13 07:21:01 +00:00

b25marem commented

2026-04-13 08:52:11 +00:00

Collaborator

I went through the React research document and the related comments to understand what has been covered so far.

Overall, it’s a good start and gives a basic introduction to React. It explains important concepts like components, JSX, styling, and hooks in a correct way. I also think it’s good that examples from the project (like Card.js, TemperatureView.js, and App.js) are used, since that makes it easier to connect the theory to what we are actually working with.

That said, there are a few things that could be improved to make the document clearer and more helpful, especially for someone new to React:

The structure could be clearer, for example by adding headings for different sections like Components, JSX, Styling, and Hooks.
Some parts feel a bit short and could use more explanation, especially for beginners.
It would be helpful to explain props and state more clearly, since they are core concepts in React.
Adding a few more concrete examples would make it easier to understand.

Overall, it’s a solid starting point, but with a bit more structure and detail it could become a really useful introduction to React for the team.

I went through the React research document and the related comments to understand what has been covered so far. Overall, it’s a good start and gives a basic introduction to React. It explains important concepts like components, JSX, styling, and hooks in a correct way. I also think it’s good that examples from the project (like Card.js, TemperatureView.js, and App.js) are used, since that makes it easier to connect the theory to what we are actually working with. That said, there are a few things that could be improved to make the document clearer and more helpful, especially for someone new to React: The structure could be clearer, for example by adding headings for different sections like Components, JSX, Styling, and Hooks. Some parts feel a bit short and could use more explanation, especially for beginners. It would be helpful to explain props and state more clearly, since they are core concepts in React. Adding a few more concrete examples would make it easier to understand. Overall, it’s a solid starting point, but with a bit more structure and detail it could become a really useful introduction to React for the team.

b25marem added

reviewed

and removed

needs review

labels

2026-04-13 08:55:14 +00:00