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 条评论
登录 后参与评论

相关文章

来自专栏IT可乐

Linux 安装mysql

使用 yum 安装源码包(必须有网络) 1、输入如下安装命令,安装过程中输入 y yum install mysql-server -y 2、查看mysql 服...

2436
来自专栏偏前端工程师的驿站

Vim杂记:markdown插件

一、安装插件                                 从以下地址下载压缩包   github下载:https://github.com...

18610
来自专栏王二麻子IT技术交流园地

《跟我学IDEA》二、配置maven、git、tomcat

上一篇博文我们讲解了如何去下载并安装一个idea,在这里我们推荐的是zip的解压版,另外我们配置的一些编码和默认的jdk等。今天我们来学习配置maven、git...

2217
来自专栏西安-晁州

nodejs中引入art-template模板

使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便。没关系,这里我们...

2600
来自专栏西安-晁州

使用bee自动生成api文档

beego中的bee工具可以方便的自动生成api文档,基于数据库字段,自动生成golang版基于beego的crud代码,方法如下: 1、进入到gopath目录...

3260
来自专栏高爽的专栏

如何实现"设为首页","加入收藏"的功能

如何实现"设为首页","加入收藏"的功能   解决思路:          将指定URL设为首页的功能主要是依靠IE默认行为homePage的setHomePa...

2090
来自专栏高爽的专栏

IE下用JavaScript将HTML导出为Word、Pdf

       最近升级公司内部系统发文章的功能,涉及到将文章内容导出为html、word、pdf,系统多用于IE环境下,并且公司电脑都预装了office,所以导...

2210
来自专栏运维前线

使用Gitlab创建git项目

使用Gitlab创建git项目 登录gitlab系统,访问自己的gitlab.example.com,然后使用gitlab用户,登录 ? 第一次登录需要重新修改...

4028
来自专栏IT可乐

本机向windows服务器传输文件的三种方法

  闲来无事,在腾讯云上申请了一个免费的服务器,想将自己写的网页发布到服务器上,服务器的申请很简单,百度搜索 腾讯云 ,然后新人第一次注册能申请到免费一个月的云...

2249
来自专栏惨绿少年

练习题四

第1章 练习题 1.1 每天晚上 12 点,打包站点目录/var/www/html 备份到/data 目录下(最好每次备份按时间生成不同的备份包) 1.1.1 ...

2060

扫码关注云+社区