react基础 react起步、使用CDN引入、脚手架搭建

发表于 更新于 分类于 ， ， 阅读次数： Changyan： 本文字数： 1.6k 阅读时长 ≈ 1 分钟
react基础 react起步、使用CDN引入、脚手架搭建

react起步、使用CDN引入、脚手架搭建

CDN地址

开发环境

1
2
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

生产环境

1
2
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

react库

React.createElement()

创建一个React元素，虚拟DOM，本质是一个对象。

  1. 参数一：元素类型，如果是字符串，表示一个HTML元素（本质还是对象）;
  2. 参数二：元素的属性，是一个对象;
  3. 后续参数：元素的子节点
1
2
3
4
5
6
const span = React.createElement('span', {}, '一个span元素')
const h1 = React.createElement('h1', {
    title: '第一个react样例',
    id: 'test'
}, 'hello', ' world', span)

react-dom库

ReactDOM.render()

将react元素渲染到指定的位置，将虚拟的DOM变成真实的DOM

  1. 参数一： 要渲染的react元素
  2. 参数二：要渲染的位置，可以使用dom选择器选中
1
2
3
4
5
6
7
const span = React.createElement('span', {}, '一个span元素')
const h1 = React.createElement('h1', {
    title: '第一个react样例',
    id: 'test'
}, 'hello', ' world', span)

ReactDOM.render(h1, document.getElementById('react'))

JSX JS扩展语法

要使用babel进行转义

1
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
1
2
3
4
5
6
<script type="text/babel">
    const h1 =
    <h1>Hello World <span>span 标签</span></h1>
    ReactDOM.render(h1, document.getElementById('react'))
</script>

使用脚手架来搭建react

官方脚手架：create-react-app
第三方：next.js、umijs

1
npx  create-react-app project_name