数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究独立 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;
}这就像 Web 应用中的普通 html 数据一样。现在，我们可能有许多相同的播放器，然后我们必须像下面这样复制相同的 div
<div class="player"> <h1>David</h1> <p>My hobby: Cricket</p> </div>
这些 div 在结构上相同，但内部包含不同的数据。在这里，React 非常有用，它可以为我们创建可重用的组件，以避免重复的 html 结构并对组件执行逻辑操作。
让我们添加 React
对于基本用法，我们将使用独立的 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 使用 JavaScript 的一种特殊语法，称为 jsx，它看起来非常类似于 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 标签一样。渲染方法的第二个参数可以是 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>
我们将像下面这样在渲染方法中传递播放器属性：
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>
//and in react script we can have:
var app= (
<div>
<Player name="Steve" hobbey="Cricket"/>
<Player name="David" hobbey="Cricket"/>
</div>
);
//Now, we will map our app component using ReactDOM:
ReactDOM.render(app,document.querySelector('#app'));基本 React 示例 - 最终 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){
//it returns the reusable code that
//we want to render on actual html page
return(
//we are adding the first player div info
<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>
2K+ 阅读量
