React 入门 (1)

Submitted by Lizhe on Mon, 03/05/2018 - 10:07

本文将讨论如下问题

•Nodejs, NPM, Server, React 之间的关系

•异步IO模型

•FR Admin 项目结构

•如何从头创建一个自己的React项目

•React的模块化思想

•什么是JSX

 

Node.js 就是运行在服务端的 JavaScript(java)

webpack-dev-server是一个小型的Node.js Express服务器(tomcat)

NPM是随同NodeJS一起安装的包管理工具(mvn)

React主要用于构建UI

 

syncio

 

 

每线程/每请求的方式目前还被Apache所采用.

Node通过事件驱动的方式处理请求,无须为每个请求创建额外的对应线程, 可以省掉创建线程和销毁线程的开销, 同时操作系统在调度任务时,因为线程较少, 上下文切换的代价很低. 这使得服务器能够有条不紊地处理请求, 即使在大量连接的情况下,也不受线程上下文切换开销的影响

缺点也很明显, 无法胜任Cpu密集型工作

 

801

 

每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
npm install <package_name> --save 表示将这个包名及对应的版本添加到 package.json的 dependencies
npm install <package_name> --save-dev 表示将这个包名及对应的版本添加到 package.json的 devDependencies

802

 

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX,但它有以下优点:

JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的,在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

<div className="collapse navbar-collapse" id="navbarCollapse">
<div  style={{paddingTop:45}}>Project:</div>

 

803

 

class CreateNewIssueButton extends React.Component {
      ……
}

var LoginDiv = React.createClass({
      ……
})

 

804