目录

标签: React

如何从零创建一个React + Antd + React路由项目

开始之前

  1. 本文是以基于React + TypeScript 环境作为例子。
  2. 本文默认使用 yarn 作为包管理器,npm 使用差异无几,可自行查阅相关资料进行转换或安装 Yarn 后尝试本文操作流程来创建您的 React 项目。

一、创建 React 项目 (TypeScript)

1. 创建 React 项目

yarn create react-app antd-demo-ts --template typescript

antd-demo-ts 表示你的项目名称,可以自己取一个。

$ cd antd-demo-ts
$ yarn start

创建完成后,就可以 cd 到项目目录中,npm start 运行,即可弹出项目的初始默认站点,说明 OK 了。

二、集成 Antd UI框架

参考资料:https://ant-design.gitee.io/docs/react/use-in-typescript-cn

1. 引入 Antd

yarn add antd

修改 src/App.tsx,引入 antd 的按钮组件。

import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改 src/App.css,在文件顶部引入 antd 的样式。

@import '~antd/dist/antd.css';

重新启动 yarn start,现在你应该能看到页面上已经有了 antd 的蓝色按钮组件,接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档

antd 使用 TypeScript 书写并提供了完整的定义,你可以享受组件属性输入建议和定义检查的功能。

三、创建 React-Router 作为项目路由

如果我们的项目并不是一个单页应用,那么一定需要用到 React-Router 作为我们的项目路由来进行 URL 跳转。

参考资料:React Router 中文文档 ,本文则使用 react-router-dom 作为路由主键(它是基于 react-router 来的,多了一些页面上的dom操作而已,参考:区别

1. 引入路由组件

yarn add @types/react-router-dom
yarn add react-router-dom

附加说明:@types/react-router-dom只是 TypeScript 的声明文件而已,还是要安装 react-router-dom 核心代码。

2. 修改 App.tsx 文件代码如下:

import React from 'react';
import { BrowserRouter as Router, Link, Route, RouteComponentProps } from 'react-router-dom';
import { Button } from 'antd';
import './App.css';

function Home(props: any) {
  let toHome = () => {
    props.history.push('/custom');
  };

  return (<div>
    测试首页

    {/* 使用js代码来跳转 */}
    <Button onClick={toHome} type="primary">跳转到自定义页面</Button>
  </div>)
}

function News(props: any) {
  console.log('news ,props', props)
  return (<div>新闻页</div>)
}

function About() {
  return (<div>关于页</div>)
}

function Custom() {
  return (<div>自定义页面</div>)
}


export interface AppProps extends RouteComponentProps {
  history: any;
}

class App extends React.Component {

  toCusomtPage = () => {
    console.log(this.props)
  }

  render() {
    return (
      <div className="App">

        {/* 使用 Link 组件来跳转 */}
        <Router>
          <div>
            <Link to="/"> 首页 </Link>
            <Link to="/news"> 新闻页 </Link>
            <Link to="/about"> 介绍页 </Link>
          </div>
          <Route path="/" exact component={Home} />
          <Route path="/news" component={News} />
          <Route path="/about" component={About} />
          <Route path="/custom" component={Custom} />
        </Router>
      </div>
    );
  }

}

export default App;

即可实现路由、路由控件跳转、js代码跳转

四、结束

至此,已经可以自己在代码中配置各个页面的路由途径。

Ant Design 组件 中选择符合自己需求的组件放上去即可开始自己的业务编写。

关于 React 与 TypeScript 的入门参考资料推荐:利用 typescript 写 react-router 5

React 父组件调用子组件的方法(非props方式)

我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的。

显而易见,这个执行是需要去主动触发的。

那有没有一种方式,方法在子组件定义好,可以直接在父组件去调用呢?

答案是必然的。

上代码^ – ^

import React, {Component} from "react";
import { Button } from "antd";

//父组件
export default class Parent extends Component {
    render() {
        return(
            <div>
          <p>这是父组件</p>
                <Child triggerRef={this.bindRef} />
                <Button type="primary" onClick={this.btnClick} >click</Button>
            </div>
        )
    }

    bindRef = ref => { this.child = ref }

    btnClick = () => {
        this.child.getValuefromChild()
    }

}
//子组件
class Child extends Component {
    componentDidMount(){
        this.props.triggerRef(this)
    }
  //这是子组件的方法
    getValuefromChild = () => console.log("this is child value.")

    render() {
        return <div>这是子组件</div>
    }
}

本文转自:一江西流

创建 Electron + React 项目流程

1. 全局安装 Create-React-App 脚手架

npm isntall -g create-react-app

输入:create-react-app -V (注意 V 是大写)可查看当前脚手架版本号

2. 创建 React 项目

create-react-app project-name

project-name 表示你的项目名称,可以自己取一个。

创建完成后,就可以 cd 到项目目录中,npm start 运行,即可弹出项目的初始默认站点,说明 OK 了。

3. 引入 Electron 包

 npm install electron --save-dev

过程中会下载一个包,如果很慢或无法下载的话,可以用以下命令代替:

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron --save-dev

4. 添加 main.js 文件与 package.json 配置

main.js 直接从官网拷贝:进入官网文档 , 并进行修改

    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,   // 这行代码必须加进去,不然渲染进程无法访问 nodejs,electron 的资源
    }

然后在 package.json 文件中加入配置

  1. "main":"./src/electron/main.js" 其中的路径为你的 main.js 路径配置。
  2. "homepage": "./" 表示请求资源用相对路径,否则打包之后请求不到js,css资源

继续:引入 electron-is-dev 包

npm install electron-is-dev --save

这个包用于判断当前运行环境是开发环境还是生产环境,在 main.js 中,我们这里加一个判断:

const isDev = require('electron-is-dev')
const path = require('path')


if (isDev) {
  win.loadURL('http://localhost:3000')
} else {
  win.loadFile(path.join(__dirname, '../build/index.html'))
}

路劲为 main.js 相对 build 文件夹(React打出来的包文件夹)的路径。

可选配置(没有也没关系)

修改package.json,添加一个electron-dev脚本命令:
{
  ...
  "scripts": {
    ...
    "dev": "concurrently \"BROWSER=none react-scripts start\" \"wait-on http://localhost:3000 && electron .\"",
    ...
  }
  ...
}

这样就可以直接 npm run dev 开启调试模式,不用单独再运行 React 和 Electron。

以上,即可:npm run dev 运行程序