React vscode 创建 react 项目流程【超详细】-程序员宅基地

技术标签： react  React 全家桶  创建项目流程  

文章目录

一、安装node

  1. 请在官网下载安装：https://nodejs.org/zh-cn/
  2. vscode 中 点击 ( ctrl + `) 调出终端
  3. 输入指令node -v，能显示版本号，说明 node 已经装好了
  4. 输入指令npm -v，能显示版本号，说明 npm 可以使用了

点击链接查看图文教程
https://blog.csdn.net/qq_45677671/article/details/114535955

二、配置淘宝镜像

  • 输入指令：
  • npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 输入指令cnpm -v，能显示版本号，说明 cnpm 已经装好了

三、配置 vscode（win10）

win7 无需配置

  1. 右击VSCode图标，选择属性，选择兼容性，勾选以管理员身份运行此程序，最后点击确定
    在这里插入图片描述
  2. vscode 中 点击 ctrl + ` 调出终端
  3. 输入命令：get-ExecutionPolicy
  4. 输入命令：set-ExecutionPolicy RemoteSigned
  5. 输入命令：get-ExecutionPolicy
  • Restricted：表示禁止终端使用命令的
  • RemoteSigned：表示可以使用终端命令了
    在这里插入图片描述

四、全局安装脚手架

React团队推荐使用create-react-app（相当于vue的vue-cli）来创建React新的单页应用项目，它提供了一个零配置的现代构建设置。

React脚手架（create-react-app）意义：

  • 脚手架是官方提供，零配置，无需手动配置繁琐的工具即可使用
  • 充分利用Webpack，Babel，ESLint等工具辅助项目开发
  • 关注业务，而不是工具配置
1. create-react-app会配置我们的开发环境，以便使我们能够使用最新的 JavaScript特性，
2. 提供良好的开发体验，并为生产环境优化你的应用程序。
3. 为了能够顺利的使用create-react-app脚手架，
我们需要在我们的机器上安装：
4. Node >= 8.10 和 npm >= 5.6。
  • 在终端输入命令：npm install -g create-react-app

在这里插入图片描述

  • 这需要等待一段时间，这个过程在安装三个东西
  • react: react的顶级库
  • react-dom: react在web段的运行环境
  • react-scripts: 包含运行和打包react应用程序的所有脚本及配置

五、创建项目

  • 先创建一个放置项目的文件夹www
  • 在终端中使用cd指令跳转到这个文件夹
  • 创建项目指令：create-react-app your-app（your-app是项目名，可以自己取）

在这里插入图片描述

  • 出现下面的界面，表示创建项目成功：
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!
  • 通过cd your-app命令进入目录
  • 运行npm start即可运行项目
  • 生成项目的目录结构如下：
├── README.md			使用方法的文档
├── node_modules		所有的依赖安装的目录
├── package-lock.json	锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json					
├── public				静态公共目录
└── src					开发用的源代码目录

编写第一个 react 程序教程

点击跳转：https://blog.csdn.net/qq_45677671/article/details/115874685
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677671/article/details/115873319

智能推荐

fopen,fopen_s,_wfopen_s与_fsopen, _wfsopen的区分_fopen_s和fopen的区别-程序员宅基地

文章浏览阅读1.5w次，点赞2次，收藏13次。C++做项目的过程中，需要实现文件打开保存的一个功能，当我对文件tmp.dat进行写操作以后，想要第二次对此文件进行写操作，此时用fopen_s,_wfopen_s均出现返回int error = 13也就是EACCES （Permission denied）的错误。而由于项目是Unicode编码，没办法用fopen进行文件操作（其实只要在预编译中加入_CRT_SECURE_NO_WARN_fopen_s和fopen的区别

合工大计算机组成原理ppt,合工大 计算机组成原理 计算机组成原理提纲.pdf-程序员宅基地

文章浏览阅读251次。合工大 计算机组成原理 计算机组成原理提纲计算机组成原理计算机组成原理合肥工业大学计算机与信息学院陈陈 田田2013.12.12提 纲11 考试形式和试卷结构考试形式和试卷结构2 考查目标3 参考书目44 考点及重点难点分析考点及重点难点分析计算机与信息学院 ..._计算机组成原理合工大

PostgreSQL--读懂执行计划(一)_postgresql 执行计划-程序员宅基地

文章浏览阅读7.9k次，点赞5次，收藏42次。这里写自定义目录标题前言执行计划常用命令参数解读常用组合执行计划解读关键字常见扫描方式Seq ScanIndex Only ScanIndex ScanBitmap Index Scan+Bitmap Heap ScanHash JoinNested LoopMerge Join小结前言PostgreSQL为每个收到查询产生一个查询计划。 选择正确的计划来匹配查询结构和数据的属性对于好的性能来说绝对是最关键的，因此系统包含了一个复杂的规划器来尝试选择好的计划。 你可以使用EXPLAIN命令察看规划器为任_postgresql 执行计划

释放AI创作潜能：从大模型训练到高产力应用-程序员宅基地

文章浏览阅读1.4w次，点赞83次，收藏82次。随着科技的不断进步，人工智能已经成为了各行各业的必备技能。特别是在内容创作领域，人工智能生成内容（AIGC）正逐渐成为趋势。AI可以创造出优秀的、原创的文章和故事，这为创作者们提供了一种新的创作方式。同时，AIGC技术也可以节省人力成本，提高内容生产效率。但是，如何在使用技术的前提下保持内容的原创性和质量，这是我们需要思考的问题。

mysql root 访问被拒绝_mysql-“连接失败：用户'root'@'localhost'（使用密码：是）的访问被拒绝”...-程序员宅基地

文章浏览阅读3.7k次。mysql-“连接失败：用户'root'@'localhost'(使用密码：是)的访问被拒绝”这个问题在这里已有答案：MySQL错误1045(28000)：用户'bill'@'localhost'的访问被拒绝(使用密码：是) 35个答案我写了一些PHP网页使用的函数，以便与mysql数据库进行交互。 当我在服务器上测试它们时，..._mysql -uroot -p 数据库访问拒绝oot @localhost

【分布式缓存】springboot整合jetcache使用详解_springboot集成jetcache如何操作jetcache-程序员宅基地

文章浏览阅读5k次，点赞103次，收藏105次。springboot整合jetcache使用详解_springboot集成jetcache如何操作jetcache

随便推点

Tensorflow-gpu 1.13.1+Python 3.7.2+CUDA 10.0 +cuDNN7.5_tensorflow-gpu==1.13.1需要那个版本的python-程序员宅基地

文章浏览阅读8.3k次，点赞3次，收藏20次。最近在工作站上安装Tensorflow-gpu失败了很多次，由于坚信Tensorflow 1.13.1对Python3.7和新的CUDA的支持，一直没有放弃，现在终于配置成功了，把过程简单记录下来，希望能对大家有帮助。【电脑基础环境】硬件：工作站，显卡Nvidia quadro M5000软件：windows 7【软件安装过程】Anaconda3下载地址：https://www.a..._tensorflow-gpu==1.13.1需要那个版本的python

静态编译的方式合并第三方dll，并生成自己的dll，以及出现‘__acrt_first_block == header’异常解决方式_vs 将opencv的dll打包到自己的dll-程序员宅基地

文章浏览阅读4.7k次，点赞2次，收藏8次。有时候调用了第三方的dll，但是由于种种原因不能显示出来，需要将第三方dll封装到自己的dll里，在使用时，让别人只你的dll，而不用调用你使用的第三方dll。怎么实现？用静态编译的方式！最近由于项目需要，用VS2015+opencv2.4.13编程实现了静态编译生成自己的dll，这个dll相当于将opencv的部分功能封装到自己的dll中了（不要跟我说opencv开源，不需要封装到自己的d..._vs 将opencv的dll打包到自己的dll

unity Android安卓平台读取Application.persistentDataPath路径_unity怎么 读取 application.persistentdatapath 下的文件-程序员宅基地

文章浏览阅读3.1k次。这次这么测试是对的，下次再有问题再看看写入的时候这样写的： fileLocal = Application.persistentDataPath + "/" + path; finalPath =#if UNITY_ANDROID && !UNITY_EDITOR fileLocal;#else "file://" + fileLocal;#endif读取的时候这样写的： path =#._unity怎么 读取 application.persistentdatapath 下的文件

C语言 数据结构 栈的顺序表示和实现-程序员宅基地

文章浏览阅读2.8k次，点赞7次，收藏47次。栈的顺序表示和实现文章目录1 顺序栈结构2 基本操作函数3 整体代码test3.cStack.h4 运行结果5 附加题栈的存储结构可以是顺序表或链表，该篇为顺序表存储栈是后进先出的数据结构1 顺序栈结构栈结构体top永远指向下一个typedef struct Stack{ DataType data[maxn]; // 作为栈元素的存储方式，数据类型为DataType int top; // top即栈顶指_栈的顺序表示和实现

总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程_index.html 是vue 项目的-程序员宅基地

文章浏览阅读7.9k次，点赞15次，收藏105次。总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程1 vue中index.html、main.js、App.vue、index.js关系简介1.1 项目的运行入口index.html1.2 入口文件main.js1.3 根组件App.vue1.4 控制路由index.js2 Vue项目加载流程1 vue中index.html_index.html 是vue 项目的

lammps数据后处理：python绘制应力应变曲线 附程序代码_混凝土应力应变曲线图绘制代码-程序员宅基地

文章浏览阅读1.7k次。绘制应力应变的方法有很多，常规的做法是把数据文件拖入到origin绘图，还有一个简单的方法是使用python脚本，在模拟完成后，直接运行一下脚本就能得到应力应变曲线，可以快速的观察运行结果。_混凝土应力应变曲线图绘制代码

推荐文章

热门文章

相关标签