2020 动手写个 react (1)
2020-05-07 本文已影响0人
zidea
coding
百度和阿里内部都是在使用 react，包括今日头条也在使用 react。似乎 vue 最近比较火，但是对于一些大型项目我们还是需要react，vue 轻巧灵活更合适一些小型的项目。而且 react 是给我带来全新 virtual dom 概念。最近收集了一些资料边学边自己实现一个 react 。
react_vs_vue
parcel
parcel.jpg
项目构建工具这里选择 parcel 而不是 webpack，为什么选择 parcel 因为 parcel 无需配置(也就是所谓 zero configuration)就可以轻松构建 web 前端项目。并不是说 webpack 不好，webpack 依然强大，webpack 是一个 c# 后端开发人员写的。有时候我们跨界研发可能会带来一些惊喜，这也就是我们为什么学习 go 和 rust。使用 npm 全局安装 parcel 后就可使用 parcel index.html命令构建项目。然后浏览器地址栏输入localhost:1234就可以进行开发，有关 parcel 的分享会单独给大家谈一谈这个打包工具。
npm install -g parcel-bundler
今天我们主要围绕 react, react-dom 和 react-scrit
react
基本 API 都会保存在这里，是 react 核心包
react-dom
react-dom 可以将虚拟 dom 转换为真实 dom 进行渲染
react-scripts
打包工具
mkdir zi_react
创建一个 zi_react 的 web 项目
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
使用 npm 初始化一个项目npm init -y，然后项目下安装 parcel-bundler
npm install parcel-bundler --save-dev
安装 babel 插件，将 jsx 语法转换为 js 对象
npm i babel-core babel-preset-env babel-plugin-transform-react-jsx --save-dev
安装好依赖后，我们来配置一下 .babelrc文件
touch .babelrc
{
"presets": [
"env"
],
"plugins": [
["transform-react-jsx", {
"prama": "React.createElement"
}]
]
}
接下工作就是在 npm 中配置来自动执行 parcel 脚本
"scripts": {
"start": "parcel index.html"
},
const ele = (
const ele = (
<div className="box" size="25">
hello <span>zidea</span>
</div>
)
)
"use strict";
const ele = /*#__PURE__*/React.createElement("div", {
className: "box",
size: "25"
}, "hello ", /*#__PURE__*/React.createElement("span", null, "zidea"));
