react基础

react使用

react的组件与vue不同，react的组件文件是 .jsx后缀或者js也行。 而vue是.vue后缀
单个组件的基本使用

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from 'react'

// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
import ReactDOM from 'react-dom' （一般将这句话放入index.js文件当中）

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
<h1>欢迎进入React的世界</h1>,
// 渲染到哪里
document.getElementById('root')
)

 import React from 'react'
 import ReactDOM from 'react-dom'
// 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需要加 {}，包括注释也是一样，并且可以多层嵌套
const app = (props) => <h1>欢迎进入{props.name}的世界</h1>
ReactDOM.render(
   app({
      name: 'react'
}),
document.getElementById('root')
)

函数式组件写法（也叫无状态组件，pureComponent）
这里我们定义的方法实际上也是react定义组件的第一种方式-定义函数式组件，这也是无状态组件。但是这种写法不符合react的jsx的风格，更好的方式是使用以下方式进行改造

	import React from 'react'
	function TodoHeader () {
	return  (
		<header className="bar bar-nav">
		<a className="icon icon-star pull-left"></a>
		<a className="icon icon-edit pull-right"></a>
		<h1 className="title">TODO_LIST</h1>
		</header>
	  )
	}
	export default TodoHeader
	
	这样一个完整的函数式组件就定义好了。但要**注意！注意！注意！**组件名必须**大写**，否则报错。大驼峰命名法
  还有其他函数式写法
       
	import React from 'react'
	import './index.css'
	const TodoFooter= function (){      //这里还可以写成es6的箭头函数写法
	return (
		<ul className="todo-footer">
		<li className="button">A</li>
		<li className="button">F</li>
		<li className="button">U</li>
		</ul>
	   )
	}
	export default TodoFooter

class组件     
   import React from 'react'
   import './index.css'
   class Home extends React.Component{
	render () {
	  return(
		<div className="content">
			<div className="card">
				<div className="card-content">
				        <div className="card-content-inner">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。
				           </div>
				</div>
			</div>
		<div className="card">
			<div className="card-content">
				<div className="card-content-inner">第二个</div>
				</div>
			</div>
		</div>
       )
   }
}
export default Home

元素与组件
如果代码多了之后，不可能一直在render方法里写，所以就需要把里面的代码提出来，定
义一个变量，像这样：

import React from 'react'
import ReactDOM from 'react-dom'
// 这里感觉又不习惯了？这是在用JSX定义一下react元素
const app = <h1>欢迎进入React的世界</h1>
ReactDOM.render(
   app,
   document.getElementById('root')
)

更老的一种方法创建组件
在16以前的版本还支持这样创建组件, 但现在的项目基本上不用

  React.createClass({
  	render () {
  		return (
  		<div>{this.props.xxx}</div>
  		  )
  	}
  })

组件的组合和嵌套

由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包
一个容器，如果使用div, 会生成多余的一层dom,
如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹