包你学会使用脚手架创建React

浅浅的花香味﹌ 2022-10-20 05:25 208阅读 0赞

### React 脚手架 意义 ###

1.  脚手架是开发现代Web应用必备(现在已经不再是创建一个页面，在里面写HTML、css、js时代了）
2.  充分利用Webpack、Babel、ESLint等工具辅助项目开发
3.  零配置，无需手动配置繁琐的工具即可开始使用
4.  可以更多的去关注业务，而不是配置工具

### 使用React 脚手架 初始化项目 ###

先运行`npm install -g create-react-app`  
将create-react-app 安装到系统的全局环境，这样就可以在任意路径下使用它  
1．初始化项目

命令行中输入

命令:create-react-app my-app
    
    create-react-app 项目名

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]\]  
)  
注意：如果是第一次可能会出现这句话提示 直接输入 y 在摁enter键即可  
在项目名中不能包含大写字母

Cannot create a project named "myApp" because of npm naming restrictions:
    
      * name can no longer contain capital letters
    
    Please choose a different project name.
    由于npm命名限制，无法创建名为“myApp”的项目：
    包名称不能再包含大写字母
    请选择其他项目名称。

等待即可  
![在这里插入图片描述][20210518091818156.png]

如果上面方法不可以使用的话

镜像原切换为npm原镜像原  https://registry.npmjs.org/
    不要使用其他镜像原
    
    在运行： npx create-react-app my-app
    等待安装成功即可（外网时间较长，耐心等待即可）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]  
出来这个语句则证明安装成功

### 如何启动项目 ###

启动项目，在项目根目录中执行命令:  
`npm start`

![在这里插入图片描述][20210519145554982.png]  
之后等待即可

启动之后他会自动启动默认浏览器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]  
看到这个页面就成功了

注意：第一次打开编译等待时间稍长，耐心等待

### npx命令介绍 ###

*  npm v5.2.0引入的一条命令
 *  目的：提升包内提供的命令行工具的使用体验
 *  原来:先安装脚手架包，再使用这个包中提供的命令
 *  现在:无需安装脚手架包，就可以直接使用这个包提供的命令

补充：

*  推荐使用:npx create-react-app my-app 来初始化项目
    
     *  npx create-react-app 项目名
 *  不推荐 npm init react-app my-app
 *  不推荐 yarn create react-app myapp
    
     *  yarn是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
     *  yarn真有快速、可靠和安全的特点
     *  初始化新项目: yarn init
     *  安装包: yarn add 包名称
     *  安装项目依赖项:yarn
     *  其他命令，请参考[yarn文档][yarn]

### 在脚手架中使用React ###

*  先导入react和react-dom两个包  
    使用ES6模块化语法进行导入
    
        // 在创建好的项目中src/index.js中进行导入
        import React from 'react'
        
        import RectDoM from ' react-dom '
 *  调用`React.createElement)`方法创建react元素
 *  调用`ReactDOM.render()`方法渲染react元素到页面中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]  
    其他的都是项目自己创建的，可以删除  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221020/3559bad82af74bebae7a8d112aaf2ff6.png
[20210518091818156.png]: /images/20221020/5701a354215a427ca0b14f781c59fdc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221020/8cfd04c35d1c4d8eaa1c0646ce8f0171.png
[20210519145554982.png]: /images/20221020/9300a01b574a4364931d3e3fc2023ca1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]: /images/20221020/bda39ad7179448ac8fd4f387c6f721e2.png
[yarn]: https://yarn.bootcss.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]: /images/20221020/a3be5d7f6ee0433f8573b296e4d3c2c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]: /images/20221020/685209486dd64f708db7c9abb96760f3.png