美文网首页Web前端之路
2020 动手写个 react (1)

2020 动手写个 react (1)

作者: zidea | 来源:发表于2020-05-07 20:51 被阅读0次
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"));

相关文章

  • 2020 动手写个 react (1)

    百度和阿里内部都是在使用 react,包括今日头条也在使用 react。似乎 vue 最近比较火,但是对于一些大型...

  • 2020 动手写个 react (2)

    我们写一段 jsx ,有关 jsx 语法这里暂不做过介绍,留下伏笔 然后将上面 jsx 通过 babel 转换为 ...

  • 2020 动手写个 react (3)

    组件 组件可能是函数还可能是类,我们知道只要继承 Component 类就是 react 的组件。 创建一个函数,...

  • 工作笔记

    react-native: 1.安卓真机调试(晃动手机)不起作用时,可以通过命令行进行调试react-native...

  • Dva最不佳实践

    前言 由于之前写了几个dva的项目,近期没怎么用有些遗忘了,写个小结记录一下。 dva是基于react、react...

  • 原生实现一个react-redux的代码示例

    自己动手实现一个react-redux之前试过自己动手实现一个redux,这篇blog主要记录动手实现一个reac...

  • 原生实现一个react-redux

    自己动手实现一个react-redux 之前试过自己动手实现一个redux,这篇blog主要记录动手实现一个rea...

  • 动手写个小程序-TodoList

    前言 前两天写过一篇关于我对小程序的看法和对未来前端发展趋势,接触小程序开发也有两周左右了,对于一个之前从来没有正...

  • 动手写个简易的Retrofit

    Retrofit简易版本 为啥要写这个? 之前一直使用OKHttp,之前修改过鸿洋的OKhttpUtils增加了缓...

  • 动手写个java快速开发框架-(1)系统日志

    在任何一个开发框架中都会涉及到日志模块,在MkFramework中同样也有日志模块,只是日志模块没有那么复杂比较简...

网友评论

    本文标题:2020 动手写个 react (1)

    本文链接:https://www.haomeiwen.com/subject/pipzghtx.html