独立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脚本用于将实际组件呈现为htmldom
<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>