Creating a Component in REACT JS
Let's create our first component in React. To do that I need to pass data into the component from the main application App.js In this example I'm creating a function named Tea that will be inside a file named Tea.js. I will then place this file inside a folder named Tea.
Open the src folder and create a folder named Tea. Inside folder Tea create a file named Tea.js. Before I create a component I need to import react at the top of Tea.js file, this is important because otherwise it will throw an error that looks like this.
Line 4: 'React' must be in scope when using JSX react/react-in-jsx-scope
There are two ways of creating components in React. We can use a function or a class, in this example I will use an arrow function to simplify things. I will name my function Tea and include an argument named props to pass in properties.
I want to return a sentence that includes properties. The properties are name and color. These properties are in App.js and contain data that will be inserted into this sentence.
Finally don't forget to export your component so that it can be imported in App.js. You can learn more about import and exporting files and methods here.
In App.js I will import Tea.js and create the component. When I return a component it looks like this <Tea></Tea>
This will render in the browser:
My tea name is Jasmine. It is the color green.