Простой компонент
<!DOCTYPE html> <html> <head>
<code>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</code>
<code>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
.root{
display: flex;
}
.car{
width:100px;
padding: 20px;
margin: 10px;
border: solid 1px #8a8a8a;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
</code>
</head> <body> <div id="root">
<code>
<div class="car">
<h3>Mazda 4</h3>
<p>Year: <strong>2010</strong></p>
</div>
</code>
</div> <script type="text/babel">
<code>
function Car(props){
return (
<div className="car">
<h3>{props.name}</h3>
<p>Year: <strong>{props.year}</strong></p>
</div>
)
}
ReactDOM.render(
<Car name="Ford" year="2010" />,
document.getElementById('root')
);
</code>
</script> </body> </html>
Множественная подстановка в компонент react
<!DOCTYPE html> <html> <head>
<code>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</code>
<code>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
.wrap{
display: flex;
}
.car{
width:100px;
padding: 20px;
margin: 10px;
border: solid 1px #8a8a8a;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
</code>
</head> <body> <div id="root">
<code>
<div class="car">
<h3>Mazda 4</h3>
<p>Year: <strong>2010</strong></p>
</div>
</code>
</div> <script type="text/babel">
<code>
function Car(props){
return (
<div className="car">
<h3>{props.name}</h3>
<p>Year: <strong>{props.year}</strong></p>
<small>this is car</small>
</div>
)
}
const App = (
<div className="wrap">
<Car name="Ford" year="2010" />
<Car name="Mazda 3" year="2012" />
<Car name="Audi 8" year="2009" />
</div>
);
ReactDOM.render(
App,
document.getElementById('root')
);
</code>
</script> </body> </html>