react and reduct 学习手记1

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