初识React一直没有系统的学习React,总是在需要的时候，找一些现成的组件或UI库使用，虽也能实现需求，但总是感觉欠

摘要

一直没有系统的学习React,总是在需要的时候，找一些现成的组件或UI库使用，虽也能实现需求，但总是感觉欠缺点什么。所以趁着现在有些空闲时间，准备系统的学习一下。

页面准备

首先准备一个HTML页面，在页面中添加一个空的DIV，作为React组件的容器，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>初识React</title>
</head>
<body>
    <!-- 加载 React -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- React 容器 -->
    <div id='root'></div>

    <!-- 加载 React 组件 -->
    <script src="./index.js" ></script>
</body>
</html>

个人观点：我认为React就是为了创建可重复使用的组件，只是组件可大可小，大到一个页面结构，小到一行文本的展示。不同组件的嵌套或重复使用就可以组成完整的页面，但对于React来说，它只是提供了构建和渲染组件的能力。

创建React组件

React支持两种写法：JSX & JS

JS

const HelloWorld = React.createElement('div', null, 'Hello World!')

JSX

const HelloWorld = (<div>Hello World!</div>);

渲染

将创建的组件渲染到页面需要调用React-Dom 提供的render方法。

// 获取组件的容器
const container = document.getElementById("root");
// 将组件添加到容器中，并渲染到页面
ReactDOM.render(HelloWorld, container);

此时打开我们的页面就会看到如下页面