In the previous chapter, we learned what JSX is and how we can create a component in JSX. As with many other frameworks, React also has other prototypes to help us build our web app. Every framework has different ways to interact with DOM elements. React uses a fast, internal synthetic DOM to perform diffs and compute the most efficient DOM mutation for you where your component actually lives.
React components are similar to functions that take props and state (this will be explained in a later section). React components only render the single root node. If we want to render multiple nodes, then they must be wrapped into the single root node.
Before we start working with form components, we should first take a look at props and state.
React components translate your raw data into Rich HTML, the props and state together build with that raw data to keep your UI consistent.
OK, let's identify what exactly it is:
- Props and state are both plain JS objects.
- They are triggered with a
renderupdate. - React manages the component state by calling
setState(data,callback). This method will merge data into this state, and re-renders the component to keep our UI up to date. For example, the state of the drop-down menu (visible or hidden). - React component props (properties) that don't change over time. For example, drop-down menu items. Sometimes components only take some data with this
propsmethod and render it, which makes your component stateless. - Using
propsandstatetogether helps you make an interactive app.
Refer to this live example from Chapter 3, ReactJS-JSX. You will have a better working understanding of state and properties.
In this example, we are managing the state of toggle (show or hide) and the text of toggle buttons as properties.