Introduction to React Concepts and Temperature Formula

Now that you’re ready, this module focuses on the React-specific concepts needed to build the app. You'll learn about components, props, state, and events, all the core building blocks that make React apps interactive and dynamic. Each concept is explained in the context of the project so it’s easy to apply.

Components in React

Components are the building blocks of a React application. Each component is a self-contained piece of the UI, typically defined as a JavaScript function or class that returns JSX. In our project, we will have at least two components: the main App component and a TemperatureConverter component (which will handle the conversion form).

The App component will serve as a container or parent that can include layout and title, while the TemperatureConverter will be a reusable component encapsulating the input fields, logic, and output display for the converter. By splitting the UI into components, we make our code more modular and easier to maintain.

React functional components (using plain functions) are straightforward and will be used here along with React Hooks for state management. This approach aligns with React’s design, to create small, reusable components that manage their own state and compose them to build complex interfaces.

State and Event Handling (React Hooks)

In React, state refers to data that can change over time and cause the UI to re-render when it updates. We will use the useState Hook to manage state in our functional components. Specifically, our TemperatureConverter component will have state variables to keep track of the input temperature value, the selected “from” unit, the selected “to” unit, and the result (or any error message).

For example, we’ll have something like const [temp, setTemp] = useState("") for the input temperature, and similarly for units and result. When the user types into the input field or selects a unit from a dropdown, we will update the corresponding state using event handlers (e.g., an onChange event on the input field that calls a function to update temp).

React will re-render the component whenever these state values change, ensuring the UI reflects the latest input. We will also handle the onClick event of the Convert button, when clicked, it will trigger a function that reads the current state (input value and selected units), performs the conversion calculation, and then updates the state for the result.

Temperature Conversion Logic (Formulas)

To convert temperatures between the units, we need to implement the correct conversion formulas. The formulas for converting between Celsius, Fahrenheit, and Kelvin are well-known in science and are as follows:

• Celsius to Kelvin: K = °C + 273.15  
• Kelvin to Celsius: °C = K – 273.15  
• Fahrenheit to Celsius: °C = (°F – 32) × 5/9  
• Celsius to Fahrenheit: °F = °C × 9/5 + 32  
• Fahrenheit to Kelvin: K = (°F – 32) × 5/9 + 273.15  
• Kelvin to Fahrenheit: °F = (K – 273.15) × 9/5 + 32

Using these formulas, we can convert any given temperature to the desired scale. In our app, we will implement these as JavaScript functions or within a single conversion function. For instance, if a user inputs a Fahrenheit value and wants Kelvin, our code will first convert Fahrenheit to Celsius and then Celsius to Kelvin (or directly use the Fahrenheit-to-Kelvin formula).