React 教程示例

React 是一个用于构建用户界面的 JavaScript 库。本教程将为您提供一个React的基本概念和使用示例。

快速开始

安装Node.js和npm：React 需要Node.js环境，您可以从Node.js官网下载并安装。
创建一个新的React应用：使用create-react-app脚手架工具，它可以帮助您快速搭建React项目。

npx create-react-app my-app
cd my-app

运行应用：

npm start

您的应用将运行在http://localhost:3000上。

组件

React 的核心是组件。组件是React应用的基本构建块，可以用来构建任何用户界面。

创建组件

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

在上面的例子中，Welcome是一个函数组件，它接受一个名为name的属性，并将其显示在标题中。

使用组件

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';

ReactDOM.render(
  <Welcome name="Alice" />,
  document.getElementById('root')
);

在上面的例子中，我们使用ReactDOM.render将Welcome组件渲染到页面的根元素中。

图片示例

React 也支持在组件中使用图片。

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';

ReactDOM.render(
  <div>
    <Welcome name="Alice" />
    <center><img src="https://cloud-image.ullrai.com/q/Alice_Photograph/" alt="Alice Photograph"/></center>
  </div>,
  document.getElementById('root')
);

在上面的例子中，我们在Welcome组件下方插入了一张名为"Alice Photograph"的图片。

更多关于React的教程和示例，请访问React 官方文档。

抱歉，您的请求不符合要求