React 学习笔记

React 学习笔记

Wednesday, 03. January 2018 04:45PM

react 基于nodejs环境。

一、环境安装

nodejs下载地址 使用LTS版本下载即可。

二、预备知识

安装了node之后,就安装了npm软件包管理功能,它能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

1)允许用户从npm服务器下载别人编写的第三方包到本地使用。

2)允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。

3)允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。

三、开始使用

1.创建目录及项目名(myapp)

2.初始化完成后,开始编写自己的项目

1) 创建目录

2) 编写代码

main.js 内容如下:

index.html 内容如下:

3.添加css

app/style.css文件

webpack本身只能处理 js模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader。

css-loader 会遍历 css 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 css 代码插入页面中的一个 style 标签中。

3.打包(webpack)工具使用

webpack是一个前端资源加载/打包工具,可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

1) 安装webpack

说明:

install 可以缩写为i

-g 安装全局包

2) 使用webpack

a. 上述例子使用webpack打包命令如下:

b. 另外一种方式是编辑配置文件

3) webpack一些插件

例子生成的bundle.js添加备注信息

项目内安装webpack

打包后,可以看到在bundle.js头部带有”webpack实例”注释信息

四、开发环境

webpack通过参数让编译的输出内容带有进度和颜色。

方便开发,可以启动监听模式。

大多数情况下使用webpack-dev-server 开发服务,启动服务后,服务会实时监控代码改动并编译。

默认地址为:http://localhost:8080/

1) 安装webpack-dev-server

2) 启动服务

本文来自企鹅号 - OS4U媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件测试经验与教训

session与cookie的区别详解

由于HTTP协议是无状态的,在WEB系统中,怎么识别请求来自于哪里呢?是哪一个用户发起的请求呢?

13210
来自专栏C/C++基础

Linux系统相关配置

为了使程序在崩溃时产生core文件,我们经常在终端使用命令ulimit -c unlimited 来设置。但是当前设置只能在当前会话有效,当关闭当前会话,打开新...

9720
来自专栏从零学习云计算

kubernetes工作记录(2)——基于release工程的kubernetes1.7.3 rpm包的编译生成

使用release工程编译的方式,生成kubernetes1.7.3的rpm包。 虚拟机环境为Centos7.2。 安装git # yum -y install...

24900
来自专栏惨绿少年

linux中必会的目录

第1章 find命令扩展 1.1 方法一 |xargs 通过|xargs将前面命令的执行结果传给后面。 [root@znix ~]# find /oldboy/...

30400
来自专栏实战docker

Docker下,极速体验编译pinpoint1.6.x分支

pinpoint是一款优秀的APM监控工具(Application Performance Management),用java编写的,用于分布式系统的监控和调用...

364100
来自专栏Script Boy (CN-SIMO)

PowerShell:因为在此系统上禁止运行脚本

在安装chocolatey(官网)的时候,不能运行chocolateyInstall.pal脚本文件。 ? 查阅资料后,得出如下解决办法: 首次在计算机上启动 ...

36700
来自专栏.NET开发那点事

关于WCF服务在高并发情况下报目标积极拒绝的异常处理

最近弄了个wcf的监控服务,偶尔监控到目标服务会报一个目标积极拒绝的错误。一开始以为服务停止了,上服务器检查目标服务好好的活着。于是开始查原因。 一般来说目标积...

23760
来自专栏惨绿少年

练习题二上

第1章 linux启动过程 1、开机自检bios 2、mbr引导 3、GRUB 菜单:选择不同的内核 4、加载内核 5、运行init进程 6、读取/etc/in...

26300
来自专栏实战docker

Docker下HBase学习,三部曲之二:集群HBase搭建

上一章《Docker下HBase学习,三部曲之一:极速体验》我们快速体验了单机版HBase提供的基础服务,接下来我们实战HBase集群环境的搭建。 集群规划 首...

59180
来自专栏哎_小羊

windows上 nginx 配置代理服务,配置多域名,以及最简单实现跨域配置

Nginx,不用多说啦,大家都熟悉的不能再熟悉了,它是一款轻量级的高性能Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,最近在本地研究...

47890

扫码关注云+社区

领取腾讯云代金券