reactJs简介
React 是Facebook开发的JavaScript 库。facebook通过Flux和React实现组件化开发。flux是系统架构,利用单向的数据流补充了React的组合试图组件。
react主要有四个主要概念构成:
- Virtual DOM
虚拟DOM在很大程度上缩短了网页的响应时间。web应用中通常会有大量的DOM操作,react在每次渲染时,会比较当前的DOM内容和待渲染内容的差异,然后再最优的更新DOM。
另外,React引入虚拟DOM更重要的意义是提供了一种一致的开发方 式来开发服务端应用、Web应用和手机端应用。因为有了虚拟DOM这一层,所以通过配备不同的渲染器,就可以将虚拟DOM的内容 渲染到不同的平台。而应用开发者,使用JavaScript就可以通吃各个平台了。
虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是 Diff部分,因而能达到提高性能的目的 - 组件化
将不同的功能模块拆分为组件,每个组件单独封装,之关心自己部分的逻辑,提高组件的可重用性,实现松耦合。
React组件名称的首字母应当大写。 - JSX
JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。
Jsx语法使用
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。 - DataFlow单向数据流
环境搭建
安装nodejs
react开发通过npm进行包管理。
项目搭建
- 新建文件夹。新建一个文件夹,比如demo
- 初始化package.json。在文件夹目录下,执行npm init,初始化一个package.json文件,这个文件中配置了项目的依赖,类似于maven中的pom.xml文件。
-
安装依赖。
有两种方法:
在package.json文件中添加dependencies和devDependencies
通过npm install --save、npm install --save-dev安装依赖,则会自动添加到package.json文件中。dependencies:react、react-dom、babel-polyfill、babel-runtime
devDependencies:webpack、webpack-cli、webpack-dev-middleware、webpack-hot-middleware、webpack-dev-server、babel-core、babel-loader、babel-preset-es2015、babel-preset-es2015-loose、babel-plugin-check-es2015-constants、babel-preset-react、babel-preset-stage-X 、react-hot-loader、expres等等。实际安装的依赖根据项目来确定。
-
创建webpack.config.js
该文件是webpack打包的配置文件。
devtool:生成source-map,使编译后的代码可读性更高,开发阶段调试使用。source-map:在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度; eval-source-map:使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定不要启用这个选项;
entry:是页面入口文件配置 (html文件引入唯一的js 文件)
output:对应输出项配置path :入口文件最终要输出到哪里, filename:输出文件的名称, publicPath:公共资源路径。
module:加载louder
test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须) loader:loader的名称(必须) include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选); query:为loaders提供额外的设置选项(可选)。
var webpack = require('webpack'); module.exports = { entry: './src/index.js',//入口文件 output: { path: __dirname + '/dist',filename: '[name].js' },module: { rules: [{ test: /\.js$/,exclude: /node_modules/,use: { loader: 'babel-loader',options: { presets:['es2015','react','stage-2'] } } },{ test: /\.css$/,use: { loader: 'style-loader!css-loader',} }] },watch:true };
-
创建文件
a). 创建index.html<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app-container"></div> <script type="text/javascript" src="dist/main.js"></script> </body> </html>
b). 创建App.js
这是一个class,所以首字母需要大写import React from 'react'; class App extends React.Component { render(){ // Every react component has a render method. return <h1>Hello World!</h1>; } } export default App;
c). 创建index.js
调用App.js,并加载到app-container中。import React from "react"; import {render} from "react-dom" import App from "./App.js" render( <App></App>,document.getElementById("app-container") )
访问index.html即可看到: