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中引入模块的语法。