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) 启动服务