React.js入门基础一

React

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

下面是为什么在你选择之前需要再考虑一下：(摘录)

一开始 React 会极大地减慢你的开发。理解props、state以及组件通信如何工作并不是很简单，并且文档信息错综复杂。理论上，这将会被克服，你的整个团队都上道之后，开发速度上就会有一个很大的提升。
React 不支持 IE8 以下的任何浏览器，以后也绝不会。
如果你的应用/站点不需要频繁的动态页面更新，你可能为了很小的功能而编写大量的代码。
你会改造很多轮子。React 很年轻，并且因为没有权威的方式来处理事件、组件通信，你必须从零开始创建大量的组件库。你的应用是否有下拉菜单，可调整大小的窗口，或者 lightbox？你同样必须从零开始写这些。

安装方式：

1. 通过bower安装

#npm install -g bower   安装bower工具
#cp /mnt/code/
#bower install react

安装完成后在/mnt/code/下生成一个bower_components的文件。

2. 源码包下载此处只提供了React.js中文站点（http://facebook.github.io/react/）

解压得到两个文件夹： build(react 核心文件) examples

概念理解：

希望大家帮忙查阅：有关React相关工作方式。

JSX ： JavaScript 的XML的语法扩展

开始使用React：

此处我就简单的使用××× 0.13

1.在项目目录下新建index.html，内容如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>React.js Study</title>
</head>
<body><div id="app"></div><script src="build/react.js"></script><!--让浏览器直接编译JSX--><script src="build/JSXTransformer.js"></script><script type="text/jsx">   // 本章节的重点，就在次行// 定义web组件var MessageBox = React.createClass({alertMessage:function (){alert('Fuck谁点我呢！');},render:function (){return (<h1 onClick={this.alertMessage}>hello my world!</h1>); //  霸气的就是没有引号 , 如果函数加上（） ，会发生什么，怎么传参数？}});// 渲染React.render(<MessageBox/> , document.getElementById('app'), function (){console.log('渲染成功！真的');    // 输出到控制台，you should known where it is.});</script>
</body>
</html>

用谷歌浏览器打开，看看效果吧！（提示：审查元素，看看DOM哦）

The End

转载于:https://blog.51cto.com/90design/1660623

React.js入门基础一相关推荐

React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
React.js 入门与实战课程思维导图
原文发表于我的技术博客我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客此导图为课程 ...
D3.js入门基础教程
什么是"框架" 什么是"应用程序" DOM (文档对象模型(Document Object Model) D3 (1)下载 D3.js 的文件 (2)直接包含网 ...
前端框架React Js入门教程【转】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
【React】React Js入门教程(一学就会)
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
React Native入门基础使用总结
1.router: react-native-router-flux 基于react-navigation/native 二次封装 2.字体图标:react-native-vector-icons(推 ...
angular.js入门基础（一）
AngularJS 简介 AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购.是一款优秀的前端 JS 框架,已经被用于 Google 的 ...
js入门基础知识（一）
js的能力: 1.JavaScript 能够改变 HTML 内容(JavaScript 同时接受双引号和单引号:) document.getElementById("demo"). ...

React.js入门基础一

React.js入门基础一相关推荐

最新文章

热门文章