Get started with ReactJS (P1)

Tram Ho

Introduction

React (Or ReactJS, React.js) is an open source Javascript library for building reusable interface components. It was created by Jordan Walke, a software engineer at Facebook.

When learning about ReactJs, I found that there are 3 basic concepts that are often mentioned as Component, Props, State.

1. Component

A block or small parts that can reuse a component in many places with different states or properties and a component can contain other components.

Each component has its own state, can be changed and React will perform component updates based on state changes.

To create Component, we will have many ways as follows:

  • Use let, const in JavaScript ES6 or var in lower JavaScript versions.
  • Use Function.
  • Using Class in JavaScript ES6.

For example:

Here when using let or const, we need to use Arrow Function or Anonymous Function to assign to variables or constants. While Function has a similar way of defining variables and constants, Class must inherit from Class Component in ReactJS to be able to run.

2. Props

What does “props” mean?

Props actually stands for Properties

See the following example:

The <Welcome name="Sara" /> creates a name attribute with the value “Sara”. Looks like a function call. Indeed, props are passed to the component in the same way that an argument is passed to a function. In fact, we could even write more succinctly:

A component may also have a default props, so if the component does not pass any props, it will still be set. We can create the default name attribute by adding defaultProps to the Welcome class:

If Welcome is called without passing any name attributes, it will simply render "Hello world"

Therefore, props may come from the parent, or may be set by the component itself.

Props should not be changed

You can change props using setProps or replaceProps but it is not recommended.

Since we passed props on the component, they haven’t changed. This makes you think of using props for any component that always displays the same output for the same input. This makes them easy to control.

3. State

Like props, sate also holds information about the component. However, the type of information and how to handle it varies. State works differently than Props. The state is a component of the component, while props are passed in from the outside into the component. It should be noted that we should not update the state directly using this.state but always use setState to update. Update the state of the objects. Use setState to re-renders one component and all its children. This is great, because you don’t have to worry about writing event handlers like any other language.

When to use the State

Whenever data changes in a component, the State can be used.

Use state in component

First, let’s take a look at the following code:

In the above code, you can see a Form class with a state input. It displays a text input that accepts user input. Every time the user enters text, onChange is activated, calling setState one after another on the input.

SetState enables re-rendering of the component, and the user interface (UI) is now updated with the latest information imported from the user. This simple example illustrates how the state in a component can be updated and how to use it.

Conclude

Hope this article will help you understand more about props and state. Thank you for watching. In the article there is a reference here

Share the news now

Source : Viblo