React 入门教程

2025 年 1 月 7 日 | 阅读 9 分钟

React 是一个用于使用 React 创建用户界面的 JavaScript 包。访问 React 文档主页或 javatpoint 教程以了解有关 React 的更多信息。

您可以使用 HTML 轻松创建一个 React 程序来获得操作。它用于理解 React 技术。但是，必须在生产环境中设置 npm 和 Node.js 才能使用 React。

使用 React
学习 React
保持最新信息

使用 React

React 是用渐进式采用的思想创建的。您可以在任何操作的任何位置使用 react。您想了解更多关于 React 的信息，为基本的 HTML 页面添加一些交互性，或者开始一个复杂的 React 驱动的程序。

以下是使用 React 与 HTML 和 JS 页面的步骤。JavaScript 用于 html 页面的 script 标签中。

创建 html 页面及其元素。
使用 React 开发的在线链接
使用 script 标签和 react 开发程序
使用 react 的组件、类和函数
显示输出和操作验证

在线游乐场

如果您想学习，请使用在线编码游乐场来试验 React。CodePen、CodeSandbox 或 Stackblitz 是尝试基本程序或模板的 IDE。
可以从本地文件系统下载、编辑和打开此 HTML 文件。您浏览器中的此文件系统用作您的文本编辑器。
我们可以使用它来开发任何 react.js 应用程序的运行时代码。

使用 React 改进网站

React 很容易添加到 HTML 页面。您可以逐步增加突出性或限制它。它有助于网站上少量动态小部件。

创建新的 React 应用程序

一个带有 script 元素的基本 HTML 页面可能是开始一个 React 项目的最佳选择。设置只需一分钟即可开发任何基本编码页面！
随着应用程序的扩展，您可以切换到更集成的结构。我们为更复杂的应用程序推荐了几个 JavaScript 工具链。
每条规则都允许您充分利用强大的 React 生态系统。react 页面可以在网页上几乎无需配置即可运行。

学习 React

React 吸引了具有各种背景和学习偏好的人。无论对于理论方法还是实践方法，您都可以找到这个有用的领域。

如何学习 Javatpoint React 教程
通过 react 文档逐步学习。

初始案例
React 主页上提供了带有实时编辑器的 React 示例。
如果您不熟悉 React，请观察它如何影响结果，然后更改代码。
React 适合初学者
查看 javatpoint.com 或 https://legacy.reactjs.org/tutorial/tutorial.html 官方网站上的 React 概述。这是一种介绍 Reacts 关键思想的平易近人的方式。
React 适合设计师
如果您有设计经验，这些材料是开始使用 React.js 的好地方。
JavaScript 资源
React 手册具有 JavaScript 编程的基本专业知识。即使您不是 JavaScript 和 React 的专家，同时学习它也会变得更具挑战性。
高级思想
熟悉基本思想并尝试了 React 之后，您可能会对更复杂的主题感兴趣。在本部分中，您将了解强大但不太常用的 React 功能，如上下文和 refs。
参考 API
当您想了解特定 React API 的详细信息时，可以使用 API 部分或代码。例如，您可以找到有关 setState() 的操作和各种生命周期方法（例如 React.Component API 参考）的用途的信息。

继续学习

React 团队的更新仅在其博客上提供。
如果重要，将在此处提供发行说明和弃用通知。
尽管如果您阅读该博客，您不会错过任何重要内容，但您也可以在社交网络上关注 @reactjs 帐户。
CHANGELOG.md 文件位于 React 存储库中。它在 Releases 网站上运行，以提供 React 每次发布的完整更改日志。

React 入门的先决条件

以下几点是 React 开发所必需的。

用户或编码器熟悉 HTML 和 CSS。
需要 JavaScript 和编程基础知识。
DOM 知识是最基本的要求。
了解 ES6 的特性和语法。
npm 和 node.js 的全局安装。

示例

以下示例有助于在 html 和其他语言中开始、学习和练习 React。

示例 1

给定的示例显示了带有简单消息的基本示例。我们可以将在线文件链接与 html 和 script 页面一起使用。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
#demo1{
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<b> React Getting Started </b>
<div id = "mycontainer"></div>
</div>
<script type="text/babel">
// Use the function for the message to display on the div tag
function Hello() {
return <h1>Hello Student for the react getting started!</h1>;
}
// Create root for the react and show the message of the function
const container_name = document.getElementById('mycontainer');
const root = ReactDOM.createRoot(container_name);
// Get output and place on the container
root.render(<Hello />)
</script>
</body>
</html>

输出

输出在网页上显示一条基本消息。

示例 2

给定的示例显示了带有所需消息的基本示例。我们可以将在线文件链接与 html 和 script 页面一起使用。react 使用名称和 ID 标签来获取消息。我们可以对 ID 和名称标签使用静态值。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src = "https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<style>
#demo1{
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<b> React Getting Started with id and name </b>
<div id = "mydiv"></div>
</div>
<script type = "text/babel">
//Use class for the message
class HelloMessage extends React.Component {
// function call name and id for message
render() {
return <div>Hello Id: {this.props.id}  name:{this.props.name}</div>;
}
}
//create react root to show the message
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
// Get output and place on the container
root.render(<HelloMessage id="Javatpoint" name=" website" />);
</script>
</body>
</html>

输出

输出在网页上显示一条基本消息。

示例 3

给定的示例使用 html 标签及其值。我们可以使用表格元素、标题值和使用 react 的信息。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
#demo1{
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<b> React Getting Started with Table </b>
<div id = "mycontainer"></div>
</div>
<script type="text/babel">
// Use the function for the message to display on the div tag
function Hello() {
return  <table>
<thead>
<tr>
<th>Name</th>
<th>Job</th>
<th>Payment</th>
</tr>
</thead>
<tbody>
<tr>
<td>Charlie</td>
<td>Designer</td>
<td>10,000</td>
</tr>
<tr>
<td>Mruna</td>
<td>Developer</td>
<td>15,000</td>
</tr>
<tr>
<td>Deepa</td>
<td>Analyst</td>
<td>18,000</td>
</tr>
<tr>
<td>Rima</td>
<td>Tester</td>
<td>12,000</td>
</tr>
</tbody>
</table>;
}
// Create root for the react and show the message of the function
const container_name = document.getElementById('mycontainer');
const root = ReactDOM.createRoot(container_name);
// Get output and place on the container
root.render(<Hello />)
</script>
</body>
</html>

输出

输出在网页上显示一个表格及其信息。

一个有状态元素

组件可以存储内部状态数据（通过 this.state 访问）并接受输入数据（通过 this.props 访问）。每次组件的状态数据更改时，重新调用 render() 将更新呈现的标记。

示例

该示例显示了带有函数、类和其他元素的静态组件。我们可以看到第二单元的时间。单击按钮后，我们可以重新启动计时器。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src = "https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<style>
#demo1{
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<b> React Getting Started with Timer </b>
<div id = "mydiv"></div>
</div>
<script type = "text/babel">
//create react root to show the message
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
//Use class with the static component
class Timing extends React.Component {
constructor(props) {
super(props);
//Initial the value with the 0 second
this.state = { seconds: 0 };
}
// Increment with each second and shows on web page
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
// Set interval for the timer function
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
// Use the function and show seconds as a timer
render() {
return (
<div>
Seconds: {this.state.seconds}
</div>
);
}
}
// Get timer output and place on the container
root.render(<Timing />);
</script>
</body>
</html>

输出

输出在网页上显示了基本的计时器。

基本应用

我们可以使用属性和状态构建一个简单的待办事项应用程序。在此示例中，状态跟踪用户输入的文本和当前的项目集。事件处理程序将使用事件分配进行收集和应用。

示例

该示例显示了带有函数、类和元素的基本应用程序。我们可以操作待办事项列表并在列表中显示项目。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src = "https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body style="background:aqua;">
<b> React Getting Started with TO DO List </b>
<div id = "mydiv"></div>
<script type = "text/babel">
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
//Show the web page with the form and information
render() {
return (
<div>
<h3>TO-DO List</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add {this.state.items.length + 1}
</button>
</form>
</div>
);
}

handleChange(e) {
this.setState({ text: e.target.value });
}

handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
// Shows the new item with the button onclick button
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
}
//Use class with the component
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
// Get the list's item as an output for the container
root.render(<TodoApp />);
</script>
</body>
</html>

输出

输出在网页上显示了待办事项列表的项目。

带有外部插件的函数

您可以使用 React 与不同的库和框架进行交互。此示例使用惊人的外部 Markdown 库实时转换 textarea> 的值。

示例

该示例显示了带有外部插件的基本应用程序。我们可以使用函数、类和元素来操作表单值。我们可以使用 react 和 jxs 处理用户交互数据。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src = "https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body style="background:aqua;">
<b> React Getting Started with The External Component </b>
<div id = "mydiv"></div>
<script type = "text/babel">
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
//Show the web page with the form and information
render() {
return (
<div>
<h3>User Information </h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
</label>
<textarea  id="new-todo"
onChange={this.handleChange}
value={this.state.text}></textarea>
<p>
</p>
<button>
Add
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
// Shows the new item with the button onclick button
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
}
//Use class with the component
class TodoList extends React.Component {
render() {
return (
<b>
{this.props.items.map(item => (
<p key={item.id}>{item.text}</p>
))}
</b>
);
}
}
// Get the list's item as an output for the container
root.render(<TodoApp />);
</script>
</body>
</html>

输出

输出在网页上显示了表单的信息。

结论

带有 html 页面的 react 有助于操作和处理数据和网页。它的功能简单、易用、快速。

下一个主题Tailwind-css-in-react

React 入门教程

使用 React

学习 React

继续学习

React 入门的先决条件

示例

一个有状态元素

基本应用

带有外部插件的函数

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 入门教程

使用 React

学习 React

继续学习

React 入门的先决条件

示例

一个有状态元素

基本应用

带有外部插件的函数

结论

相关帖子

React.js 中的 UseState Hook

React 中的轮播图

ReactJS PropTypes

ReactJS 中的 Const

Vue vs React

React 中的条件 CSS

React 中的 Css

React 开发人员简历

React 下拉菜单

React-icons

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器