chap1
1.react 声明式,组件方法改变界面,diff局部刷新无绑定,可作为V层与其他技术栈搭配
2.redux js容器 状态管理 单一数据源state被存在对象树中,state只能通过setstate方法改变,纯函数更新state
3.前后端采用统一的Universal渲染,加载速度快,利于seo
4.babel js编译工具es6->es5
5.webpack 前端资源打包和模块管理
chap2
run in node
1.编写组件
组件只有一个render函数时可以直接写为无状态函数
import React from 'react';
export default class App extends React.Component{
render(){
</h1>hello</h1>
}
}
改写为
import React from 'react';
export default function App(){
return <h1>hello</h1>
}
这里export dfeault 是方便其他模块导入import App from './App';否则要写为import {App} from './App';
2.nodejs中使用renderToString方法渲染组件成字符串 下
server.js中
import {renderToString} from 'react-dom/server';
import App from './App';
const HTML = renderToString(<App />);
console.log(HTML);
3.运行 使用 es2015和JSX时,需要使用babel进行编译
测试环境中使用babel的内建工具require hook来运行babel,原理是在require上放个hook,每次调用require时就会先进行编译和运行,因为性能原因,只会在测试环境中进行
how to use require hook
3.1 npm install babel-register --save-dev //这里可以在packages.json中查看对应安装步骤
3.2 入口文件顶部使用 require('babel-register');
3.3 安装es2015 react : npm install --save-dev babel-preset-es2015 babel-preset-react
3.4 添加.bashrc 激活es2015和react的预设 {"preset":['es2015','react']}
3.5 npm start 运行
注意:
1.安装 node npm @latest
sudo npm config set registry https://registry.npm.taobao.org
sudo npm config list
sudo npm install n -g
sudo n install npm@latest -g
2.安装
npm install --save-dev react
npm install --save-dev react-dom