《React+Redux前端开发实战》笔记3:基于Webpack构建的Hello World案例(下)
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案例(下)的更多相关文章
- 《React+Redux前端开发实战》笔记2:基于Webpack构建的Hello World案例(上)
这次搭建分为两部分:一部分是前期必要配置,一部分是开发React代码. [基于Webpack的React Hello World项目] 1.前期必要配置 (1)首先要确保读者的开发设备上已经安装过No ...
- 《React+Redux前端开发实战》笔记1:不涉及React项目构建的Hello World案例
本小节实现一个不涉及项目构建的Hello World. [React的第一个Hello World网页] 源码地址:https://jsfiddle.net/allan91/2h1sf0ky/8/ & ...
- React前端有钱途吗?《React+Redux前端开发实战》学起来
再不学React就真的跟不上大前端的形式了,目前几乎所有前端的招聘条件都是精通React者优先,看看拉勾网的React薪资,都是15K-20K,这个暑假,必须动起来了. 如果你熟悉JavaScript ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- React Native移动开发实战-4-Android平台的适配原理
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...
- React Native移动开发实战-3-实现页面间的数据传递
React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...
- React Native移动开发实战-2-如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...
随机推荐
- gulp 自动化构建网站(版本号静态资源)
前言 新的一年啦,感觉总是静不下心,用了一天的时间吧,算是对gulp 这个前端打包工具入门了,自己也写了demo,表示对这个稍微理解了吧, 当然还是有差距的啦,下面讲讲怎么用吧: 如何用 当然先去官网 ...
- 2017 去哪儿网 研发4.18(offer)
去哪儿网一面(30分钟) 上来小哥哥先让自我介绍,然后开始问基础,说你计算机专业的,数据结构应该比较扎实吧,先写个快排.然后在我写的时候,小哥哥mac上敲敲打打,应该在看git,我简历上有留git的地 ...
- UML中的类图及类图之间的关系
统一建模语言简介 统一建模语言(Unified Modeling Language,UML)是用来设计软件蓝图的可视化建模语言,1997 年被国际对象管理组织(OMG)采纳为面向对象的建模语言的国际标 ...
- node 的path
1.文档:http://nodejs.cn/api/path.html 2.path.normalize() 规范化给定的 path,解析 '..' 和 '.' 片段. 当路径不规范时,用来返回一 ...
- 悲观锁,乐观锁以及MVCC
在上文中,我们探讨了MySQL不同存储引擎中的各类锁,在这篇文章中我们将要讨论的是MySQL是如何实现并发控制的.并发问题有三种,分别为: 读-读,不存在任何问题 读-写,有隔离性问题,可能遇到脏读( ...
- Confluence 6 文件
通过将你的文件上传到 Confluence 能够让你在一个统一的地方分享你项目小组的 PDF 文件,Office 文档,图片以及更多的内容. 自动版本,即时预览,权限控制和全文搜索意味着在网络驱动器上 ...
- 51 Nod 大鱼吃小鱼
1289 大鱼吃小鱼 题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游 ...
- C++入门经典-例6.15-通过字符串函数连接两个字符数组
1:代码如下 // 6.15.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- mysql 查询每个分组的前几名
按分组排序,并查出每个分组的前3名 单表 SELECT * FROM ( SELECT ZONEID, uid, NAME, fight, IF ( , ) AS rank, ( @zone := z ...
- ctf活动结果
签到题:flag{0ca175b9c0f726831d895e269332461} 解题过程:使用winhex打开图片,查询到ANSI ASCII 得到结果 1.SimCTF{hello simple ...