2.使用React编码

下面正式开始使用React来编写前端代码。

(1)npm安装react和react-dom:

npm install react react-dom -S

(2)用下面代码替换./src/index.jsx中的console:

import React from 'react';

import { render } from 'react-dom';

class App extends React.Component {

  render () {

    return <p> Hello React</p>;

  }

}

render(<App/>, document.getElementById(‘app'));

(3)在根目录下执行:

./node_modules/.bin/webpack -d

现在浏览器打开index.html将会在页面展示Hello World。当然真实开发中不能每一次修改前端代码就执行一次Webpack编译打包,可以执行如下命令来监听文件变化:

./node_modules/.bin/webpack -d —-watch

终端将会显示:

myfirstapp Jack$ ./node_modules/.bin/webpack -d --watch

webpack is watching the files…

Hash: 6dbf97954b511aa86515

Version: webpack 4.22.

Time: 839ms

Built at: -- ::

    Asset      Size  Chunks             Chunk Names

bundle.js  1.87 MiB    main  [emitted]  main

Entrypoint main = bundle.js

[./src/index.jsx] 2.22 KiB {main} [built]

    +  hidden modules

这就是Webpack的监听模式,一旦项目中的文件有改动,就会自动执行Webpack编译命令。不过浏览器上展示的HTML文件不会主动刷新,需要读者手动刷新浏览器。如果想实现浏览器自动刷新,可以使用react-hot-

loader(https://github.com/gaearon/react-hot-loader)。

(4)真实项目开发中,一般使用npm执行./node_modules/.bin/webpack -d —watch这个命令来开发。这需要在package.json中配置:

{

  // ...

    "scripts": {

        "dev": "webpack -d --watch",

        "build": "webpack -p",

        "test": "echo \"Error: no test specified\" && exit 1"

  },

  // ...

}

(5)现在只需要在根目录下执行如下命令就能开发与构建:

npm run dev

npm run build

以上为真实项目中一个较为完整的项目结构,读者可以在此基础上根据项目的需要自行拓展其他功能。本例源码地址为https://github.com/khno/react-hello-world,分支为master。项目完整的结构如下:

.

├── build

│   └── bundle.js

├── index.html

├── package-lock.json

├── package.json

├── src

│   └── index.jsx

├── .gitignore

├── .babelrc

└── webpack.config.js

《海贼王》中罗杰说,每个人都有自己出场的机会!在将来,React可能会在前端历史的浪潮中被人遗忘,但今天,React的设计思想影响了无数的开发者,当下正是属于它的时代!!

《React+Redux前端开发实战》笔记3:基于Webpack构建的Hello World案例(下)的更多相关文章

  1. 《React+Redux前端开发实战》笔记2:基于Webpack构建的Hello World案例(上)

    这次搭建分为两部分:一部分是前期必要配置,一部分是开发React代码. [基于Webpack的React Hello World项目] 1.前期必要配置 (1)首先要确保读者的开发设备上已经安装过No ...

  2. 《React+Redux前端开发实战》笔记1:不涉及React项目构建的Hello World案例

    本小节实现一个不涉及项目构建的Hello World. [React的第一个Hello World网页] 源码地址:https://jsfiddle.net/allan91/2h1sf0ky/8/ & ...

  3. React前端有钱途吗?《React+Redux前端开发实战》学起来

    再不学React就真的跟不上大前端的形式了,目前几乎所有前端的招聘条件都是精通React者优先,看看拉勾网的React薪资,都是15K-20K,这个暑假,必须动起来了. 如果你熟悉JavaScript ...

  4. webpack+react+redux+es6开发模式---续

    一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...

  5. React Native移动开发实战-4-Android平台的适配原理

    打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...

  6. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  7. React Native移动开发实战-5-Android平台的调试技巧

    Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...

  8. React Native移动开发实战-3-实现页面间的数据传递

    React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...

  9. React Native移动开发实战-2-如何调试React Native项目

    在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...

随机推荐

  1. gulp 自动化构建网站(版本号静态资源)

    前言 新的一年啦,感觉总是静不下心,用了一天的时间吧,算是对gulp 这个前端打包工具入门了,自己也写了demo,表示对这个稍微理解了吧, 当然还是有差距的啦,下面讲讲怎么用吧: 如何用 当然先去官网 ...

  2. 2017 去哪儿网 研发4.18(offer)

    去哪儿网一面(30分钟) 上来小哥哥先让自我介绍,然后开始问基础,说你计算机专业的,数据结构应该比较扎实吧,先写个快排.然后在我写的时候,小哥哥mac上敲敲打打,应该在看git,我简历上有留git的地 ...

  3. UML中的类图及类图之间的关系

    统一建模语言简介 统一建模语言(Unified Modeling Language,UML)是用来设计软件蓝图的可视化建模语言,1997 年被国际对象管理组织(OMG)采纳为面向对象的建模语言的国际标 ...

  4. node 的path

    1.文档:http://nodejs.cn/api/path.html 2.path.normalize()   规范化给定的 path,解析 '..' 和 '.' 片段. 当路径不规范时,用来返回一 ...

  5. 悲观锁,乐观锁以及MVCC

    在上文中,我们探讨了MySQL不同存储引擎中的各类锁,在这篇文章中我们将要讨论的是MySQL是如何实现并发控制的.并发问题有三种,分别为: 读-读,不存在任何问题 读-写,有隔离性问题,可能遇到脏读( ...

  6. Confluence 6 文件

    通过将你的文件上传到 Confluence 能够让你在一个统一的地方分享你项目小组的 PDF 文件,Office 文档,图片以及更多的内容. 自动版本,即时预览,权限控制和全文搜索意味着在网络驱动器上 ...

  7. 51 Nod 大鱼吃小鱼

    1289 大鱼吃小鱼  题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游 ...

  8. C++入门经典-例6.15-通过字符串函数连接两个字符数组

    1:代码如下 // 6.15.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...

  9. mysql 查询每个分组的前几名

    按分组排序,并查出每个分组的前3名 单表 SELECT * FROM ( SELECT ZONEID, uid, NAME, fight, IF ( , ) AS rank, ( @zone := z ...

  10. ctf活动结果

    签到题:flag{0ca175b9c0f726831d895e269332461} 解题过程:使用winhex打开图片,查询到ANSI ASCII 得到结果 1.SimCTF{hello simple ...