vscode利用npm配置搭建react项目

本文详细介绍了如何在VSCode中利用npm搭建React项目,包括安装全局包、创建根目录、添加依赖、创建文件、配置webpack、编写HTML、JSX和JS文件,最后通过npm start启动项目。主要步骤包括:安装React和相关包,配置webpack.config.js,编写index.html、App.jsx和main.js,以及使用create-react-app快速创建项目。
摘要由CSDN通过智能技术生成

一.安装全局包
$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

二.创建根目录
创建一个根目录,目录名为:myApp,再使用npm init初始化,生成package.json文件:

$ mkdir myApp (重點1)
$ npm init

三.添加包及插件
因为我们需要使用React,所以我们需要先安装它,–save命令用于将包添加至package.json文件中

$ npm install react --save (重點2)
$ npm install react-dom --save (重點3)

同时我们需要安装一些babel插件

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

四.创建文件
接下来我们创建一些必要文件:

$ touch index.html (4重點)
$ touch App.jsx (重點)
$ touch main.js (重點)
$ touch webpack.config.js (5重點)

五.设置编译器,服务器,载入器
打开webpack.config.js文件添加以下代码:

var config = {
?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值