使用Parcel零配置创建React应用
2019-01-04 本文已影响0人
我也不知道啊丶
第一步：创建项目,初始化
mkdir react-demo
cd react-demo
npm init -p 或者 yarn init -p
npm init 会问你一连串问题，全部按回车键跳过设置默认选项即可。
第二步：添加 React、Babel 和 Parcel 的依赖。
npm install --save react
npm install --save react-dom
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-env
npm install --save-dev parcel-bundler
第三步：创建 .babelrc 文件，这个文件告诉 Parcel 我们使用了 ES6 和 React JSX。
touch .babelrc
open .babelrc
然后设置文件内容
{
"presets": ["env", "react"]
}
第四步：创建项目文件
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react-dom</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<script src="./main.js"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="root">
</div>
</body>
</html>
js
let number = 0;
function add(){
number += 1;
render()
}
function minus(){
number -= 1;
render()
}
render()
function render(){
ReactDOM.render(
<div>
<span>{number}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
</div>,
document.getElementById('root')
)
}
第五步：在 package.json 中添加 script 脚本，用于启动我们的应用。
"scripts": {
"start": "parcel index.html",
},
第六步：运行
npm start
或者
parcel index.html
确保你的 node 版本大于等于 8.0.0，之后可以在浏览器中输入 http://localhost:1234 看到应用的内容。
