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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180103G0QUZU00?refer=cp_1026

扫码关注云+社区