React vscode 创建 react 项目流程【超详细】

文章目录

一、安装node
二、配置淘宝镜像
三、配置 vscode（win10）
四、全局安装脚手架
五、创建项目
编写第一个 react 程序教程

一、安装node

请在官网下载安装：https://nodejs.org/zh-cn/
vscode 中点击 ( ctrl + `) 调出终端
输入指令node -v，能显示版本号，说明 node 已经装好了
输入指令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 无需配置

右击VSCode图标，选择属性，选择兼容性，勾选以管理员身份运行此程序，最后点击确定
vscode 中点击 ctrl + ` 调出终端
输入命令：get-ExecutionPolicy
输入命令：set-ExecutionPolicy RemoteSigned
输入命令：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 startStarts the development server.npm run buildBundles the app into static files for production.npm testStarts the test runner.npm run ejectRemoves this tool and copies build dependencies, configuration filesand scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd your-appnpm startHappy 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

React vscode 创建 react 项目流程【超详细】相关推荐

Vue vscode 创建 vue 项目流程【超详细】
文章目录一.安装node 二.配置淘宝镜像三.配置 vscode(win10) 四.全局安装脚手架五.创建项目六.进入项目七.项目结构一.安装node 请在官网下载安装:https://n ...
Idea中创建maven项目（超详细）
Idea中创建maven项目提示:前提条件时maven已经安装好,并且环境变量也配置完成,maven没安装好或者环境变量没有配置好的请参考我上一篇文章--maven的安装和配置上篇博文链接:htt ...
myeclipse需要配置服务器得项目是,【SpringMVC】使用Myeclipse创建SpringMVC项目【超详细教程】...
之前一直是使用Eclipse创建Web项目,用IDEA和MyEclipse的创建SpringMVC项目的时候时不时会遇到一些问题,这里把这个过程记录一下,希望能帮助到那些有需要的朋友.我是用的是MyE ...
java帮助文档mye_【SpringMVC】使用Myeclipse创建SpringMVC项目【超详细教程】
之前一直是使用Eclipse创建Web项目,用IDEA和MyEclipse的创建SpringMVC项目的时候时不时会遇到一些问题,这里把这个过程记录一下,希望能帮助到那些有需要的朋友.我是用的是MyE ...
idea创建javaweb项目步骤超详细（2022最新版本）
目录前言必读一.新建文件 1.在idea里面点击文件-新建-项目 2.新建项目-更改名称为自己想要的项目名称-创建 3.右键自己建立的项目-添加框架支持(英文版是Add Framework Sup ...
IntelliJ IDEA 12 创建Web项目教程超详细版
原文 http://www.cnblogs.com/cnjava/archive/2013/01/29/2881654.html IntelliJ IDEA 12 新版本发布第一时间去官网看了下 ...
超详细的VsCode创建SpringBoot项目(图文并茂)
文章目录超详细的VsCode创建SpringBoot项目(图文并茂) 一.安装jdk 1.OpenJDK 2.Java SE Development Kit 8 二.安装maven 1.下载 2.配 ...
centos7根据端口查进程_记录一次CentOs7下Nginx+WSGI部署Django项目（超详细）
记录一次Django部署的文章,不是很熟悉Linux系统,踩了不少坑,本篇文章相当于是一个总结,我会在本文中详细介绍,部署单个Django项目和多个Django的方法,如读者有更好的方法,欢迎留言一起 ...
嵌入式：Keil uvision5环境下创建一个工程模板(步骤超详细)
嵌入式:Keil uvision5环境下创建一个工程模板(步骤超详细) 1.创建一个空的文件夹,命名为"test"(可以为任何名字) 2.打开test文件夹,在该目录下依次创建两个 ...

React vscode 创建 react 项目流程【超详细】

文章目录

一、安装node

二、配置淘宝镜像

三、配置 vscode（win10）

四、全局安装脚手架

五、创建项目

编写第一个 react 程序教程

React vscode 创建 react 项目流程【超详细】相关推荐

最新文章

热门文章