React学习笔记---项目构建

简介

  ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具。

  今天要介绍一款工具,同时包含一个构建项目模板的工具,对于初学者来说,就有了一个可以学习、开发、测试的平台。

Yeoman

  官方的介绍是这样形容的:“Web App的脚手架工具” --- Yeoman的目的是帮助用户更好的启动项目,提供最好的实践和工具使用户保持高生产率。

  Yeoman提供了一个生成器的生态系统,并提供了一个“Yeoman的工作流”,这个工作流集成了三大部分:

  - 脚手架工具Yo 

  职责:管理包依赖、记录构建配置信息等

  项目地址:https://github.com/yeoman/yo

  ?

  - 构建工具Grunt

  职责:构建工具,比较流行的有Grunt和Gulp

  项目地址:http://gruntjs.com/

http://gulpjs.com/

  

  - 包管理器Bower

  职责:包依赖管理工具,避免手动安装,比较流行的有Bower和npm

  项目地址:http://bower.io/

       https://www.npmjs.com/

  

项目构建

  以Mac下为例:

  1. 启动terminal,然后进入到指定目录下:

  npm install -g yo

  2. 安装生成器(generator):

  npm install -g generator-react-fullstack

  3. 构建React-fullstack项目模板:

  yo react-fullstack

  4. 启动项目页面:

  npm start

   5. 打开浏览器:

模板结构

  模板结构最好的就是参照官方给出的内容,这里就不一一举例了。

  Ract-starter-kit 官方地址:https://github.com/kriasoft/react-starter-kit

.                   # 根目录
├── /build/                     # 编译输出目录
├── /docs/                      # 项目相关文档目录
├── /node_modules/              # 3D部分和工具目录
├── /src/                       # 代码源目录
│   ├── /actions/               # Actions目录
│   ├── /api/                   # REST API目录
│   ├── /components/            # React组件目录
│   ├── /constants/             # Constants (action types etc.)
│   ├── /content/               # Static content 静态内容目录(plain HTML or Markdown, Jade, you name it)
│   ├── /core/                  # Core components 核心组件(Flux dispatcher, base classes, utilities)
│   ├── /decorators/            # Higher-order React components高级别的React组件库
│   ├── /public/                # Static files which are copied into the /build/public folder静态文件库
│   ├── /stores/                # Stores contain the application state and logic程序运行时状态和逻辑仓库
│   ├── /utils/                 # Utility classes and functions工具类和方法
│   ├── /app.js                 # Client-side startup script客户端启动脚本
│   ├── /config.js              # Global application settings全局设置
│   ├── /routes.js              # Universal (isomorphic) application routes通用的应用程序路由
│   └── /server.js              # Server-side startup script服务端启动脚本
├── /tools/                     # Build automation scripts and utilities自动构建脚本及工具
│   ├── /lib/                   # Library for utility snippets工具提示库
│   ├── /build.js               # Builds the project from source to output (build) folder从源码编译输出
│   ├── /bundle.js              # Bundles the web resources into package(s) through Webpack通过Webpack将资源打包
│   ├── /clean.js               # Cleans up the output (build) folder清理输出文件夹
│   ├── /webpack.config.js      # Configurations for client-side and server-side bundles配置客户端和服务端打包工具
│   ├── /copy.js                # Copies static files to output (build) folder拷贝静态文件
│   ├── /deploy.js              # Deploys your web application发布Web程序
│   ├── /serve.js               # Launches the Node.js/Express web server启动服务
│   └── /start.js               # Launches the development web server with "live reload"启动开发模式,带有时时更新
│── package.json                # The list of 3rd party libraries and utilities3D部分列表
└── preprocessor.js             # ES6 transpiler settings for Jest ES6的Jest设置

更多资料

@小狼的世界-Yeoman介绍:http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html

Yeoman官方地址:http://yeoman.io/

时间: 2025-01-15 17:10:07

React学习笔记---项目构建的相关文章

React学习笔记 - 组件&Props

React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件接收props,返回react元素. 1. 函数定义\类定义组件 最简单组件方式 - 函数定义组件: // 函数定义组件 function Welcome(props) { return <h1>Hello, {props.name}!</h1>

React学习笔记-1-什么是react,react环境搭建以及第一个react实例

什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢? 

我的学习笔记——搭建构建unikernel的环境:Unik

pre.ctl { font-family: "Liberation Mono", monospace } p { margin-bottom: 0.25cm; line-height: 120% } code.ctl { font-family: "Liberation Mono", monospace } a:link { } 我的学习 笔记 2017/9/25 一. 搭建Unik的开发环境 去到官方教程网址:https://github.com/cf-unik

【入门篇】Android学习笔记——项目结构及相关基础知识

Android项目具有其自身的结构规范,完好的遵循结构规范,可以让开发事半功倍.下图分别从Android视图和Project视图展示了Android项目的项目结构: 图中左侧是Android视图,右侧是Project视图.从两个结构图的对比,可以发现Android视图更加关注Android开发工作,而Project视图更加关注整体结构,虽然两个视图有一些不同,但主体结构并没有什么区别. 接下来,主要通过Android视图,描述一下Android项目中各个目录的用途和含义,明白Android视图中

Xitrum学习笔记02 - 构建 Xitrum 项目

参考的文档的位置: 1. http://xitrum-framework.github.io/guide/3.28/html/en/  (需要选择合适的版本,我选的是3.28,目前没有中文版) 可以选择Download PDF,下载英文Guide xitrum-en.pdf 2. API ScalaDocs: http://xitrum-framework.github.io/api.html  选择3.27即可 注意:在国内访问Xitrum官网实在是慢得要死,还请自备FQ软件 开始自己构建Xi

react学习笔记(一)

在开篇之前,先来说说选择react的初衷. 一个初学者,在开始选择深入了解一个框架之前,我查阅了一些资料,做出了对三大框架的一些基本分析. 1.数据流.Vue和Angular都是支持双向数据绑定,也就是在界面的操作能实时反映到数据,数据的变更能实时显示在界面上.Vue默认为单向数据绑定.React支持单向数据绑定,也就是说给定一个原始的页面,之后添加一些组件化操作,得到一个变化后的页面. 2.组件化.Vue和React都支持组件化.组件,即对一些数据和方法的封装,它可以用来构建用户页面,并通过任

React学习笔记-8-属性和状态详解

属性的含义和用法props=properties 英文中属性的意思.属性不可以修改,也就是属性不可以由组件进行修改,组件的属性是由父组件传递过来的,相当于组件在出生的时候带的. 用法第一种:直接在调用组件的时候传入一个键值对,  这个键值对可以是字符串: <HelloWorld name="李明"></HelloWorld> 可以是大括号:大括号本质上是一个js的求值表达式,里面可以写很多内容,最简单的就是写数据,直接拿到的数字 <HelloWorld n

react学习笔记-06

1.在调用setState之后发生了什么? 在代码调用setState之后,React会将传入的参数对象与组件当前状态合并,然后触发调和过程.在调和过程中,react会以相对搞高效的方式根据新的状态构建DOM树,在构建DOM的时候,react会比较新的DOM树和老的DON树的节点差异,然后根据差异对界面进行最小化重渲染.在Diff 算法中,React能够精确的知道哪些位置发生了改变以及该如何改变,这就保证了按需更新,而不是全部更新. 2.React中element与compoent的区别 Rea

React学习笔记_01

使用Facebook的create-react-app快速构建React开发环境 前言: create-react-app:来自Facebook官方的零配置命令行工具 create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板,有助于初学者快速上手实践.安装create-react-app的方式也非常简单,可以直接使用npm命令进行全局安装. npm install -g create-react-app