react基础

react的安装

首先，react需要两个第三方模块，react、react-dom
其中，react是核心库，react-dom则是负责将react生成的内容渲染到页面上

# 初始化项目
npm init -y
#安装模块
npm i react react-dom

react的简单使用

<!-- 引入模块 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

<script>
	
	const title = React.createElement('h1', null, 'Hello react')
	
	ReactDOM.render(title, document.getElementById('root'));
	
</script>

React.createElement方法其实就是用于创建元素，类似document.createElement，但是前一个方法参数会更多，先来简单说说。
第一个参数是标签名，第二个是配置参数，可以不填，第三个则是标签内容。
其中标签内容是可以内嵌元素的，比如：

const content = React.createElement('p', null, 'Hello react')

const title = React.createElement('div', null, content)

上面的代码其实就是一个div内嵌了一个p标签，p标签的内容则是‘hello react’

如果你学过vue，你会发现它和vue的h函数很类似。

react的脚手架

react的脚手架可以让我们快速搭建项目

npx create-react-app <project-name>

使用npx可以不用在全局安装create-react-app模块

npm install create-react-app -g
create-react-app <project-name>

#启动
cd <project name>
npm start

脚手架中和引入React和ReactDOM的方式和常规方式不太一样。同样用上面的例子，我们在新建的项目中的index.js文件中编辑如下内容

import React from 'react';
import ReactDOM from 'react-dom';

const title = React.createElement('h1', null, '我是react')

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

就可以实现同样的效果，这里的import是es6中引入模块的语法。