react脚手架搭建

react脚手架搭建

【转】https://blog.csdn.net/weixin_41421227/article/details/80875544

由于我们在安装的过程中要使用到npm  因此需要先前安装好node.js

直接到官方下载即可  一般建议大家下载稳定版的(左边那个!)

知道你们懒,咯官网戳→_→  node.js官网:https://nodejs.org/en/

判断安装成功与否的标志↓

打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成

然后我们就可以开始create-react-app脚手架搭建之旅了

第一步:

打开你想要保存项目的盘  如D盘 新建一个目录如:my_reactDemo

第二步

打开cmd命令板 输入d:  回车 然后输入cd my_reactDemo 回车  这样我们就跳到了我们新建的那个目录下了

第三步

输入npm install -g create-react-app  回车  全局安装create-react-app脚手架(安装时间可能会比较长 视网速而定)

第四步

输入 create-react-app my-new-app 回车   在my_reactDemo目录下创建my-new-app文件夹

其中,node_modules用于存放项目的依赖包,也就是构建这个React项目可能会用到的工具,

--public文件夹中是 index.html存放目录,也就是React根页面的所在地

--src中用于存放js文件,也就是项目开发中的主要区域

--package.json用于记录项目信息,以及外部依赖包的导入信息等

--json文件不能直接打开,需要用到文本编辑器,本人用的是VScode

然后,在命令行中“ cd ”该目录,输入如下命令,部署npm,以及导入react-dom依赖包.

cmd中输入:

npm init   (然后一路回车)

npm install --save react react-dom  ( 在该目录下导入react和react-dom)

npm install --save  react-router-dom   (react路由,以后会用到)

再看看真实项目搭建过程

原文地址:https://www.cnblogs.com/oklfx/p/9723022.html

时间: 2024-11-29 12:08:53

react脚手架搭建的相关文章

react脚手架搭建1

23:01:17 react脚手架搭建 (个人用的是webstorm,所以分享下webstorm中的创建react脚手架项目的方法) 1.创建新项目(前提是下载nodejs环境) 2.下载好在webstorm中右键自己创建的项目目录,菜单中会出现一个命令行工具,点进去   然后    npm start 开启服务 3.在浏览器中打开 http://localhost:3000/ 可以看见react的默认页面 初步的搭建完成,开始自己写东西 原文地址:https://www.cnblogs.com

【webpack系列】从零搭建 webpack4+react 脚手架(四)

经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦.你要去浏览webpack的配置文件,找到哪些配置项,然后去更改它,我们希望有个参数配置文件,只要更改参数配置,而无需更改webpack的配置文件. 1 添加参数配置文件 (1)在根目录创建config文件夹,在config文件夹内新建一个index.js文件,文件内容如下: 'use strict

React 脚手架

React 脚手架,来让我们快速的搭建起来一个 React 的项目 1. 全局安装 React 的脚手架 npm i -g create-react-app 2. 创建项目 create-react-app 项目名 3. 进行项目指令: cd 项目名 4. 运行项目: npm start 这样我们 React 脚手架的项目搭建就完成了 接下来,让我们看看 React 脚手架,给我们下载的目录 现在我们就来看看每个文件的功能: 首先来看 README.md 文件,这里是对我们 React 脚手架的

react脚手架的建立——小白入门

一.介绍:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站. 做出来以后,发现这套东西很好用,就在2013年5月开源了. 二.React脚手架:create-react-app React 的环境搭建,是比较繁琐的,有很多的依赖:react.react-dom.babel.webpack ... 需要很多的前置知识,很容易让人从入门到放弃. 于是就诞生了 脚手架 这种东西,

React: React脚手架

一.简言 React开发目前已经非常流行,对于如何实现对React项目的管理和维护,React生态圈出现了大量可用的开发工具,例如Browserify.Gulp.Grunt.webpack等.其中,webpack称为CommonJS模块的主流工具之一,它是一个模块绑定器,拥有模块化和网络性能的两大优点,可以将不同类型的文件转换为单个文件,也可以将所有的依赖项打包成单个文件.当然,使用webpack管理React,开发者需要通过命令行去安装webpack和Babel,然后对webpack进行配置.

个人脚手架搭建 -- charmingsong-cli 看看对不

目的 为了解决多次构建相同功能的项目,在一定程度上需要定制化以及私有化设置 设计 问题 为什么不用现成的脚手架生成? 如果利用vue或者react的脚手架搭建项目可能创建完项目后还需要一系列的配置以及更改展示样式,并没有真正的解决问题.并且各自的脚手架只能生成各自的框架结构,其他项目不支持.例如,用vue-cli生成一个react项目,是不可以的. 为什么不直接复制相同的项目? 现有的项目中逻辑代码关联性很强,并且项目中可能存在一些基于项目环境的代码,直接复制项目更改名称工程量较大.环境错误不易

在windows下用脚手架搭建vue环境

做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架 3.命令为:cnpm install -g vue-cli,回车,等待安装 安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了. 4.紧接着,就该创建项目了,自己找一个合适的地方,新建一个项目文件夹,根据自己的需要

webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app目录 用来存放项目源文件 mkdir dist // 创建dist目录 用来存放打包好的文件 touch .gitignore //创建.gitignore 用来添加git 忽略的文件 touch webpack.config.js //创建webpack的配置文件 cd app //进入到app目

react环境搭建

react.js有类似于vue-cli的脚手架 ---- create-react-app 以下是采用了淘宝国内镜像资源去下载的react脚手架图 安装完脚手架后,还必须初始化react应用在cmd键入: create-react-app my-app 到这里,react的脚手架工作已经准备完毕,使用npm start启动react应用 react脚手架启动项目完毕 原文地址:https://www.cnblogs.com/xiyangcai/p/8463545.html