Components are building block of your UI - similar to directives in angular, or modules and widgets in other frameworks. Components in React are more or less self sufficient in that they constitute the presentation (HTML) as well as the behavior (eg. event handlers). They are also composable - meaning we can easily use one component within other component. So how do we create a Component? There are couple common ways how you can create a React component.
1. React.Component
2. function
Another common way to create a React component is to create a simple function that takes in a parameter (we call props
) and returns the exact same thing as above - what the DOM should look like if this component is rendered on the browser.
- return (
- //return should tell React what the DOM should look like
- );
- }
The above two approaches are identical except there are certain things that can do that the function
cannot do but we will park that for now and come back to it later in this tutorial.