React -- HTML文件编写react

1、基本概念

要想在html文件里面书写和使用react，必需要明白三个方法和概念 React这个是react的核心语法，是关键 ReactDOM这个是react操做DOM的特殊方法，ReactDOM.render() Babel这个是解析es6语法的工具，让老旧浏览器可以识别那要获取这三个方法和概念，能够去下载响应的文件引入，也能够经过CDN引入，推荐CDN引入javascript

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

接下里就是在html文件里面建立一个根元素，这个根元素就是react用来插入并渲染全部react元素的容器html

<div id="root"></div>

最后就能够在script标签里面写react代码了，可是这里有个重点，那就是script标签的类型type，正常的script标签类型是type="text/javascript"，而通常写模板语法时，写的类型是type="text/html"，可是react的script标签的类型是type="text/babel"**记住必定要写成这个类型，不然会报错，解读不了react代码 react也是主要模块化，组件化开发，因此能够把每个功能或者方法写成一个组件，react封装组件的方法有两种： JS写法 正常的JS写法，相似于JS函数，一个函数就能够当作是一个组件，可是不一样的是react里面函数名再也不是调用函数的，而是react元素名，并且必须大写开头，由于react默认小写开头的元素为html原生语法，如div，'span'等，只有大写开头的元素才会解析成react元素（即组件），注意这个元素里面有个props对象参数，组件所须要的全部数据都是从这个参数里面获取的，key值就是在元素上自定义的值：如namejava

function App (props) {
    return (
        <h1>Hello {props.name} !</h1>
    )
}

class写法 class写法其实就是typescript的类，经过extends继承react组件，在这里面能够写react的生命周期，随意写本身想要写的东西，constructor方法是必需要有的，这个方法有个props参数，用来让App组件可使用元素上的定义的值，不然App拿不到值，而要App可以使用props，必须经过super方法挂载一下react

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render () {
        return (
            <h1>Hello {this.props.name} !</h1>
        )
    }
}

Tips 经过上面两个写法比较，能够发现有一点不一样： 1、函数写法的组件直接返回react元素，不须要render函数去渲染一下，在class方法里面渲染react元素，则须要经过render函数去转换一下 2、函数写法的组件获取props对象的数据是直接经过.方法，可是在class里面则须要经过this.props.key的方式，不能直接.方法获取es6

2、渲染react元素

想要将react元素渲染到DOM中，显示出来则须要经过ReactDOM对象的render()方法typescript

ReactDOM.render(<App name={react} />, document.getElementById('root'))

这样就至关于把建立的App这个组件渲染到了页面ID为root的根元素里面，展现在页面，至于组件里面用的数据就直接写在元素上面，注意经过{}把数据包裹起来 react组件能够嵌套的，像class这种方式是继承，嵌套的话就是在另外一个组件中想要展现另外一个组件的地方直接书写这个react组件便可浏览器