精华内容
下载资源
问答
  • 初始化react项目
    2021-08-15 11:08:18

    一、安装依赖
    安装antd组件库
    sudo yarn add antd
    src/App.css,在文件顶部引入 antd 的样式:
    @import ‘~antd/dist/antd.css’;

    安装axios
    sudo yarn add axios

    添加
    sudo yarn add nprogress @types/nprogress

    添加路由
    sudo yarn add react-router-dom@types/react-router-dom(路径)

    更多相关内容
  • 1.1 初始化react项目

    2021-08-19 14:46:55
    一、创建react-ts项目 yarn create vite myreact --template react-ts 二、安装依赖 yarn 三、启动项目 npm run dev 四、新建目录 五、pages目录新建个index.tsx,代码来源AntDesgin,然后改造为TS ...

    一、创建react-ts项目

    yarn create vite myreact --template react-ts

    二、安装依赖

    yarn

    三、启动项目

    npm run dev

    四、新建目录

    五、pages目录新建个index.tsx,代码来源AntDesgin,然后改造为TS

    https://pro.ant.design/

    https://motion.ant.design/

    https://ant.design/

    import TweenOne from 'rc-tween-one';
    import React from 'react';
    import '../style/index.css'
    import Login from "../components/login";
     class GridLayout {
         private cellWidth: number;
         private cellHeight: number;
         private gridY: number;
         private gridX: number;
         private grid: Array<any>;
        constructor(rect: number, width: number, height: number) {
            this.gridX = Math.floor(width / rect);
            this.gridY = Math.floor(height / rect);
            this.cellWidth = width / this.gridX;
            this.cellHeight = height / this.gridY;
            this.grid = [];
            for (let i = 0; i < this.gridY; i += 1) {
                this.grid[i] = [];
                for (let s = 0; s < this.gridX; s += 1) {
                    this.grid[i][s] = [];
                }
            }
        }
    
        getCells = (e: { x: number; radius: number; y: number; }) => {
            const gridArray = [];
            const w1 = Math.floor((e.x - e.radius) / this.cellWidth);
            const w2 = Math.ceil((e.x + e.radius) / this.cellWidth);
            const h1 = Math.floor((e.y - e.radius) / this.cellHeight);
            const h2 = Math.ceil((e.y + e.radius) / this.cellHeight);
            for (let c = h1; c < h2; c += 1) {
                for (let l = w1; l < w2; l += 1) {
                    gridArray.push(this.grid[c][l]);
                }
            }
            return gridArray;
        }
    
        hasCollisions = (t: { x: number; y: number; radius: number; }) => (
            this.getCells(t).some(e => e.some((v: any) => this.collides(t, v)))
        )
    
        collides = (t: { x: any; y: any; radius: any; }, a: { x: number; y: number; radius: any; }) => {
            if (t === a) {
                return false;
            }
            const n = t.x - a.x;
            const i = t.y - a.y;
            const r = t.radius + a.radius;
            return n * n + i * i < r * r;
        }
    
        add = (value:any) => {
            this.getCells(value).forEach((item) => {
                item.push(value);
            });
        }
    }
    
    const getPointPos = (width: number, height: number, length: number) => {
        const grid = new GridLayout(150, width, height);
        const posArray = [];
        const num = 500;
        const radiusArray = [20, 35, 60];
        for (let i = 0; i < length; i += 1) {
            let radius;
            let pos;
            let j = 0;
            for(let j =0; j< num; j+=1) {
                radius = radiusArray[Math.floor(Math.random() * radiusArray.length)];
                pos = { x: Math.random() * (width - radius * 2) + radius, y: Math.random() * (height - radius * 2) + radius, radius };
                if (!grid.hasCollisions(pos)) {
                    break;
                }
            }
            posArray.push(pos);
            grid.add(pos);
        }
        return posArray;
    };
    
    const getDistance = (t: { x: any; y: any; }, a: { x: any; y: any; }) => (Math.sqrt((t.x - a.x) * (t.x - a.x) + (t.y - a.y) * (t.y - a.y)));
    
     class Point extends React.PureComponent {
        render() {
            const { tx, ty, x, y, opacity, backgroundColor, radius, ...props }:Readonly<any>= this.props;
            let transform;
            let zIndex = 0;
            let animation:any = {
                y: (Math.random() * 2 - 1) * 20 || 15,
                duration: 3000,
                delay:Math.random() * 1000,
                yoyo: true,
                repeat: -1,
            };
            if (tx && ty) {
                if (tx !== x && ty !== y) {
                    const distance = getDistance({ x, y }, { x: tx, y: ty });
                    const g = Math.sqrt(2000000 / (0.1 * distance * distance));
                    transform = `translate(${g * (x - tx) / distance}px, ${g * (y - ty) / distance}px)`;
                } else if (tx === x && ty === y) {
                    transform = `scale(${80 / radius})`;
                    animation = { y: 0, yoyo: false, repeat: 0, duration: 300 };
                    zIndex = 1;
                }
            }
            return (
                <div
                    style={{
                        left: x - radius,
                        top: y - radius,
                        width: radius * 1.8,
                        height: radius * 1.8,
                        opacity,
                        zIndex,
                        transform,
                    }}
                    {...props}
                >
                    <TweenOne
                        animation={animation}
                        style={{
                            backgroundColor,
                        }}
                        // @ts-ignore
                        className={`${this.props.className}-child`}
                    />
                </div>
    
            );
        }
    }
    
     class LinkedAnimate extends React.Component {
        static defaultProps = {
            className: 'linked-animate-demo',
        };
    
        num = 60;// 点的个数
         private box: any;
    
        constructor(props: {} | Readonly<{}>) {
            super(props);
            this.state = {
                data: getPointPos(1280, 600, this.num).map(item => ({
                    ...item,
                    opacity: Math.random() * 0.2 + 0.05,
                    backgroundColor: `rgb(${Math.round(Math.random() * 40 + 120)},230,255)`,
                })),
                tx: 0,
                ty: 0,
            };
        }
    
        onMouseMove = (e: { clientX: any; clientY: any; }) => {
            const cX = e.clientX;
            const cY = e.clientY;
            const boxRect = this.box.getBoundingClientRect();
            // @ts-ignore
            const pos = this.state.data.map((item: { x: any; y: any; radius: any; }) => {
                const { x, y, radius } = item;
                return { x, y, distance: getDistance({ x: cX - boxRect.x, y: cY - boxRect.y }, { x, y }) - radius };
            }).reduce((a: { distance: number; }, b: { distance: number; }) => {
                if (!a.distance || a.distance > b.distance) {
                    return b;
                }
                return a;
            });
            if (pos.distance < 60) {
                this.setState({
                    tx: pos.x,
                    ty: pos.y,
                });
            } else {
                this.onMouseLeave();
            }
        }
    
        onMouseLeave = () => {
            this.setState({
                tx: 0,
                ty: 0,
            });
        }
    
        render() {
            // @ts-ignore
            const { className } = this.props;
            const { data, tx, ty }:any = this.state;
            return (
                <div className={`${className}-wrapper`}>
                    <Login />
                    <div
    
                        className={`${className}-box`}
                        ref={(c) => { this.box = c; }}
                        onMouseMove={this.onMouseMove}
                        onMouseLeave={this.onMouseLeave}
                    >
                        {data.map((item:any, i:any) => (
                            <Point {...item} tx={tx} ty={ty} key={i.toString()} className={`${className}-block`} />
                        ))}
                    </div>
                </div>
            );
        }
    }
    
    export default LinkedAnimate
    

     六、style目录下建个index.css

    .linked-animate-demo-wrapper {
        overflow: hidden;
        height: 100%;
        background: GhostWhite;
        position: absolute;
        width: 100%;
    }
    
    .linked-animate-demo-box {
        position: absolute;
        width: 50%;
        height: 50%;
        display: block;
        left: 0%;
        top: 0;
        bottom: 0;
        right: 70%;
        margin: auto;
    }
    
    .linked-animate-demo-block {
        position: absolute;
        transition: transform .45s ease;
    }
    
    .linked-animate-demo-block-child {
        border-radius: 100%;
        width: 100%;
        height: 100%;
    }
    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    code {
        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
    }
    

    七、components下建立个login.tsx

    import React from "react";
    import {Button, Input, Space} from 'antd';
    import Icon,{UserOutlined, EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
    import 'antd/dist/antd.css'
    import './login.css'
    import {Link} from "react-router-dom"
    class Login extends React.Component<any, any> {
        constructor(props: any) {
            super(props);
            this.state = {
                defaultactive : false,
            }
        }
        render() {
            const PasswordSvg = () => (
                <svg d="1629272463432" className="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="14838" width="16" height="16">
                    <path
                        d="M825.5 832.2h-627c-72.7 0-131.9-59.1-131.9-131.9V323.6c0-72.7 59.1-131.9 131.9-131.9h626.9c72.7 0 131.9 59.1 131.9 131.9v376.7c0 72.8-59.1 131.9-131.8 131.9z m-627-602.7c-51.9 0-94.2 42.2-94.2 94.2v376.7c0 51.9 42.3 94.2 94.2 94.2h626.9c51.9 0 94.2-42.2 94.2-94.2V323.6c0-51.9-42.3-94.2-94.2-94.2H198.5z"
                        fill="#2c2c2c" p-id="14839"></path>
                    <path
                        d="M247.6 646.7h528.8v37.7H247.6zM830.4 388.7h-75.3V351h75.3v37.7z m-131.8 0h-75.3V351h75.3v37.7z m-131.9 0h-75.3V351h75.3v37.7z m-131.8 0h-75.3V351h75.3v37.7z m-131.9 0h-75.3V351H303v37.7zM830.4 547.9h-75.3v-37.7h75.3v37.7z m-131.8 0h-75.3v-37.7h75.3v37.7z m-131.9 0h-75.3v-37.7h75.3v37.7z m-131.8 0h-75.3v-37.7h75.3v37.7z m-131.9 0h-75.3v-37.7H303v37.7z"
                        fill="#2c2c2c" p-id="14840"></path>
                </svg>
            );
            const PasswordIcon = (props: any) => <Icon component={PasswordSvg} {...props} />;
            return (
                <div id={"login"}>
                <Space direction={"vertical"} align={"center"} size={18} >
                    <h3>Login Your Account</h3>
                    <Input placeholder=" Enter username" allowClear={true} className={"userInfo"} prefix={<UserOutlined />}/>
                    <Input.Password
                        placeholder=" Enter password"
                        iconRender={visible => (visible ? <EyeTwoTone/> : <EyeInvisibleOutlined/>)}
                        className={"userInfo"}
                        prefix={<PasswordIcon />}
                    />
                     <Link to={'/test'}> <Button type="primary" className={"userInfo"} >Sign In</Button></Link>
                </Space>
                </div>
            )
        }
    }
    
    export default Login
    

    login.css

    #login{
        background-color: GhostWhite;
        width: 20%;
        height: 40%;
        text-align: center;
        position: relative;
        left: 68%;
        top: 10%;
        z-index: 1;
        opacity: 0.8;
    }
    .userInfo {
        width: 260px;
        font: 16px bold;
    }
    h3{
        font-size: 24px;
    }
    
    
    

    八、assets目录下准备几张icon

    https://www.iconfont.cn/

    logo.svg\icon.svg\keyboard.svg

    九、main.tsx修改

    import React from 'react'
    import ReactDOM from 'react-dom'
    import LinkedAnimate from './pages/index'
    import Home from "./pages/home";
    import {BrowserRouter, Route, Switch} from 'react-router-dom';
    ReactDOM.render(
            <BrowserRouter>
                <Switch>
                <Route path="/test" component={Home}/>
                <Route path="/" component={LinkedAnimate}/>
                </Switch>
            </BrowserRouter>,
      document.getElementById('root')

    十、pages新建个home.tsx,代码依然是antdesign上的

    import {Layout, Menu} from 'antd';
    import {
        AppstoreOutlined,
        BarChartOutlined,
        CloudOutlined,
        ShopOutlined,
        TeamOutlined,
        UserOutlined,
        UploadOutlined,
        VideoCameraOutlined,
    } from '@ant-design/icons';
    import React from 'react';
    
    const {Header, Content, Footer, Sider} = Layout;
    
    class Home extends React.Component<any, any> {
        constructor(props: any) {
            super(props);
        }
        render() {  let a = {
        width:'100%',
        height:'40px'}
    
            return (
                <Layout>
                    <Sider
                        style={{
                            overflow: 'auto',
                            height: '100vh',
                            position: 'fixed',
                            left: 0,
                        }}
                    >
    
                        <div className="logo" />
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
                            <div style={a}>111</div>
                            <Menu.Item key="1" icon={<UserOutlined />}>
                                Home
                            </Menu.Item>
                            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                                Period
                            </Menu.Item>
                            <Menu.Item key="3" icon={<UploadOutlined />}>
                                Stroies
                            </Menu.Item>
                            <Menu.Item key="4" icon={<BarChartOutlined />}>
                                Tasks
                            </Menu.Item>
                            <Menu.Item key="5" icon={<CloudOutlined />}>
                                Bugs
                            </Menu.Item>
                            <Menu.Item key="6" icon={<AppstoreOutlined />}>
                                Statistics
                            </Menu.Item>
                            <Menu.Item key="7" icon={<TeamOutlined />}>
                                UserInfo
                            </Menu.Item>
                            <Menu.Item key="8" icon={<ShopOutlined />}>
                                RoleInfo
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout className="site-layout" style={{ marginLeft: 200 }}>
                        <Header className="site-layout-background" style={{ padding: 0 }} />
                        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
                            <div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
    
                            </div>
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                    </Layout>
                </Layout>
            )
        }
    
    }
    
    export default Home
    
    
    

     十一、启动看看效果,初学阶段,先记录一下

     

     

    展开全文
  • 每次开发新的react项目,总是会遇到繁琐的init项目的步骤,此项目是为了能快速进行react开发而准备的快速启动项目。 说明 使用create-react-app快速创建 React 打字稿 请求封装(待完成) 轴距 路由封装(待完成) ...
  • 初始化React项目

    2020-05-11 15:50:09
    第一步全局安装create-react-app npm install -g create-react-app C:\Users\Administrator\AppData\Roaming\npm\create-react-app -> C:\Users\Administrator\AppData\Roaming\npm\node_modulemodules\create...

    第一步全局安装create-react-app

    npm install -g create-react-app
    
    C:\Users\Administrator\AppData\Roaming\npm\create-react-app -> C:\Users\Administrator\AppData\Roaming\npm\node_modulemodules\create-react-app\index.js+ create-react-app@3.4.1
    updated 1 package in 18.225s
    PS D:\workspace\work\3DSurveillanceSystem\switchRoom>
    create-react-app <你的项目名字>

    出现这些 

    We suggest that you begin by typing:
    
      cd 你项目名字
      npm start
    
    Happy hacking!
    Compiled successfully!

    cd 到你的项目中,然后输入 npm start 你就会看到 

     

    展开全文
  • 初始化react项目遇到的问题以及解决 1. 初始化项目,命令:`npx create-react-app` my-app` 2. 报错:官方服务器连接慢 3. 继续输入初始化命令依旧报错 4. 尝试配置全局安装 5. 更改文件用户权限 6. 重新配置全局...

    一场由眼瘸看错命令而引起的一系列错误解决办法的研究

    1. 初始化项目,命令:npx create-react-app my-app`

    是create 不是creact 已改正!!

    npx是npm的升级版,my-app是项目名称

    2. 报错:官方服务器连接慢

    在这里插入图片描述

    解决:配置淘宝镜像 npm config set registry https://registry.npm.taobao.org

    验证配置:npm config get registry

    在这里插入图片描述

    3. 继续输入初始化命令依旧报错

    在这里插入图片描述

    4. 尝试配置全局安装

    npm install -g create-react-app
    报错:文件权限不够
    在这里插入图片描述

    5. 更改文件用户权限

    大佬丢失的林夕的解决方案

    在node的文件夹中,设置users用户完全控制权限
    在这里插入图片描述

    6. 重新配置全局安装,成功!

    在这里插入图片描述

    7. 重新初始化依旧报错!!

    同样的错误,原来是没注册,找大佬
    Amen-大佬的解决方案

    官网注册
    在这里插入图片描述

    8. 登录

    报错,账号不存在,之前更换成淘宝的镜像,账号是在npm注册的需要换回来
    在这里插入图片描述
    S筱潇S四维Smile 靠大佬的解决方案

    一系列操作:换源,检查,清除缓存,登录,成功!
    在这里插入图片描述

    9. 搞了半天,原来是命令错了

    谢谢你 create,我会记住你的在这里插入图片描述

    展开全文
  • MAC 下面初始化React项目环境

    千次阅读 2020-07-05 21:31:38
    一般我们会用编辑器来启动项目,需要自己去下载,Visual Studio Code 当我们安装好编辑器后,我们就要开始初始化我们的项目 我们使用 React 官方提供的命令行脚手架工具 create-react-app 生成我们的初始项目,我们...
  • 初始化React项目对Node版本有要求:Create React App requires Node 14 or higher. ** 因此需要更新Node版本,具体跟新方法如下: https://m.html.cn/qa/node-js/14806.html 跟新完成之后,即可按照指定命令创建...
  • 使用umi脚手架来初始化React项目:使用umi脚手架来初始化React项目 - 简书 一、开发环境 首先,请安装NodeJS。NodeJS 是一个 JS 执行环境,umi 基于 JS 编写,并且需要在你的开发机上运行,所以依赖于它。 安装...
  • 01-初始化react项目git

    2022-04-17 13:58:43
    react后台项目--01-初始化react项目,在github中
  • React项目初始化

    2022-07-13 09:50:41
    react项目初始化
  • react 默认创建出来的项目文件一大堆,默写文件我们从头到尾都不会用到,而且这些文件会干扰我们项目的开发,所以本文章将讲解怎样创建一个精简版的初始化项目 1、创建项目 在指定路径下执行如下命令创建react项目...
  • 第一步骤:创建项目 create-react-app react_note 第二步骤:运行项目 npm start 第三步骤:项目目录修改 情况src目录下的所有文件,新建index.js文件; 在src目录下新建Page目录,在Page目录下新建index.js src/...
  • 一.React 脚手架初始化项目 1 初始化项目,命令: npx create-react-app my-app 2 启动项目,在根目录执行命令: npm start 3 npx 命令介绍 npm v5.2.0引入的一条命令 目的:提升包内提供的命令工具的使用体验 ...
  • vue/react项目初始化

    2021-08-06 15:13:25
    1、项目初始化 全局安装:npm i -g create-react-app 切换到想创项目的目录,使用命令:create-react-app <项目名> 进入项目文件夹:cd <项目名> 启动项目:npm start 安装组件:yarn add antd-...
  • react项目初始化常用

    2020-06-04 22:16:49
    npm install -g create-react-app create-react-app edu-client cd edu-client 清理文件 安装proptypes yarn add prop-types 2,安装router yarn add react-router-dom App.js使用的地方可以添加 ...
  • 初始化一个React项目 create-react-app是一个通过npm发布的安装包,在确认Node.js和npm安装好之后,输入下面命令创建。 npm install -g create-react-app 安装结束后,使用下面命令创建应用目录。 create-react-app ...
  • 一、前端项目搭建 文章目录一、前端项目搭建1.准备工作2.基本命令 1.准备工作 1.1 了解脚手架 create-react-app 1.2 安装node.js 官方网站是链接: link. 3. 项目3 2.基本命令
  • 1.create-react-app是一个通过npm发布的安装包,在确认Node.js和npm安装好之后,输入下面命令创建。 2.安装结束后,使用下面命令创建应用目录。 3.打开目录 4.运行项目
  • 初始React

    2022-04-05 17:25:21
    React的由来   因为目前市面上已有的框架不能很好的解决前端视图中所遇到的问题,所有facebook决定重新开发一套框架,这就是react诞生的原因。 创建React-APP 为了加速npm下载速度,先把npm设置为淘宝镜像地址。 ...
  • yarn create react-app private --typescript (初始化一个typescript 的React项目) cd private 进入项目文件夹, yarn start 即可启动项目。 yarn add react-intl 使用react-intl来使react组件国际化。
  • 1. 创建 react 项目 create-react-app 项目名 在你的某个文件夹里面创建 遇到各种警告可以忽略,只要不是红色的 2. 运行你的项目 yarn start 或者 npm start 会自动打开项目对应的网页 如果你使用的是 yarn ...
  • 初始化 React 项目失败,提示如下: 1. 由于网络原因,某些依赖包加载失败,解决方法:设置 npm 镜像为 cnpm npm config set registry https://registry.npm.taobao.org 转载于:...
  • 如何搭建一个初始化React项目

    千次阅读 2019-05-24 11:15:27
    3、输入npx create-react-app my-app,开始创建项目,如果npm是5.2版本以下,使用该命令 npm install -g create-react-app 再输入create-react-app my-app (my-app,是你项目的名字) 4、输入 ...
  • React init config React开发环境,扩展一下就是WEB前端开发环境。不断完善中...
  • [React]初始化React项目

    千次阅读 2017-03-12 13:37:59
    本文根据开源内容派生,与公司无关。 派生自:https://facebook.github.io/react/docs/installation.html为什么要配置开发环境配置是开发和学习开发的基础,没有...运行命令npm install -g create-react-app create
  • vscode安装react 安装流程:vscode + 【第一个可以运行的项目】 开发使用的工具 vscode vscode 请到https://code.visualstudio.com/Download 自行下载 开始准备必要开发环境 1.安装 node.js 官网下载最新的版本:...
  • react-native 初始化项目

    2022-02-24 09:18:34
    1.项目文件夹 选择项目所安装的文件夹 2.shift+右击打开命令行窗口 选择在此处打开powershell窗口
  • 环境是nodejs-V14,当你安装好android sdk这些以后,解压到指定文件夹就是RN的空项目,已经包含常用插件react-navigaition,react-native-webview,native-base。同时默认支持Hermes引擎,minifyEnabled已经开启,若...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,461
精华内容 13,784
关键字:

初始化react项目