Create a React application that will display a welcome message writing functional, class, and expression components:
- Create a new file named basics.js.
- Import the React and ReactDOM libraries:
import * as React from 'react'
import * as ReactDOM from 'react-dom'
- Define a new functional component that will render a span React element with color set to red in its style attributes:
const RedText = ({ text }) => (
<span style={{ color: 'red' }}>
{text}
</span>
)
- Define another functional component that will render an h1 React element and the RedText functional component as part of its children:
const Welcome = ({ to }) => (
<h1>Hello, <RedText text={to}/></h1>
)
- Define an expression that will contain a reference to a React element:
const TodoList = (
<ul>
<li>Lunch at 14:00 with Jenny</li>
<li>Shower</li>
</ul>
)
- Define a class component named Footer that will display the current date:
class Footer extends React.Component {
render() {
return (
<footer>
{new Date().toDateString()}
</footer>
)
}
}
- Render the application to the DOM:
ReactDOM.render(
<div>
<Welcome to="John" />
{TodoList}
<Footer />
</div>,
document.querySelector('[role="main"]'),
)
- Save the file.
Then, create an index.html file where you will render the React application:
- Create a new file named index.html
- Add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
</head>
<body>
<div role="main"></div>
<script src="./basics.js"></script>
</body>
</html>
- Save the file