react 入门

react框架基本介绍

react官方

开发环境及脚手架安装

  • 查看node版本
    1
    node -v
    v14.16.0
  • 查看npm版本
    1
    node -v
    6.14.11
  • 安装脚手架
    1
    npm install -g create-react-app
    cmd控制台反馈如下：
    C:\Users\18827\AppData\Roaming\npm\create-react-app -> C:\Users\18827\AppData\Roaming\npm\node_modules\create-react-app\index.js

+create-react-app@4.0.3
added 67 packages from 25 contributors in 22.805s

创建项目文件夹，并开启demo

  • 在电脑桌面同时按下Windows+R进入输入cmd,按enter

  • 进入某个盘 例如 M:

    1
    m:

  • 创建文件夹

    1
    mkdir ReactDemo

  • 进入文件夹 

    1
    cd ReactDemo

  • 创建demo01

    1
    create-react-app demo01

  • 控制台反馈

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
     Microsoft Windows [版本 10.0.19042.928]
    (c) Microsoft Corporation。保留所有权利。

    C:\Users\18827>m:

    M:\>mkdir ReactDemo

    M:\>cd ReactDemo

    M:\ReactDemo>create-react-app demo01

    Creating a new React app in M:\ReactDemo\demo01.

    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template...

    yarn add v1.22.10
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    info fsevents@1.2.13: The platform "win32" is incompatible with this module.
    info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
    info fsevents@2.3.2: The platform "win32" is incompatible with this module.
    info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
    [3/4] Linking dependencies...
    warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
    [4/4] Building fresh packages...
    success Saved lockfile.
    success Saved 7 new dependencies.
    info Direct dependencies
    ├─ cra-template@1.1.2
    ├─ react-dom@17.0.2
    ├─ react-scripts@4.0.3
    └─ react@17.0.2
    info All dependencies
    ├─ cra-template@1.1.2
    ├─ immer@8.0.1
    ├─ react-dev-utils@11.0.4
    ├─ react-dom@17.0.2
    ├─ react-scripts@4.0.3
    ├─ react@17.0.2
    └─ scheduler@0.20.2
    Done in 241.60s.

    Initialized a git repository.

    Installing template dependencies using yarnpkg...
    yarn add v1.22.10
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    info fsevents@2.3.2: The platform "win32" is incompatible with this module.
    info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
    info fsevents@1.2.13: The platform "win32" is incompatible with this module.
    info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
    [3/4] Linking dependencies...
    warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
    warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
    [4/4] Building fresh packages...
    success Saved lockfile.
    success Saved 17 new dependencies.
    info Direct dependencies
    ├─ @testing-library/jest-dom@5.12.0
    ├─ @testing-library/react@11.2.6
    ├─ @testing-library/user-event@12.8.3
    ├─ react-dom@17.0.2
    ├─ react@17.0.2
    └─ web-vitals@1.1.1
    info All dependencies
    ├─ @testing-library/dom@7.30.4
    ├─ @testing-library/jest-dom@5.12.0
    ├─ @testing-library/react@11.2.6
    ├─ @testing-library/user-event@12.8.3
    ├─ @types/aria-query@4.2.1
    ├─ @types/jest@26.0.22
    ├─ @types/testing-library__jest-dom@5.9.5
    ├─ css.escape@1.5.1
    ├─ css@3.0.0
    ├─ dom-accessibility-api@0.5.4
    ├─ lz-string@1.4.4
    ├─ min-indent@1.0.1
    ├─ react-dom@17.0.2
    ├─ react@17.0.2
    ├─ redent@3.0.0
    ├─ strip-indent@3.0.0
    └─ web-vitals@1.1.1
    Done in 22.61s.
    Removing template package using yarnpkg...

    yarn remove v1.22.10
    [1/2] Removing module cra-template...
    [2/2] Regenerating lockfile and installing missing dependencies...
    info fsevents@2.3.2: The platform "win32" is incompatible with this module.
    info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
    info fsevents@1.2.13: The platform "win32" is incompatible with this module.
    info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
    warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
    warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
    success Uninstalled packages.
    Done in 11.76s.

    Created git commit.

    Success! Created demo01 at M:\ReactDemo\demo01
    Inside that directory, you can run several commands:

      yarn start
        Starts the development server.

      yarn build
        Bundles the app into static files for production.

      yarn test
        Starts the test runner.

      yarn eject
        Removes this tool and copies build dependencies, configuration files
        and scripts into the app directory. If you do this, you can’t go back!

    We suggest that you begin by typing:

      cd demo01
      yarn start

    Happy hacking!

    记录一下yarn相关指令

    Inside that directory, you can run several commands:

    1
    yarn start

    Starts the development server.

    1
    yarn build

    Bundles the app into static files for production.

    1
    yarn test

    Starts the test runner.

    1
    yarn eject

    Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

    按照提示指令启动项目

    1
    2
    cd demo01
      yarn start

  • 控制台反馈
    Compiled successfully!

You can now view demo01 in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.5.23:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

  • 点击上述任一链接即可看到、即说明项目demo搭建成功！
    ReactDemo