独立React.js基本示例
首先让我们开始编写一个简单的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'));
基本反应示例-最终的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="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>
-
问题内容： 我试图从另一个python脚本访问我的Django（v1.10）应用程序数据库，但遇到了一些麻烦。 这是我的文件和文件夹结构： 根据Django的文档，我看起来像这样： 但它会生成运行时错误： 我应该注意，我的INSTALLED_APPS列表包含了它的最后一个元素。 相反，如果我尝试通过这样的配置： 我得到： 如果我进行编辑和添加，LOGGING_CONFIG=None则会遇到另一个有
-
目标 在本章中， 我们将看到BRIEF算法的基础知识 理论 我们知道SIFT使用128维矢量作为描述符。由于它使用浮点数，因此基本上需要512个字节。同样，SURF最少也需要256个字节（用于64像素）。为数千个功能部件创建这样的向量会占用大量内存，这对于资源受限的应用程序尤其是嵌入式系统而言是不可行的。内存越大，匹配所需的时间越长。 但是实际匹配可能不需要所有这些尺寸。我们可以使用PCA，LDA
-
我总是问这个问题，但我找不到确切的答案： Docker平台独立吗？ 我的意思是，当我在Windows中生成映像时，我能在Linux或macOS上运行该映像吗？或者当我在Ubuntu上生成映像时，我可以在Windows上运行该映像吗？ 如果是，怎么做？如果不是，那么说docker映像可以在任何地方运行而不用担心任何依赖又有什么意义呢？ 请帮我回答这个问题
-
创建验证 任何时候，都可以直接使用think\Validate类而不需要定义验证器类进行独立的验证操作，例如： $validate = Validate::make([ 'name' => 'require|max:25', 'email' => 'email' ]); $data = [ 'name' => 'thinkphp', 'email' => 't
-
我有一张散点图，x轴是纬度，y轴是经度。每个点代表一家餐厅。标记大小应代表该餐厅的总收入。 在一些地区这些数值相差很大，大概是100X倍，所以这些家伙（有钱的）完全“躲”住附近的小餐馆…… 所以我想到用对数刻度来刻度记号...代码如下：
-
工人出现在图片上。为了运行我的代码，我使用了以下命令：