当前位置: 首页> 健康> 科研 > React基础教程:react脚手架

React基础教程:react脚手架

时间:2025/7/9 11:52:10来源:https://blog.csdn.net/WwLK123/article/details/139522662 浏览次数:0次

1、create-react-app

全局安装create-react-app

npm install -g create-react-app

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

安装成功之后,通过命令create-react-app -V检查是否安装成功

在这里插入图片描述

创建一个项目

create-react-app my-app

在这里插入图片描述

如果不想全局安装,可以直接使用npx,也可以实现相同的效果

npx create-react-app my-app

这需要等待一段时间,这个过程实际上会安装三个东西:

在这里插入图片描述

  1. 【react】:react的顶级库。
  2. 【react-dom】:因为react有很多的运行环境,比如app端的react-native,我们要在web上运行就使用react-dom。
  3. 【react-scripts】:包含运行和打包react应用程序的所有脚本及配置。

如果看到以下内容,就说明安装成功了

在这里插入图片描述

常见问题:npm安装失败

  • 切换为npm镜像为淘宝镜像

    • npm i -g nrm
      
    • nrm ls
      
    • 在这里插入图片描述

  • nrm use taobaonrm ls
    
  • 在这里插入图片描述

2、编写第一个react应用程序

react开发需要引入多个依赖文件:react.jsreact-dom.js,分别又有开发版本和生产版本,create-react-app已经帮我们把这些东西安装好了。把通过CRA创建的额工程目录下的【src】目录清空,然后在里面重新创建一个index.js写入以下代码:

import React from "react";
import ReactDOM from 'react-dom';ReactDOM.render(<div><p>Team Suns</p><ul><li>杜兰特</li><li>布克</li><li>比尔</li></ul>
</div>, document.getElementById('root'))
关键字:React基础教程:react脚手架

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: