react 入门-创建元素

为了能让react在浏览器中运行,需要引入两个js库,分别是 React和ReactDom。

一、举例如下


<html>
<head>
    <meta charset="utf-8">
    <title>React Elementstitle>
head>
<body>


<div id="react-container">div>


<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>
    const sayHello = React.createElement("h1", null, "Hello World")
    ReactDOM.render(
        sayHello,
        document.getElementById('react-container')
    )
    console.log('say', sayHello)
script>

body>
html>

二、Element和Dom的对比

1、Html Element

页面的结构是由Html Element构造的。

<h1>这是个标题h1>

<div>点击获取帮助div>

h1和div都是Html Element。

2、Html Dom

在浏览器中DOM是Document Object Model (DOM) 的简写,通过document对象操作 html element,如var element = document.createElement(“div”);

3、React Element

React库提供了创建React Element的API,如下面创建一个简单的 React Element

React.createElement("h1", null, "Hello World")

或者为element添加属性:

React.createElement("h1",
{id: "header1", 'data-type': "title"}, "Hello World")

4、React Dom

React Dom操作的是React element,React Element实际上是 javascript 的 object。

通过ReactDom可以将React Element在浏览器中渲染出来。

ReactDOM.render(
        sayHello,
        document.getElementById('react-container')
    )

你可能感兴趣的:(react)