react 引入html文件_React -- HTML文件编写react

一、基本概念

要想在html文件里面书写和使用react，必须要明白三个方法和概念

React这个是react的核心语法，是关键

ReactDOM这个是react操作DOM的特殊方法，ReactDOM.render()

Babel这个是解析es6语法的工具，让老旧浏览器能够识别

那要获取这三个方法和概念，可以去下载响应的文件引入，也可以通过CDN引入，推荐CDN引入

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

最后就可以在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值就是在元素上自定义的值：如name

function App (props) {

return (

Hello {props.name} !

)

}

class写法

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

class App extends React.Component {

constructor(props) {

super(props)

}

render () {

return (

Hello {this.props.name} !

)

}

}

Tips

通过上面两个写法比较，可以发现有一点不同：

1、函数写法的组件直接返回react元素，不需要render函数去渲染一下，在class方法里面渲染react元素，则需要通过render函数去转换一下

2、函数写法的组件获取props对象的数据是直接通过.方法，但是在class里面则需要通过this.props.key的方式，不能直接.方法获取

二、渲染react元素

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

ReactDOM.render(, document.getElementById('root'))

这样就相当于把创建的App这个组件渲染到了页面ID为root的根元素里面，展示在页面，至于组件里面用的数据就直接写在元素上面，注意通过{}把数据包裹起来

react组件可以嵌套的，像class这种方式是继承，嵌套的话就是在另一个组件中想要展示另一个组件的地方直接书写这个react组件即可