资讯专栏INFORMATION COLUMN

React入门系列 - 2 编写第一个Hello world的React程序

PingCAP / 3175人阅读

摘要:安装必要的开发包安装两个包安装编写一个的首先我们编写一个的组件但是这仅仅是一个组件,我们需要一个页面来容纳的组件。到这一步,需要准备的东西已经完成了。

2.1 采用create react app 编写

create-react-app项目 [[点击前往Github]](https://github.com/facebook/c... 是facebook推出的入门初始化项目,适合新手第一次使用,无需进行各种配置,完美的实现了开箱即用理念。

2.1.1 建立项目
npx create-react-app my-app
cd my-app
npm start

npx命令是npm在5.x版本之后推出的一个增强功能,它帮助开发者可以临时下载项目进行执行之后,会自动删除这个临时下载的项目。不会在全局项目中生成文件。

上面的命令,表示,下载create-react-app项目,并且运行这个项目,在my-app目录中创建新项目。

2.1.2 运行项目

创建完成之后,进入 my-app 目录。执行npm语句,进行本地开发预览。

我们进入这个创建好的文件夹my-app,执行npm run start即可进入本地开发预览了。

如图所示,我们已经在本地端口3000上运行了这个程序。快打开你的浏览器查看一下吧。

2.2 手动配置webpack编写

这个章节有点超纲,有兴趣的同学可以仔细阅读一下。这一节是针对有兴趣深入了解的同学的,如果你现在一下子还是无法理解这些知识,建议后面再来回顾。

2.2.1 建立项目

我们首先创建一个webpack-app文件夹。然后使用VS Code打开这个目录。
使用Ctrl+~键打开控制台,如果无法打开说明热键已经被占用了。点击菜单的 查看 -> 终端

第一步先输入npm init 建立前端项目的配置文件。

直接一路回车到结束。

2.2.2 安装必要的开发包

安装react,react-dom两个包

npm install --save-dev react react-dom

安装webpack

npm install --save-dev webpack-cli webpack webpack-dev-server
2.2.3 编写一个react的hello world

首先我们编写一个HelloWorld的React组件

import React, { PureComponent } from "react"

export default class index extends PureComponent {
  render() {
    return (
      
Hello world React!
) } }

但是这仅仅是一个组件,我们需要一个HTML页面来容纳React的组件。




    
    
    
    Helloworld React


    

到这一步,React需要准备的东西已经完成了。

我们需要来编写webpack对这个项目进行打包,而webpack对开发提供的DevServer的支持,让我们来看一看,到底怎么做的。

我们在项目根目录中创建一个名为"webpack.config.js"的文件。

const path = require("path")

module.exports = {
    mode:"development",
    entry: "./src/index.js",
    context: __dirname,
    target: "web",
    devServer: {
        proxy: {},
        contentBase: path.join(__dirname, "public"),
        historyApiFallback: true,
        hot: true,
        noInfo: true,
        port: 3000
    }
}

配置完webpack.config.js文件之后,我们将在packageInfo.json中的scripts节点加入一个新的命令。

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server"
  },

我们在终端运行npm run dev之后,你将会在控制台中看到如下内容。

webpack编译之后告诉我们,它无法识别JSX格式。这个问题就延伸出了,我们该如何对现代化的前端进行配置。

现在对于前端代码的转换,通常采用的是babel转译。我们来看看编译react需要哪些插件。点此查看babel如何配置webpack

首先,我们需要安装babel,在终端输入npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

我们修改webpack.config.js文件,让他看起来像这样

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    mode: "development",
    entry: "./src/entry.js",
    context: __dirname,
    target: "web",
    devServer: {
        proxy: {},
        contentBase: path.join(__dirname, "public"),
        port: 3000
    },
    module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(
            Object.assign({}, {
                inject: true,
                template: __dirname + "/public/index.html",
            })
        ),
    ]
}

在根目录创建.bablerc文件,这个文件是用于配置babel编译的,在文件中输入以下内容。

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

不知道你是否注意到了,我修改了entry入口文件。因为仅仅一个React组件并无法正常运行,我们需要告知React框架,我们将组件注入在哪个DOM下,这个文件可以配置全局的Store、路由、全局的设定等。我们在src目录下创建entry.js,下面是entry.js文件的源码。

import React from "react";
import ReactDOM from "react-dom";
import Index from "./index";

ReactDOM.render(, document.querySelector("#app"));

代码非常的简单,就是调用ReactDOM将React组件渲染到了id为app的节点下。

OK,现在我们再次运行npm run dev,你将会看到webpack编译成功的提示,我们现在打开浏览器,输入http://localhost:3000,你将会看到运行编译成功的网页。

2.2.4 webpack加入HMR支持(热更新)

大家有没有发现,我们现在这个项目修改了之后,是需要刷新整个页面的。并没有那种很高端很大气的动态刷新?

现在我们就将热更新加入我们的项目中。

我们将webpack.config.js文件做如下修改

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack")

module.exports = {
    mode: "development",
    entry: [
        "webpack/hot/dev-server",
        "./src/entry.js"
    ],
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    context: __dirname,
    target: "web",
    devServer: {
        proxy: {},
        contentBase: path.join(__dirname, "public"),
        hot: true,
        port: 3000
    },
    module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(
            Object.assign({}, {
                inject: true,
                template: __dirname + "/public/index.html",
            })
        ),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
}

注意到了么,我们新增了NamedModulesPluginHotModuleReplacementPlugin两个插件。还在devServer节点中加入了hot:true,并且追加了output节点。

然后,我们将entry.js文件修改为这样:

import React from "react";
import ReactDOM from "react-dom";
import Index from "./index";

ReactDOM.render( < Index / > , document.querySelector("#app"));
if (module.hot) {
    module.hot.accept()
}

我们再次使用npm run dev运行项目,然后修改index.js文件中的字符串,你会发现,现在是无刷新更新页面内容了。

2.2.5 webpack优化打包速度

我们在package.jsonscripts节点中加入一条新语句"webpack":"webpack",然后来看一看现在项目默认的打包速度是多少时间。

耗时:2211ms

2.2.5.1 babel缓存

我们修改webpack.config.js文件中的babel配置项

 module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel-loader?cacheDirectory=true"
        }]
    },

babel-loader后面加入了cacheDirectory=true,再次执行编译,第一次你会发现速度并没有优化,这是因为还没有建立缓存文件,但是第二次速度就提升了20%。

耗时:1644ms (-500ms)

其他的包括抽取公共组件,加入hash等等策略我们以后再细聊。

源码下载地址:https://github.com/yodfz/learn-webpack-react-config

原文地址:https://www.yodfz.com/detail/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100885.html

相关文章

  • React入门系列 - 3 state与props

    摘要:而主要被设计用于维持组件内部私有状态。初始化初始化需要在中进行。对于的定义为请求修改某个数据,而的实现则是将对变量的修改放入一个修改队列中,在一个循环之后进行批量更新结果深入点涉及的更新机制。推出了与版本之后推出来的就是为了解决这些问题的。 3.1 什么是state 我们要认识到,React中的组件其实是一个函数,所以state是函数内部的私有变量,外部其他组件或者方法都是无法直接访问...

    henry14 评论0 收藏0
  • 【全栈React2天: 什么是 JSX?

    摘要:代表基本上是常规。第次更新,在年完成。几乎完全支持所有主要的浏览器。但这将是一段时间,直到较旧版本的浏览器逐步停止使用。这意味着将转换为。在组件的情况下,写入的将如下所示在我们在第一个作出反应组件使用的语法是语法。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3797原文:https://www.fullstackreact....

    Eirunye 评论0 收藏0
  • 【全栈React1天: 什么是 React?

    摘要:本文转载自众成翻译译者链接原文今天,我们从一开始就开始。让我们看看是什么,是什么让运转起来。什么是是一个用于构建用户界面的库。它是应用程序的视图层。所有应用程序的核心是组件。组件是可组合的。虚拟完全存在于内存中,并且是网络浏览器的的表示。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3765原文:https://www.ful...

    ralap 评论0 收藏0
  • ReactJs入门教程

    摘要:组件关注的只应该是状态,不同的状态呈现不同的表现形式。组件一切都是组件倡导开发者将切分成一个个组件从而达到松耦合及重用的目的。只不过的命名是进入状态之前跟进入状态之后。 前端已不止于前端-ReactJs初体验 原文写于 2015-04-15 https://github.com/kuitos/kuitos.github.io/issues/21 要说2015年前端届最备受瞩目的技术是啥...

    bingo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<