React（二）react脚手架的搭建

目录

一、搭建本地开发环境

二、创建 React 脚手架项目

三、VS Code 启动脚手架项目

        React脚手架我们所用的其中一个是Create React App，Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。

一、搭建本地开发环境

        使用 React 脚手架搭建项目之前先要确定自己的电脑是否有支持的本地开发环境；据官网建议系统中Node和npm版本要求如下：

​所以我们在cmd下执行命令查看Node和npm版本是否符合要求：

npm默认的源地址在国外，如果网速不太好，可以将其配置到国内源；命令如下：

  

   

    

     

    
    

     

      # 配置国内源
     
    
   

    

     

    
    

     

      npm config set registry https://registry.npm.taobao.org
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      # 配置源地址
     
    
   

    

     

    
    

     

      npm config set registry http://www.npmjs.org
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      # 查看当前环境源地址
     
    
   

    

     

    
    

     

      npm config get registry
     
    
  
 

环境准备完成后就可以生成项目包了；

二、创建 React 脚手架项目

（1）在创建好的文件夹内打开命令提示行工具，输入命令 npx create-react-app 项目名 创建一个新的项目；

（2）等待一段时间过后会出现成功提示；

（3）按照提示先进入项目名称文件夹 cd reactpro ，然后输入启动命令 npm start ，可以看到，启用的是http://localhost:3000/

（4）启动之后会自动在浏览器展示该项目的首页。

三、VS Code 启动脚手架项目

        能够正常展示首页就说明我们项目包创建成功，接下来就可以在编程软件中打开了，推荐 Visual Studio Code。React脚手架项目结构如下：

启动脚手架项目： 

（1）点击 package.json 文件 --> 右键 --> 在集成终端打开；

（2）在终端控制台中输入 npm start --> 回车；

（3）显示以下提示，项目启动成功。 

补充 npm 命令：

   

    

     

      

     
     

      

       npm uninstall 包名称  //卸载
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       npm list | findStr 包名称  //查看包是否安装
      
     
   
  

文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。

原文链接：majinjian.blog.csdn.net/article/details/121242139