使用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. Wide-Bandgap宽禁带(WBG)器件(如GaN和SiC)市场将何去何从?

    Wide-Bandgap宽禁带(WBG)器件(如GaN和SiC)市场将何去何从? Where Is the Wide-Bandgap Market Going? 电力电子在采用宽禁带(WBG)器件(如 ...

  2. UiPath中恢复依赖项失败的解决方法

    目录 序言 正文 什么是依赖包? 如何查看项目使用了哪些版本的依赖包? 一.项目内查看 二.查看项目的 JSON 文件 问题根源 解决方法 一.「等」字诀 二.切换网络环境(根治) 三.手动复制依赖包 ...

  3. 【NX二次开发】NX内部函数,pskernel.dll文件中的内部函数

    pskernel.dll文件中的内部函数,含有部分pk函数,用法可以查看pk函数帮助: ADPAPE ADVXED APPTRA ATGETO ATTGEO BLECHK BLECRB BLECVR ...

  4. 【NX二次开发】 获取产品曲面上多个点对应的面的垂直矢量!

    说明:选择一个产品面,选择面上的点,生成点在此面上的法线反向,生成直线.生成矢量的起点坐标,和矢量方向信息.可用于三坐标测量,如果需要可以自己编个插件用! 效果图: 源码: //----------- ...

  5. 【NX二次开发】修改dlx对话框标题的方法

    修改dlx名称, 修改对话框标题的方法: theDialog->TopBlock()->FindBlock("Dialog")->GetProperties()- ...

  6. 【二分 贪心】覆盖问题 BZOJ1052 HAOI2007

    覆盖问题 bzoj1052 题目来源:HAOI 2007 题目描述 某人在山上种了N棵小树苗.冬天来了,温度急速下降,小树苗脆弱得不堪一击,于是树主人想用一些塑料薄膜把这些小树遮盖起来,经过一番长久的 ...

  7. 为什么switch里的case没有break不行

    前言 一个小姐姐拿着一个switch的选择题来问我. 之所以这么笃定地回答这个问题,并不是我知道其中原理,而是之前在一个群里,有人问了同类型的问题,我瞥了一眼记住了答案,所以才依葫芦画瓢. 小姐姐接着 ...

  8. 详解Redis主从复制原理

    文章首发于公众号 "蘑菇睡不着" 前言 Redis 的主从复制和 MySQL 差不多,主要起着 数据备份,读写分离等作用.所以说主从复制对 Redis 来说非常重要,而无论是面试还 ...

  9. 春风十里不如你,全新Windows UI 3(WinUI 3) 的第一个实现Project Reunion 0.5

    什么是WinUI Windows UI库 (WinUI) 是适用于 Windows 桌面应用程序和 UWP 应用程序的本机用户体验 (UX) 框架. WinUI is a user interface ...

  10. HDU 1686 Oulipo kmp裸题

    kmp算法可参考 kmp算法 汇总 #include <bits/stdc++.h> using namespace std; const int maxn=1000000+5; cons ...