job-react 基础知识回顾1

react 是什么 ?

*帮助你构建UI 的库

^Facebook 出品,专注view层

^一切皆组件

^全部使用ES 6语法

React16是第一个核心代码 重写的版本 ,整体API 变化不大

npm install --save react@next react-dom@next

React 基础语法

React 的Hello world

*import react

*class语法新建组件,render里直接使用.

*render函数返回值就是输出JSX语法,会把JSX 转成js来执行.

Jsx的基本语法

*React 的View层语法

**js里直接写html

**Class要写成 ClassName

**变量要用{}包裹

*一切都是组件

*通过属性传递 实现组件通信

*类实现组件 ,使用JSX 语法

import React from "react"

class App extends React.Component{
render(){
const leader = "Kormma!!!"
return (
<div>
<h2>魔鬼队伍SKT T1 ,Coach{leader}</h2>
<Faker></Faker>
<Bang></Bang>
<Bengi></Bengi>
<Impact></Impact>
<Wolf></Wolf>
</div>
)
}
}

class Faker extends React.Component{
render(){
const leader = "李湘菏!!!"
return <h2>队长,{leader}</h2>
}
}

class Bang extends React.Component{
render(){
const leader = "Bang!!!"
return <h2>队员,{leader}</h2>
}
}

class Bengi extends React.Component{
render(){
const leader = "Bengi!!!!"
return <h2>打野,{leader}</h2>
}
}

class Impact extends React.Component{
render(){
const leader = "Impact"
return <h2>上单,{leader}</h2>
}
}

class Wolf extends React.Component{
render(){
const leader = "Wolf"
return <h2>辅助,{leader}</h2>
}
}

export default App