React 学习记录点

React 学习记录点

React是一个用于构建用户界面的js库,主要用于构建UI.

特点:
声明式设计:采用声明范式,轻松描述应用。
高效:通过对dom的模拟,最大限度的减少与dom交互。
灵活:可以与已知的库或框架很好的配合。
Jsx:是js的扩展,建议使用。
组件:使得组件更加容易得到复用,能够很好的应用在大项目的开发中。
单向响应的数据流:减少重复代码,比传统数据绑定简单。

React库:
React.min.js-react的核心库
React-dom.min.js 提供与dom相关的功能
Babel.min.js babel将es6转化为es5,就可以在不支持es6的浏览器执行react代码

下载cnpm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm安装模块:
Cnpm install [name]
使用create-react-app构建react开发环境
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

JSX
注意:jsx就是js,一些标识符像class和for 不建议作为xml属性名,作为替代,react DOM使用className和htmlFor来做对应的属性.
for 属性规定 label 与哪个表单元素绑定。
添加自定义属性需要使用 data- 前缀。

Props
可用通过组件类的defaultProps属性为props设置默认值

class HelloMessage extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
HelloMessage.defaultProps = {
  name: 'Runoob'
};
 
const element = <HelloMessage/>;
 
ReactDOM.render(
  element,
  document.getElementById('example')
);

Props验证
使用props验证使用proptypes,保证我们的应用组件被正确的使用.若传入无效数据,则抛出警告.

var title = "菜鸟教程";
// var title = 123;
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}
 
MyTitle.propTypes = {
  title: PropTypes.string
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

react命名规范
Html元素名以小写字母开头,自定义的react类名使用大写驼峰.
如const element =
除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。
React事件命名使用驼峰写法,如οnclick=”activateLasers()”
阻止默认行为(需要写全)
e.preventDefault();

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值