react源码分析——环境搭建

最新推荐文章于 2024-06-02 09:36:12 发布

麦乐乐

最新推荐文章于 2024-06-02 09:36:12 发布

阅读量327

点赞数

分类专栏： react专题

本文链接：https://blog.csdn.net/qq_41831345/article/details/103694581

版权

react专题专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先来初始化一个react项目看一下。

npm install create-react-app -g

create-react-app react-test

cd react-test

npm install

npm run start

我们先创建一个react项目,然后运行起来。你会看到一个这样的页面。

修改src下面的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

const ele = (
    <div>
        <h3>hello react</h3>
    </div>
)

ReactDOM.render(ele, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ele放到babel中，看下babel是怎么转移的，会什么在react项目写这样一个变量是可以的呢？

上图看到，babel,调用了React的一个方法，createElement方法，传递的是元素，属性，内容。

由此可知，React上一定存在一个createElement方法，我们先来研究一个这个方法。

接下来，我们开始自己写一个react,然后定义个createElement方法。如果我们直接在一个空文件中，创建一个js文件，写上一段jsx的代码，会发现，它是无法被识别的。所以我们需要配置环境，所谓配置环境，其实就是在babel转译的时候，可以找到对应的方法去转译。说白了，就是让我们用上面的jsx形式写代码，可以被识别，并且转换为相应的js对象。

这里我们使用parcel 打包工具初始化一个项目react-source

mkdir react-source

cd react-source

mkdir index.html

<!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>
    <div id='app'></div>
</body>
<script src="index.js"></script>
</html>

mkdir index.js

npm init

npm install parcel-bundler --save--dev

npm install babel-core babel-present-env babel-plugin-transform-react-jsx --save--dev

babel-plugin-transform-react-jsx负责将我们的jsx转换为js对象。其实质是调用react的creactElement方法，并传递给需要的参数。

新建一个.babelrc文件

{
    "presets": ["env"], // es6语法转es5用什么样的规范
    "plugins": [ // es6方法转换成es5所需要的插件
        ["transform-react-jsx", {
            "prama": "React.creatElement"
        }]
    ]
}

package.json文件

{
  "name": "react-source",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3"
  },
  "scripts": {
    "dev": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

npm run dev

http://localhost:1234/ 这个时候看到的是一个空白的页面。

我们的环境已经搭建好了，下一章我们可以开发了。

使用webpack配置也是很简单的

webpack.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader'
            }
        ]
    }

}

package.json

{
  "name": "reat-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack-cli"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

main.js

import React, { PureComponent } from "react"
import ReactDom from 'react-dom'

class App extends PureComponent {
    render() {
        return <h1>Hello word!</h1>
    }
}
ReactDom.render(App, document.getElementById('app'))

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'></div>
</body>
<script src="dist/main.js"></script>

</html>

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": [
                        ">1%" // 编译成全球占有率大于1%的浏览器都可以识别
                    ]
                }
            },
            "react"
        ],
    ],
    "plugins": [ // es6方法转换成es5所需要的插件
        [
            "transform-react-jsx",
            {
                "prama": "React.creatElement"
            }
        ]
    ]
}

npm run build 会发现编译成功了。

麦乐乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react源码分析——环境搭建

先来初始化一个react项目看一下。npm install create-react-app -gcreate-react-app react-testcd react-testnpm installnpm run start我们先创建一个react项目,然后运行起来。你会看到一个这样的页面。修改src下面的index.jsimport React from...
复制链接

扫一扫

专栏目录