React: React脚手架
一、简言
React开发目前已经非常流行,对于如何实现对React项目的管理和维护,React生态圈出现了大量可用的开发工具,例如Browserify、Gulp、Grunt、webpack等。其中,webpack称为CommonJS模块的主流工具之一,它是一个模块绑定器,拥有模块化和网络性能的两大优点,可以将不同类型的文件转换为单个文件,也可以将所有的依赖项打包成单个文件。当然,使用webpack管理React,开发者需要通过命令行去安装webpack和Babel,然后对webpack进行配置。相比于之前的web开发模式,使用webpack开发,开发者不用再去关心转译等问题,安心开发即可,效率更高。技术不断更新,工具层出不穷,React团队很快推出了一个可以自动生成React项目的命令行工具create-react-app,使得开发者不用再去手动配置webpack、Babel等,就可以快速启动React项目,也称为React脚手架,真是懒人开发的极致了。安装后的脚手架如图示:
二、安装
1、安装软件包create-react-app,它已经完成了React环境搭建
npm install -g create-react-app
2、在指定目录下创建React项目
//进入指定目录
cd ./xxx/xxx //创建React项目,reactProject为项目名称
//项目创建后,三个依赖库:React/ReactDOM/react-script都已经被引入进去了,而且,Babel、webpack等工具默认也已经完成了安装,无需开发者手动去配置
create-react-app reactProject
3、运行React项目
//以交互模式执行项目中的所有测试文件
//npm test 或者 yarn test //打包一个准备上线的bundle文件,其中的代码已经经过转译和压缩
//npm run build 或者 yarn build //启动项目,可以看到网页打开了: http://localhost:3000/
npm start 或者 yarn start
三、示例
1、创建项目react-demo
2、进入目录运行项目
3、页面启动运行成功
四、结构
使用webStorm打开项目,项目结构很清晰。在生成的项目文件夹中,可以看到包含App.js文件的src文件夹,开发者在这里,可以编辑root组件,以及导入其他组件文件进行后续的开发。
React: React脚手架的更多相关文章
- React/VUE 脚手架2.0和3.0
react官方脚手架 npm install -g create-react-app create-react-app my-app cd my-app npm start 区别自己对比 vue2.x ...
- 自制的React同构脚手架
代码地址如下:http://www.demodashi.com/demo/12575.html Web前端世界日新月异变化太快,为了让自己跟上节奏不掉队,总结出了自己的一套React脚手架,方便日后新 ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表-b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- React: React组件的生命周期
一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...
- React: React的属性验证机制
一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...
- React/react相关小结
React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...
- 如何解决 React 官方脚手架不支持 Less 的问题
说在前面 create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Les ...
随机推荐
- Android-再次解读萤石云视频
### 前言 我之前写过一篇萤石云的集成文章,很多人问我有没有demo, 今天我再次总结一下, 并加个些功能. - 集成步骤 - 视频预览播放 - 视频放大缩小 - 视频的质量切换 - 截图 - 视频 ...
- 使用shell脚本查看数据库负载情况
原创 Oracle 作者:jeanron100 时间:2014-05-23 08:56:26 8912 2 平时在查看数据库的问题时,会有种迷茫的感觉,如果没有任何人反馈问题,基本上没有主动查找问 ...
- diango运行流程
diango运行流程 Django处理一个请求的流程: 在浏览器的地址栏中输入地址,回车,发了一个GET请求 wsgi模块接收了请求,将请求的相关信息封装成request对象 根据地址找到对应函数 执 ...
- C# 类库项目 无法创建 “资源字典” 文件
1.接触WPF有两个月时间了,准备自己写一个样式库,在vs新建 类库项目后无法创建资源字典. 2.解决办法: 打开项目工程文件 ( project.csproj) 在 <Proper ...
- October 06th, 2019. Week 41st, Sunday
Life is very capricious. 生命无常. Is life capricious? Maybe. But we can still make life a little more c ...
- 关于css里决定样式优先级的权重
最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...
- Java类BufferedImage
https://docs.oracle.com/javase/7/docs/api/java/awt/image/BandedSampleModel.html
- 【Linux命令】用户身份(useradd,groupadd,usermod,passwd,userdel)
目录 用户身份 useradd userdel usermod groupadd groupdel passwd chage 用户身份 在linux系统中和windows一样有用户之分.root用户为 ...
- Web安全测试学习笔记-DVWA-存储型XSS
XSS(Cross-Site Scripting)大致分为反射型和存储型两种,之前对XSS的认知仅停留在如果网站输入框没有屏蔽类似<script>alert('ok')</scrip ...
- eclipse_neon 的Spket 目录下只有一个Task Tags,没有其他的选项,导致没有办法添加提示文件! 添加sdk文件之后还是没有办法显示的解决办法
问题解决办法: 将 spket-1.6.23的安装包里面的features plugins 单独复制到D:\eclipse_neon\dropins 目录下,重启一下eclipse即可正常显示! 添 ...