脚本宝典收集整理的这篇文章主要介绍了react入门学习笔记(一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
这两天得空,特意来折腾了以下时下火热的前端框架react,至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论,也就不妄加评论了。选择react的主要原因大概是因为该框架出现较早,感觉上会相对成熟,日后学习中遇到问题想要查找答案相对简单一些,对,就是这么简单。
在官网文档做了简单了解之后我,我想作为初学者首先还是从react基本知识了解,当然其中涉及到JSX语法和ES6的相关知识,这些我没有太深入了解,毕竟还是要跟着学习react的主线来走的,跟着官方给的例子,大致了解用法就行,这个不难实现。至于网上说的react全家桶之类的,作为初学者,我暂时也是没去理会的。多说无益,接下来开始react的学习,我按照我学习中带着的问题来一一解答,完成我的入门笔记。
一、react在实际开发中能给我们带来什么样的便捷
学一个新的库或者新的框架,我总是先联合实际,明白了我将要学习的东西能给我带来什么,我才能有目的地去学习。不知道大家是否也是一样。react主要是针对前端UI的组件化开发。就是前端的一个页面包括Header,Content,footer,等等元素都可以是react里面的一个组件,可以多次重复使用。如果大家做过页面开发就知道,固然有bootstrap这样的布局神器,为我们搭建网页节省了不少时间,但是想要做到一个组件的多次重复使用依然是很难的。所以react正是来解决这个问题的,至于如何解决相信往下看了实际的例子就能明白了。
二、学习react需要了解的一些概念
1、react的安装
本人最忌麻烦,所以没有从react官网下载文件,直接用的网上的资源,一心一意写dome,本文的例子引用下面三个文件就可以了:
<script src="https://cdn.bootcss.COM/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
2、react中的最小单元组件的概念、创建方式
组件是react中用于呈现到页面的元素,组件可大可小,下面是我所知道的四种创建方法:
/*
* 组件定义方法一
*/
//react元素也可以用来表示组件
//const element = <h1>Hello World</h1>
// ReactDOM.render(
// element,
// document.getElementById('example')
// );
/*
* 组件定义方法二
*/
//定义组件最简单的方法就是定义一个javascript函数
// function Welcome(props){
// return <h1>Hello {props.name}</h1>;
// }
// const element = <Welcome name="huanglw" />
// ReactDOM.render(
// element,
// document.getElementById('example')
// );
/*
* 方法三
*/
//ES6类来定义一个组件
// class Welcome extends React.Component {
// render() {
// return <h1>Hello, {this.props.name}</h1>;
// }
// }
// ReactDOM.render(
// <Welcome name="huanglw" />,
// document.getElementById('example')
// );
/*
* 方法四
*/
//react自带的创建组件的方法
VAR Welcome = React.createClass ({
render:function(){
return <h1>Hello, {this.props.name}</h1>;
}
});
ReactDOM.render(
<Welcome name="huanglw" />,
document.getElementById('example')
);
下面这张关于JSX对象的对应关系的图片需要了解一下,有助于理解代码:
3、组件怎么显示到页面上去
组件要显示到页面上去就要提及react中最重要的方法ReactDOM.render()方法了,通过该方法将react元素渲染到页面中指定的DOM节点中去:
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
//此处只能用原生方法获取DOM节点,不可用jq方法
document.getElementById('root')
);
4、组件更新
组件也可以更新,下面例子是一个实时更新显示当前时间的组件