# React

# 环境搭建

# 方式一（webpack）

npm i babel-core babel-loader babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

配置 .babelrc文件

{
    "presets": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}

1
2
3
4

# 方式二

yarn add react react-dom babel-standalone

<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.js"></script>

<script type="text/babel">
    const el = <div>123</div>
    ReactDOM.render(el, document.getElementById('root'))
</script>

1
2
3
4
5
6
7
8