首先让我们开始编写一个简单的HTML代码，然后看看如何使用React
基本的React示例 -创建一个简单的div，如下所示-
<div class="player"> <h1>Steve</h1> <p>My hobby: Cricket</p> </div>
添加一些样式元素
.player{
border:1px solid #eee;
width:200px;
box-shadow:0 2px 2px #ccc;
padding: 22px;
display:inline-block;
margin:10px;
}就像网络应用中的普通html数据一样。现在，我们可能有多个相同的玩家，然后我们必须复制相同的div，如下所示
<div class="player"> <h1>David</h1> <p>My hobby: Cricket</p> </div>
这些div的结构相同，但内部数据不同。在这里，React非常有用，它可以为我们创建可重用的组件，从而避免重复的html结构并在组件上进行逻辑操作。
对于基本用法，我们将使用独立的React库。
我们将不得不使用两个主要的库脚本-
注 –部署时，将“ development.js”替换为“ production.min.js”
下面的脚本用于创建组件并对其执行操作。
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
react-dom脚本用于将实际组件呈现为html dom
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
我们还将使用独立的babel预处理程序来编译最新的JavaScript
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
React使用一种称为jsx的特殊JavaScript语法，看起来与html本身非常相似。因此，让我们创建一个React函数组件。
功能组件的名称以大写字母开头，以使其正常工作。
function Player(){
return(
<div class="player">
<h1>Steve</h1>
<p>My hobby: Cricket</p>
</div>
);
}因此，在实际的html文件中，我们可以将第一个div播放器替换为div以下-
<div id="first"></div>
现在，我们必须使用ReactDOM将组件呈现为html，如下所示-
渲染方法需要将React组件作为参数以及需要在html上渲染的位置。
ReactDOM.render(<Player/>,document.querySelector('#first'));函数组件像html标记一样用作第一个参数。render方法的第二个参数可以是html元素选择器。
如果我们将所有这些部分放在一起，我们可以在下面的html文件中进行测试-
<!DOCTYPE html>
<html>
<head>
<title>React Example</title>
<style>
.player{
border:1px solid #eee;
width:200px;
box-shadow:0 2px 2px #ccc;
padding: 22px;
display:inline-block;
margin:10px;
}
</style>
</head>
<body>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="first"></div>
<div class="player">
<h1>David</h1>
<p>My hobby: Cricket</p>
</div>
<script type="text/babel">
function Player(){
return(
<div className="player">
<h1>Steve</h1>
<p>My hobby: Cricket</p>
</div>
);
}
ReactDOM.render(<Player/>,document.querySelector('#first'));
</script>
</body>
</html>它并不是真正可重用的，因为我们使用的第二个div仍然不是来自React组件。为了使其可重用，我们必须使用带有以下称为props的参数的动态函数-
function Player(props){
<div className="player">
<h1>{props.name}</h1>
<p>My hobby: {props.hobby}</p>
</div>
}参数props包含玩家的属性。现在，我们可以为第二个玩家创建较小的替换div，例如-
<div id="second"></div>
我们将在render方法中传递玩家属性，如下所示：
ReactDOM.render(
<Player name="Steve" hobbey="Cricket"/>,
document.querySelector('#first')
);
ReactDOM.render(
<Player name="David" hobbey="Cricket"/>,
document.querySelector('#second')
);现在，您已经观察到可重用的React组件的潜力。
无需将两个ReactDOM.render分开，我们可以将它们组合在一起
//we can have only one div in html
<div id="app"></div>
//在react脚本中，我们可以拥有：
var app= (
<div>
<Player name="Steve" hobbey="Cricket"/>
<Player name="David" hobbey="Cricket"/>
</div>
);
//现在，我们将使用ReactDOM映射我们的应用程序组件：
ReactDOM.render(app,document.querySelector('#app'));<!DOCTYPE html>
<html>
<head>
<title>React Example</title>
<style>
.player{
border:1px solid #eee;
width:200px;
box-shadow:0 2px 2px #ccc;
padding: 22px;
display:inline-block;
margin:10px;
}
</style>
</head>
<body>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="app"></div>
<script type="text/babel">
function Player(props){
//它返回可重用的代码，即
//我们要在实际的html页面上呈现
return(
//我们正在添加第一个玩家div信息
<div className="player">
<h1>{props.name}</h1>
<p>My hobby: {props.hobby}</p>
</div>
);
}
var app= (
<div>
<Player name="Steve" hobbey="Cricket"/>
<Player name="David" hobbey="Cricket"/>
</div>
);
ReactDOM.render(app,document.querySelector('#app'));
</script>
</body>
</html>