React初步入门的知识整理

对于angularJS我现在不做评价，现在大热的react和vue，都是前端组件化的方向，建议入门其中任意一个。今天我就来谈谈react的初步入门咯。

简要介绍react，渲染视图的的一个javascript依赖库，不是一个MVC框架，保证组件代码的简单化，调试简单、开发简单
详细信息：中文网（http://www.css88.com/react/docs/component-specs.html）社区（http://react-china.org/）官网（https://facebook.github.io/react/）

使用react就最好基于node.js（最好版本在4.7之上，又不要太新版本），npm去管理包，与webpack、gulp一起使用，保证框架不要太重。

推荐学习多看看官方文档！！

给我感觉用react最深的便是：
1、学习react，也需要学习es6语法，学习最新的语法知识；
2、react、微信小程序、vue语法都很接近，重心都在组件上
3、react用的是虚拟DOM，这就让jquery的地位下降了很多，上手时候很不习惯
4、我总是把react组件看成一个状态机–React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态，可以轻松让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React 来决定如何最高效地更新 DOM。

复用组件需要充分讨论，然后再去开发，就能减轻工作,来看看我写的移动端的页面底部

（目前只能展示部分）配置文件：

var webpack = require('webpack');
var path = require('path');
module.exports = {
  //入口文件
  entry: {
    // index: ['./pc/resources/entry/index'],
    mobile: ['./wap/resources/entry/mobile.index'],
    footer: ['./wap/resources/entry/mobile.footer']
  },
  //输出文件
  output: {
    path: path.join(__dirname, './wap/resources/build'),
    // path: path.join(__dirname, './pc/resources/build'),
    filename: '[name].build.js'
  },
  resolve: {
    extensions: ['.css', '.js', '.jsx']
  },

footer.js：Footer组件
页面底部四个导航有两个状态：激活和未激活，
默认设置为未激活；
激活状态则是引用组件的判断，我目前是通过type：1 首页，2 vr是怎么玩的，3 玩什么vr游戏，4 我  四个模块来作区分
整个引用方式特别简单

import React, {
	Component
} from 'react';
import {
	render
} from 'react-dom';

var url = location.search;
var urlObj = url2json(url);
var type = urlObj.type ? urlObj.type : 1;
class Footer extends Component {
	constructor(props) {
		super(props);
		this.state = {
			index: props.index,
			items: [{
				img: "/src/img/mobile/home.svg",
				_href: '/?type=1',
				title: '首页',
				_class:''
			}, {
				img: "/src/img/mobile/video.svg",
				_href: "/vr_video?type=2",
				title: '游戏视频',//游戏视频
				_class:''
			}, {
				img: "/src/img/mobile/game_gray.svg",
				_href: "/vr_app?type=3",
				title: '游戏',//游戏
				_class:''
			}, {
				img: "/src/img/mobile/account.svg",
				_href: "/account?account=1&type=4",
				title: '我',
				_class:''
			}]
		};
	}

	render() {
		const items = this.state.items.map(function(item, i) {
			if (i+1==this.state.index) {
				item._class="color-yellow";
				switch (+this.state.index) {
					case 1:
						item.img = '/src/img/mobile/home_yellow.svg';
						break;
					case 2:
						item.img = '/src/img/mobile/video_yellow.svg';
						break;
					case 3:
						item.img = '/src/img/mobile/game_yellow.svg';
						break;
					case 4:
						item.img = '/src/img/mobile/account_yellow.svg';
						break;
				}
			}

			return (
				<a href={item._href} key={item.title}>
			<img src={item.img} alt="vr榜单"/><br/>
			<span className={item._class}>{item.title}</span>
			</a>)
		}, this);

		return (
			<div className="footer-container">
		{items}
		</div>
		);
	}
}

render(<Footer index={type}/>, document.getElementById('footer'));

欢迎分享本文，转载请保留出处：前端ABC » React初步入门的知识整理