react--学习笔记8（react脚手架和简单练习）

小灰灰 2022-11-27 07:20 214阅读 0赞

# react应用(基于react脚手架)： #

**1.使用create-react-app创建react应用**

** react脚手架**

1.  xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
    
    1.  包含了所有需要的配置
    2.  指定好了所有的依赖
    3.  可以直接安装/编译/运行一个简单效果
2.  react提供了一个用于创建react项目的脚手架库: create-react-app
3.  项目的整体技术架构为:  react + webpack + es6 + eslint
4.  使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

**3.1.2. 创建项目并启动**

npm install -g create-react-app

create-react-app hello-react

cd hello-react

npm start

**拓展：**

1.安装node.js和npm:

可自行到node官网下载，下载node完成后，npm也会自行下载完成。

2.通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70][]

3.安装好的npm的源默认是国外的源，会因为网络原因导致执行npm操作有延时，我们可以切换npm的源为淘宝的源镜像。

执行 npm config set registry https://registry.npm.taobao.org。切换完成后，可通过 npm config get registry 查看。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 1][]

4.安装react脚手架，cmd执行 npm i -g create-react-app  (-g为全局下载)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 2][]

5.安装好 node 和 react脚手架后就可以创建项目啦，cmd切换至指定路径，执行  create-react-app rproject (rproject为自定义项目名)，最后出现 happy hacking说明创建成功。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 3][]

6.如果出现以下报错，是因为网络原因，导致 npm读取代理服务器失败，解决办法为1查看网络状况，2将npm源路径切换到淘宝镜像。参照第三步。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 4][]

7.项目创建成功后，我们可在对应的路径下看到项目文件。打开文件可以看到文件结构。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 5][]

8.启动项目。在项目所在路径下cmd执行 npm start。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 6][]

9.启动成功后会自动打开浏览器，并出现react图标，说明项目启动成功。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 7][]

**3.1.3. react脚手架项目结构**

ReactNews

|--node\_modules---第三方依赖模块文件夹

|--public

*|--* *index.html**-----------------主页面*

|--scripts

*|--* *build.js**-------------------bui**ld**打包引用配置*

*|--* *start.js**-------------------**start**运行引用配置*

|--src\---\---------源码文件夹

*|--components--**----**-----------react组件*

*|--**index.js**-----**----**----------应用入口js*

|--.gitignore\------git版本管制忽略的配置

|--package.json\----应用包配置文件

package.json----dependendies:运行时依赖

package.json----devdependencies:开发时依赖

package.json----name、version：标识，依赖，运行打包

|--README.md\-------应用描述说明的readme文件

**实现一个简单的练习：**

步骤：

1.按照上面的步骤下载好手脚架

2.将App.css、App.js、index.js、index.css、serviceWorker.js、setupTest.js等都删除

3.自己新建一个index.jsx入口，并且写内容

import React, { Component } from 'react'
    import ReactDOM from 'react-dom'
    import App from './componnets/app'
    import './index.less'
    
    ReactDOM.render(<App />, document.getElementById('root'))

4.在src下新建文件夹components，在建立app.js,

import React, { Component } from 'react'
    import logo from '../logo.svg'
    
    export default class App extends Component{
    render(){
        return(
            <div>
                <img className="image" src={logo} alt="logo" />
                <h3 className="title">React第一节课</h3>
            </div>
        )
    }
    }

5.新建index.css

.image{
        width: 200px;
        height: 200px;
    }
    .title{
        font-size: 20px;
        color: red;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70][]

拓展：

在idea中建立模板：

1.在setting下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70]: /images/20221124/33c1ac500bdb4d55bd0cd798fe58e571.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 1]: /images/20221124/bdda7980d98a463598a078ecc83e1ab9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 2]: /images/20221124/e5ab3dac22f14c27b666a297435aa1c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 3]: /images/20221124/cd0290b78b2d4c25b5cfb1eccaa0a55e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 4]: /images/20221124/12b0da548b464d8385006ba5a4746f0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 5]: /images/20221124/3513264a640349d796d423a91034769e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 6]: /images/20221124/8a21ba6abea3402fb84c80cb7e669f17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llbGxvd211c2hyb29t_size_27_color_FFFFFF_t_70 7]: /images/20221124/8f9f46ee112b42be82cf9235e2ba44c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70]: /images/20221124/ac390d51d6704582b9ab24760d269ca6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1]: /images/20221124/89125f3d7ca54d86b8cd7ecfcc0df3e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2]: /images/20221124/ec8f3f9459c14c65905381c4f687105a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3]: /images/20221124/2214ff9c538745db8ecc6874b0ce1470.png