1.react入门之Hello,React

1.在网页中添加react

<div id="app"></div>

<!-- React核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- React扩展库 操作Dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- babel转化jsx -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<!-- babel转化   不写type默认转化成javascript-->
<script type="text/babel"> 
	//创建虚拟Dom的二种方法
	const VDOM=<h1>Hello,React</h1>//此处一定不要写引号，因为不是字符串,多级结构可以加( 
		//<h1>
		//	Hello,React
		//</h1>
	//)
	ReactDOM.render(VDOM,document.getElementById('app'))
</script>

如何使用变量呢？

let data=[1,2,3,4,5,6];
const VDOM=(
	<h1>{data}</h1>
)

在这里使用大括号表示要插入变量，并且显示

在React种如何遍历呢？

//这里我们选择具有返回值的表达式
let data=[1,2,3,4,5,6];
const VDOM=(
	<h1>{
		data.map((item,index)=>{
			return <li>{item}</li>
			//注意：在这里依旧使用大括号表示插入变量，当然在这里我们需要给每个li提供一个唯一的key(key主要作用于新老虚拟Dom对比渲染)
			//要不然会报：Each child in a list should have a unique "key" prop. (key)怎么加呢？  <li key={index}>{item}</li>
		})
	}</h1>
)

组件渲染
组件：一般包括主体,样式与行为
创建组建的二中方式1（函数创建(现阶段还暂不推荐使用)）

function Dome(){
  //在这里我们使用的是函数组件 此时我们如何让他包括主题内容呢？  当然我们可以使用return
  return (
  	<h1>我是函数组件</h1>
  )
}
	//依旧使用上面提到过的这行代码创建
  ReactDOM.render(<Dome  />, document.getElementById('app'));

你看 页面正常显示
创建组建的二中方式2（类创建(经常使用)）

//类组件

/*
在es6中我们可以通过calss创建类并且可以通过extends继承父类的属性与方法,当然在这里react也是如上一套操作。
在react中想要通过类创建组件都需要 extends React.Component(继承)
*/
//es6中类的定义与继承
//定义类
class Point {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  toString() {
   ...
  }
}
//类的所有方法都定义在类的prototype属性上面(先记住这句话)
// toString等同于
Point.prototype = {
  toString(){},
};
//我们也可以使用new 关键字创建实例并传入参数
let p = new Point('张三',18);
//此时我们通过constructor构造方法给当前实例p添加属性,当然我们通过p就能访问到name或者age属性
//当然 class也不存在变量提升
new Foo(); // ReferenceError
class Foo {}

//类的继承 extends 
class Foo extends Point {}
//此时Foo也会拥有着与Point 相同的属性与方法,当然 Foo也可以对自身添加属性与方法
class Foo extends Point {
 constructor(name, age,eat) {
  	super(name,age);//在这里使用super表明继承父类属性, 一定要这么写
  	this.eat= eat;
  }
}
//此时 Foo 实例就会拥有name, age,eat三个属性了

按照我们以上所想那么我们的类组件可以写成这样子

let data=[1,2,3,4,5,6]
class Dome extends React.Component {
            constructor(){
            }
            render() {
            //在这里这个render其实已经放到Dome 原型对象上了,供实例使用
                return (
                    <h2>
                        {
                            data.map((item,index)=>{
                                return <li >{item}</li>
                            })
                        }
                    </h2>
                )
            }
        }
        ReactDOM.render(<Dome  />, document.getElementById('app'));
         /*
            执行ReactDOM.render(<Dome/> 后：
                1.React解析组件标签,找到了Dome组件
                2.发现组件是使用类定义的,随后new出来该类的实例,并通过实例调用到原型上的rende方法
                3.将render返回的虚拟dom转化为真实dom，随后呈现在页面上
        */

后续会接着更新…