react入门--组件/JSX/生命周期

React 入门

一.安装环境
https://react.docschina.org/docs/create-a-new-react-app.html
Node最好用最新版本

cnpm install -g create-react-app
create-react-app first-react-demo
npm install
npm start

查看历史版本

https://facebook.github.io/react/blog/all.html
https://cdnjs.com/libraries/react
https://github.com/facebook/react/commits/master

二.JSX
1.定义：

import React from 'react';import { render } from 'react-dom';
var myDivElement = 
;
render(myDivElement, document.getElementById('mountNode'));

注意：
HTML 里的 class 在 JSX 里要写成 className，因为 class 在 JS 里是保留关键字。同理某些属性比如 for 要写成 htmlFor。
2.使用：

import MyComponent from './MyComponet';
var myElement = ;
render(myElement, document.body);

3.使用js表达式
4.注释
5.自定义属性
如果要使用自定义属性，可以用 data- 前缀。

三.组件:

一般来说，一个组件类由 extends Component 创建，并且提供一个 render 方法以及其他可选的生命周期函数、组件相关的事件或方法来定义。
1.header.js

import React from 'react';
class Header extends React.Component{
	render(){
		return (
		

		 
这里是头部
		
		)
	}
}
export default Header;

2.bodyIndex.js

import React from 'react';
class BodyIndex extends React.Component{
	render(){
		var userName = "";
		var boolInput = false;
		return (
		

		   

		   
{userName==''?'用户还没有登录':'用户名'+userName}
		   

		
		)
	}
}
export default BodyIndex;

3.footer.js

import React from 'react';
class Footer extends React.Component{
	render(){
		return (
		

		footer
		
		)
	}
}
export default Footer;

4.app.js

import React from 'react';
import './App.css';
import ComponentHeader from  "./components/header";
import ComponentFooter from  "./components/footer";
import ComponentIndex from  "./components/BodyIndex";
//注意：主键名用大写

function App() {
	var loginState = 0;
    var componentHeader ;//注意：变量名用小写
	if(loginState==0){
	 	componentHeader = 
	}
  return (
    

		 {componentHeader}
		
		
	
  );
}

export default App;

总结：
1.组件是 React 的一个主要特性
2.组件的 return 函数里返回的 HTML 节点必须是一个
3.可以给外部使用的组件定义：
export default class ComponentHeader extends React.Component{}
4.入口的定义：ReactDOM.render(, document.getElementById(‘example’));
5.组件也可以通过参数的形式传递
6.注意项目命名的规范与文件的结构化
7.组件的 return 函数里返回的 HTML 节点必须是一个
四.生命周期