【传奇开心果系列】Ant Design Mobile of React实现移动应用(一):从helloworld开始

发布时间:2024年01月07日


系列文章目录

Ant Design Mobile of React 移动应用开发示例系列
第一篇:【传奇开心果系列】Ant Design Mobile of React实现移动应用(一):从helloworld开始
第二篇:【传奇开心果系列】Ant Design Mobile of React实现移动应用(二):天气应用

在这里插入图片描述

一、博主介绍

传奇开心果:计算机科学与技术专业高级教师,魔方网表认证工程师,中学生创意编程国家二等奖作品指导教师,中学生创意编程甘肃省一等奖作品指导教师。

二、目标

从helloworld开始,使用Visual Studio Code集成开发环境IDE和Ant Design Mobile of React UI框架来实现安卓应用界面,实现页面显示文本、页面跳转路由、添加组件和事件。

在这里插入图片描述

三、使用Visual Studio Code和Ant Design Mobile of React来实现安卓应用的helloworld。

  1. 确保你已经安装了Node.js和npm。如果没有安装,你可以从官方网站下载并安装。

  2. 在命令行中创建一个新的React项目,可以使用create-react-app命令来创建一个新的React项目:

npx create-react-app my-ant-design-app
  1. 进入到新创建的项目目录中:
cd my-ant-design-app
  1. 安装Ant Design Mobile组件库:
npm install antd-mobile --save
  1. 打开Visual Studio Code,并打开你的项目文件夹。

  2. 在src目录下创建一个新的组件文件HelloWorld.js,并编写以下代码:

import React from 'react';
import { Button } from 'antd-mobile';

class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <Button type="primary">Ant Design Mobile Button</Button>
      </div>
    );
  }
}

export default HelloWorld;
  1. 在src目录下的App.js中使用HelloWorld组件:
import React from 'react';
import './App.css';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;
  1. 运行项目:

在命令行中执行以下命令来启动项目:

npm start
  1. 打开浏览器并访问http://localhost:3000,你将会看到一个包含"Hello, World!"和一个Ant Design Mobile按钮的页面。

这样你就成功使用Visual Studio Code和Ant Design Mobile of React实现了安卓应用的helloworld。

在这里插入图片描述

四、实现页面跳转路由

要在React应用中实现页面跳转,你可以使用React Router来管理路由。下面是在上面的示例中添加页面跳转的步骤:

  1. 安装React Router:

在命令行中执行以下命令来安装React Router:

npm install react-router-dom
  1. 在src目录下创建一个新的组件文件SecondPage.js,并编写以下代码:
import React from 'react';

class SecondPage extends React.Component {
  render() {
    return (
      <div>
        <h1>This is the Second Page</h1>
      </div>
    );
  }
}

export default SecondPage;
  1. 在App.js中使用React Router来实现页面跳转:
import React from 'react';
import './App.css';
import HelloWorld from './HelloWorld';
import SecondPage from './SecondPage';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/second">Second Page</Link>
          </li>
        </ul>

        <Route exact path="/" component={HelloWorld} />
        <Route path="/second" component={SecondPage} />
      </div>
    </Router>
  );
}

export default App;
  1. 运行项目:

在命令行中执行以下命令来启动项目:

npm start
  1. 打开浏览器并访问http://localhost:3000,你将会看到一个包含"Hello, World!"、一个Ant Design Mobile按钮和两个链接(Home和Second Page)的页面。点击链接可以实现页面之间的跳转。

这样你就成功在React应用中实现了页面跳转。

在这里插入图片描述

五、每个页面再添加几个组件和事件处理

当你在React应用的不同页面中添加更多组件和事件处理时,你可以按照以下步骤进行:

  1. 在每个页面的组件文件中添加更多组件和事件处理逻辑。例如,在HelloWorld.js中添加一个表单组件和事件处理函数:
import React from 'react';
import { Button, InputItem, List } from 'antd-mobile';

class HelloWorld extends React.Component {
  state = {
    inputValue: ''
  };

  handleInputChange = (value) => {
    this.setState({ inputValue: value });
  };

  handleSubmit = () => {
    alert('Input value: ' + this.state.inputValue);
  };

  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <List renderHeader={() => 'Input Item'}>
          <InputItem
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          >
            Input
          </InputItem>
        </List>
        <Button type="primary" onClick={this.handleSubmit}>
          Submit
        </Button>
      </div>
    );
  }
}

export default HelloWorld;
  1. 在SecondPage.js中添加另一个按钮和事件处理函数:
import React from 'react';
import { Button } from 'antd-mobile';

class SecondPage extends React.Component {
  handleButtonClick = () => {
    alert('Button Clicked');
  };

  render() {
    return (
      <div>
        <h1>This is the Second Page</h1>
        <Button type="primary" onClick={this.handleButtonClick}>
          Click me
        </Button>
      </div>
    );
  }
}

export default SecondPage;
  1. 运行项目:

在命令行中执行以下命令来启动项目:

npm start
  1. 打开浏览器并访问http://localhost:3000,你将会看到在每个页面中添加了更多的组件和事件处理逻辑。在HelloWorld页面中,你可以输入文本并点击按钮来触发事件;在SecondPage页面中,你可以点击按钮来触发事件。

这样你就成功在每个页面中添加了更多的组件和事件处理逻辑。
在这里插入图片描述

六、知识点归纳总结

在上述步骤中,涉及到了以下知识点:

  1. React组件:在React中,页面上的所有内容都是通过组件来构建的。每个组件都有自己的状态和行为。在示例中,我们创建了两个组件HelloWorld和SecondPage,并在这些组件中添加了不同的UI元素和事件处理逻辑。

  2. Ant Design Mobile:Ant Design Mobile是一个基于React的移动端UI组件库,它提供了丰富的移动端UI组件。在示例中,我们使用了Ant Design Mobile中的按钮(Button)、输入框(InputItem)和列表(List)组件。

  3. 事件处理:在React中,可以通过onClick等事件属性来绑定事件处理函数。在示例中,我们在按钮和输入框组件上绑定了事件处理函数,以便在用户与这些组件交互时执行相应的操作。

  4. React Router:React Router是一个用于管理路由的库,它可以帮助我们在React应用中实现页面之间的跳转。在示例中,我们使用了React Router中的BrowserRouter、Route和Link组件来实现页面跳转。

通过这些知识点,我们成功在React应用中实现了页面跳转,并在每个页面中添加了更多的组件和事件处理逻辑。

文章来源:https://blog.csdn.net/jackchuanqi/article/details/135381448
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。