首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React 学习笔记

React 学习笔记

作者头像
企鹅号小编
发布2018-01-04 14:57:03
6890
发布2018-01-04 14:57:03
举报
文章被收录于专栏:企鹅号快讯企鹅号快讯

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媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文来自企鹅号 - OS4U媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档