使用create-react-app创建react应用

react脚手架
1) xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
  a. 包含了所有需要的配置
  b. 指定好了所有的依赖
  c. 可以直接安装/编译/运行一个简单效果
2) react提供了一个用于创建react项目的脚手架库: create-react-app
3) 项目的整体技术架构为: react + webpack + es6 + eslint
4) 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动

npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start

react脚手架项目结构

ReactNews
|--node_modules---第三方依赖模块文件夹
|--public
|-- index.html-----------------主页面
|--scripts
|-- build.js-------------------build打包引用配置
|-- start.js-------------------start运行引用配置
|--src------------源码文件夹
|--components-----------------react组件
|--index.js-------------------应用入口js
|--.gitignore------git版本管制忽略的配置
|--package.json----应用包配置文件
|--README.md-------应用描述说明的readme文件

react应用(基于react脚手架)的更多相关文章

  1. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  2. 基于React实现的【绿色版电子书阅读器】,支持离线下载

    代码地址如下:http://www.demodashi.com/demo/12052.html MyReader 绿色版电子书阅读器 在线地址:http://myreader.linxins.com ...

  3. 基于React的贪吃蛇游戏的设计与实现

    代码地址如下:http://www.demodashi.com/demo/11818.html 贪吃蛇小游戏(第二版) 一年半前层用react写过贪吃蛇小游戏https://github.com/ca ...

  4. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  5. 七天接手react项目 系列 —— react 脚手架创建项目

    其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...

  6. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  7. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

  8. 基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统

    很久没更新博客,最近也有点忙,然后业余时间搞了一个比较完整基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统的流程系统,希望对 ...

  9. 基于React Native的移动平台研发实践分享

    转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ...

随机推荐

  1. 微信架构 & 支付架构(上)

    微信架构 & 支付架构(上) 一. 微信和支付宝对比 这两者现在已经占领了移动支付的90%市场,支付形式也都大抵相同,只是在实现细节上略微不同.这里之所以要专门对比,是因为有些接口的不同在后边 ...

  2. TensorFlow损失函数

    TensorFlow损失函数 正如前面所讨论的,在回归中定义了损失函数或目标函数,其目的是找到使损失最小化的系数.本文将介绍如何在 TensorFlow 中定义损失函数,并根据问题选择合适的损失函数. ...

  3. CodeGen概述

    CodeGen概述 CodeGen是在协同开发环境中工作的软件开发人员可以用来生成源代码的工具.该代码可能是Synergy DBL代码,也可能是其他语言的源代码.CodeGen并不局限于为任何特定的开 ...

  4. 为什么edge AI是一个无需大脑的人

    为什么edge AI是一个无需大脑的人 Why edge AI is a no-brainer 德勤预计,到2020年,将售出超过7.5亿个edge AI芯片,即在设备上而不是在远程数据中心执行或加速 ...

  5. mybatis学习——日志工厂

    为什么要使用日志工厂? 我们想一下,我们在测试SQL的时候,要是能够在控制台输出 SQL 的话,是不是就能够有更快的排错效率?答案是肯定的,如果一个 数据库相关的操作出现了问题,我们就可以根据输出的S ...

  6. 使用regulator_get时的一个小注意事项

    Linux kernel 使用 regulator 框架来管理电源,比如 PMIC 芯片上常见的LDO.使用 regulator 的常规流程如以下代码所示: void set_vbus_voltage ...

  7. 【NX二次开发】获取视图当前的剪辑边界UF_VIEW_ask_current_xy_clip()

    UF_VIEW_ask_current_xy_clip()这个函数网上还没有详细的说明,我花了一点时间,详细得理解了一下函数返回的4个值的意思,作为一个猜想,希望有人能验证一下. 获取视图当前的剪辑边 ...

  8. SQL 利用存储过程实现对表数据有则更新无则添加(转)

    初学存储过程,发现这篇文章简单易懂,特意转载,地址 http://blog.csdn.net/luotuomianyang/article/details/52013144 如果某一操作包含大量的T- ...

  9. 在微信小程序中使用阿里图标库Iconfont

    首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...

  10. excel VBA构造函数就是这么简单

    Function test(a As Integer)'构造函数名字为test参数为a且为int型  If a >= 90 Then     Debug.Print "优秀" ...