IT评测·应用市场-qidao123.com技术社区

标题: React基础教程：react脚手架 [打印本页]

---

作者: 道家人    时间: 2024-6-13 21:23
标题: React基础教程：react脚手架
1、create-react-app

全局安装create-react-app

1. npm install -g create-react-app

复制代码

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

创建一个项目

1. create-react-app my-app

复制代码

假如不想全局安装，可以直接利用npx，也可以实现类似的效果

1. npx create-react-app my-app

复制代码

  这必要等待一段时间，这个过程现实上会安装三个东西：
  

   

• 【react】：react的顶级库。
  
• 【react-dom】：因为react有许多的运行情况，比如app端的react-native，我们要在web上运行就利用react-dom。
  
• 【react-scripts】：包含运行和打包react应用程序的全部脚本及设置。
  

  假如看到以下内容，就说明安装成功了

   常见题目：npm安装失败
  

• 切换为npm镜像为淘宝镜像
  
  
  
  • 1. npm i -g nrm

    复制代码
  • 1. nrm ls

    复制代码
  • 
    
    
  
  

   

• 1. nrm use taobao
  3. nrm ls

  复制代码
• 
  
  

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

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

1. import React from "react";
2. import ReactDOM from 'react-dom';
4. ReactDOM.render(<div>
5.     <p>Team Suns</p>
6.     <ul>
7.         <li>杜兰特</li>
8.         <li>布克</li>
9.         <li>比尔</li>
10.     </ul>
11. </div>, document.getElementById('root'))

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4