-

,
and
elements as shown in the following example:
import React from ‘react’;
class ProdosApp extends React.Component {
   render() {
   return (
   
   
Welcome, hello there PRODOS.
   
Product List
   
This is the product list

---

   
   );
   }
}
export default ProdosApp;
Let’s navigate to the same web page http://localhost:3000/prodos.html as shown
in the following screenshot:
Figure 8.2: JSX with nested elements
HTML tags in lowercase
In JSX, HTML tags must be in lowercase such as div, span, and h1. HTML tags
in uppercase such as
are invalid.
Using the custom attribute in an HTML tag
You can also use the custom attribute with HTML tags in the JSX file
using data-prefix. Let’s take a look at the following example:
import React from ‘react’;
class ProdosApp extends React.Component {
   render() {
   return (

---

   < div >
   
Welcome, hello there PRODOS.
   
Product List
   
This is the product list
   < /div>
   );
   }
}
export default ProdosApp;
Using Style in the JSX code
You can also use styles with the HTML tags. Let’s take a look at the following code with the styling in the JSX code:
import React from ‘react’;
class ProdosApp extends React.Component {
render() {
var prodosStyle = {
fontSize: 35,
color: ‘#FFA000’
}
   return (