《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选项 ...
随机推荐
- 解决supervisord启动问题
作者:StormerX链接:https://www.jianshu.com/p/d8901ce4712b来源:简书简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处. $ superv ...
- 【51nod1792】Jabby's segment tree
题目 线段树是一种经典的数据结构,一颗[1,n]的线段树他的根是[1,n],当一个线段树的结点是[l,r]时,设mid=(l+r)>>1,则这个结点的左儿子右儿子分别是[l,mid],[m ...
- Python 文件I/O Ⅳ
Python里的目录: 所有文件都包含在各个不同的目录下,不过Python也能轻松处理.os模块http://www.xuanhe.net/有许多方法能帮你创建,删除和更改目录. mkdir()方法 ...
- Linux 查看内存条数据和大小命令
查看内存条数据和大小命令: sudo dmidecode | grep -A16 "Memory Device$" 需要root 权限.. [life@localhost mp3b ...
- libkmcuda安装
编译安装 1,前期准备 git clone https://github.com/src-d/kmcuda cd kmcuda/src/ 例如: cmake -DCMAKE_BUILD_TYPE=Re ...
- 随机验证码生成和join 字符串
函数:string.join() Python中有join()和os.path.join()两个函数,具体作用如下: join(): 连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符) ...
- [转] Linux环境变量配置文件以及启动顺序
转自:https://blog.csdn.net/bjnihao/article/details/51775854 一.环境变量配置文件: 对所有用户都起作用 /etc/profile /etc/pr ...
- codevs 1405 牛的旅行x
牛的旅行 [问题描述] 农民John的农场里有很多牧区.有的路径连接一些特定的牧区.一片所有连通的牧区称为一个牧场.但是就目前而言,你能看到至少有两个牧场不连通.现在,John想在农场里添加一条路径 ...
- R_Studio中对xls文件学生总成绩统计求和
我们发现这张xls表格是没有学生总分的,在xls文件中计算学生总分嫌麻烦时,可以考虑在R Studio中自定义R Script脚本来解决实际问题(计算每个学生的总成绩) .xls数据表中的数据(关键信 ...
- jmxtrans + influxdb + granafa 监控套件使用手册
需求说明 随着大数据组件的日益完善,需要随时随地保持各个组件的日常运行,对各个组件的监控势在必行.为了减少运维部门的负担,通过筛选,我们使用 jmxtrans + influxdb + granafa ...