2020 动手写个 react (1)

作者 : 开心源码 本文共1467个字,预计阅读时间需要4分钟 发布时间: 2022-05-13 共136人阅读

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"));
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 2020 动手写个 react (1)

发表回复