文档
react-dom(提供了可在应用顶层使用的DOM（特定于DOM）方法): https://zh-hans.reactjs.org/docs/react-dom.html
组件: https://zh-hans.reactjs.org/docs/components-and-props.html#composing-components
Github: https://github.com/develon2015/eg-React
webpack安装
React主要用于Web浏览器和原生应用, 因此划分为几个库: 核心库react, 浏览器渲染库react-dom, 原生库react-native.
我们来看Web浏览器的安装和使用:
npm i -D react # 提供核心类, 如: Component基类
npm i -D react-dom # 提供ReactDOM对象, 主要有render()函数
创建第一个React组件
创建HTML文件index.html:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, React</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
创建入口index.js:
import './index.html';
import './style.css';
import ReactDOM from 'react-dom';
import { createElement } from 'react';
document.body.innerHTML = `<div id="app"></div>`;
function myTitle(title) {
return createElement('h1', {
style: { color: '#880088', userSelect: 'none', cursor: 'pointer' },
className: 'bg-pink no-margin',
onClick() {
console.log('你点击了标题');
},
}, title || '这是一个标题');
} //
ReactDOM.render(myTitle(), app); // app === document.getElementById('app')
现在我们创建了第一个函数式React组件, 如何修改组件内容呢? 修改函数参数重新挂载到容器即可:
let count = 0;
function render() {
requestAnimationFrame(render);
ReactDOM.render(myTitle(`计数${++count}`), app); // app === document.getElementById('app')
}
render();
现在标题动起来了:
dist安装
<!-- 加载 React。-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<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>
<!-- 部署时构件。-->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
通过改写, 下面的代码可以正常运行:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, React</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<script>
const { createElement } = React;
document.body.innerHTML = `<div id="app"></div>`;
function myTitle(title) {
return createElement('h1', {
style: { color: '#880088', userSelect: 'none', cursor: 'pointer' },
className: 'bg-pink no-margin',
onClick() {
console.log('你点击了标题');
},
}, title || '这是一个标题');
}
let count = 0;
function render() {
requestAnimationFrame(render);
ReactDOM.render(myTitle(`计数${++count}`), app); // app === document.getElementById('app')
}
render();
</script>
</body>
</html>
JSX
JSX是一种基于babel的语法糖工具, 提供将HTML模板形式的代码编译为createElement函数.
主要在Node.js平台下使用.
在html中启用JSX:
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
使用JSX的<script>标签需要添加type="text/babel".
Node.js平台下的安装方法: https://zh-hans.reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
JSX是可选的
使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。
官方文档: https://zh-hans.reactjs.org/docs/react-without-jsx.html