2020 动手写个 react (1)

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 项目 使用 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 = ( ) ) "use strict"; const ele = /*#__PURE__*/React.createElement("div", { className: "box", size: "25" }, "hello ", /*#__PURE__*/React.createElement("span", null, "zidea"));

本文章由javascript技术分享原创和收集