Introduction to ReactJS

If you are just starting out on your journey to become a programmer, one of the languages you will likely come across is JavaScript. And one popular JavaScript library that you might encounter is ReactJS. To draw a simple analogy, if JavaScript is the bricks and mortar of your house, ReactJS is the blueprint that helps you design and structure it.

ReactJS is commonly used for building user interfaces, especially for single-page applications. This means that it's great for creating websites where the user can interact with the webpage without having to refresh it. This can help to make a website feel more like a native application on your computer or phone.

To create these interfaces, React uses components. You can think of a component like a building block. Each block can be designed and built individually, but when they all come together, they form the complete website. This is great because it means each part of the website can be worked on independently of the others.

But one challenge that comes up when creating these components is handling views. So, what are views? Simply put, views are what the user sees on the screen. They are the visual representation of a component. Handling these views is crucial to creating a functional and visually pleasing app. And that's what we will be focusing on in this blog.

Understanding Views in ReactJS

In React, views are determined by the state and properties (or 'props') of a component. Let's break down these terms:

State: This is a data structure that starts with a default value when a component mounts (i.e., when it is created and inserted into the DOM). It may be changed over time (mostly due to user events).

Props: Short for properties, these are variables that are passed from a parent component to a child component. They help you to control what content is displayed in the component and how it behaves.

The state and props of a component in React are like ingredients in a recipe. Depending on what ingredients (data) you have, the final dish (the view) will look and taste different.

How to Handle Views

To illustrate how to handle views in React, let's use a simple example. Imagine we're creating a weather app. This app has a component that shows the current temperature. We'll call this component TemperatureDisplay.

Here's what the code for TemperatureDisplay might look like:

class TemperatureDisplay extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      temperature: 20 // default temperature
    };
  }

  render() {
    return (
      <div>
        The current temperature is: {this.state.temperature} degrees
      </div>
    );
  }
}

In this example, temperature is a state of TemperatureDisplay. It starts as 20 degrees. The view of this component is a message that includes the current temperature.

Now, let's say we want to update the temperature. React provides a method called setState for this purpose.

this.setState({ temperature: 25 });

When setState is called, React updates the state, and then re-renders the component (i.e., updates the view) to reflect these changes.

Adding Interactivity

Often, you'll want to change the state in response to user actions, like clicking a button. Let's add a button to TemperatureDisplay that increases the temperature by 1 degree each time it's clicked.

class TemperatureDisplay extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      temperature: 20 // default temperature
    };

    this.increaseTemperature = this.increaseTemperature.bind(this);
  }

  increaseTemperature() {
    this.setState(prevState => {
      return {temperature: prevState.temperature + 1};
    });
  }

  render() {
    return (
      <div>
        The current temperature is: {this.state.temperature} degrees
        <button onClick={this.increaseTemperature}>Increase Temperature</button>
      </div>
    );
  }
}

In this updated version, we've added a new method increaseTemperature, which increases the state temperature by 1. We've also added a button to the render method. When this button is clicked (onClick), it calls the increaseTemperature method. This causes the state to update and the component to re-render, showing the new temperature.

Conclusion

ReactJS provides a powerful and efficient way to handle views in your app. By understanding how state and props influence what the user sees, you can create dynamic and interactive components. Remember, practice is key when learning new concepts in programming. So, try creating your own components and playing around with their state and props. The more you experiment, the more comfortable you'll become with handling views in React.

Happy coding!