17-7-24-react入门

先说明下为什么说好每天一更,周五周六周日都没有更新。因为在周五的时候,上司主动找我谈了转正后的工资4-4.5K。
本来想好是6K的,后来打听了一圈公司的小伙伴,都是5-5.5,我就把自己定到了5K。
万万没想到,只有4-4.5, 估计是4.5然后扣掉各种以后,就4K。
也不是说不能活,就是觉得和周围的小伙伴相比,显得有点低。所以心情有点低落。
这两天也都在玩,就当放松心情了。
自己也去网上找了一圈,发现最近工作机会有点少,加上在公司里搞得杂七杂八,没有什么是精通的了,所以还是先好好待着吧。
既然选择待着,就好好干活吧~ 下班自己再学点其他的,增加就业机会。
然后今天早上依然不太想去上班,就又请假了一天。不过发现在家也没事干,还是学习了React。
因为公司项目未来即将要用到。所以先学习一下。稍后分享就分享react方面的知识。

# react的入门
react就是一个js框架,它采取组件化的结构,实现页面局部的快速加载,而不用每次都刷新整个页面。
简单的说,就是 很好用!
而且适配pc和移动端。一套代码,多地方使用,提升效率。

1. 首先安装npm。
2. `npm init`
2. 使用npm安装webpack(这里的react都是使用webpack来管理的,公司是使用gulp来管理,虽然还没深入研究。明天去研究研究。)
3. `npm install --save react react-dom`
4. 基本就可以开始了,这里不讲文件的分布,就讲下react的大致写法。

1. `import React from ‘react‘ //(`首先是引用react)
2.

export default class BodyIndex extends React.Components
render(){
return(
<h1>我是body部分</h1>
)
}

// 这里是写一个class部分(ES6的写法,由于越来越流行ES6,所以都采取ES6的写法),继承React的Components
// 里面的render是react的语法,即准备返回什么,return里面是要返回到页面上的内容。
3. 在return中也难免会有一些注释,如果直接使用//来注释,则会造成错误,所以要使用{/* ... */}来注释。
4. 在BodyIndex的父级js中,如果要使用BodyIndex,则需要使用`import BodyIndex from ‘bodyIndex的文件路径‘`
5. 然后在return中 直接使用`<BodyIndex />`即可完美引用,当然前提bodyindex需要export出去。
6. react有几个加载状态`componentsDidMount`,`componentsBeforeMount`都可以在这里面设置自己需要的事件。
7. 当然,除了几个状态以外,react也有独立的state和props。state即状态,可以在一开始的时候设置`this.state = {id: 111}`
然后在使用的时候,如果要改变state可以使用`this.setState({id: 222})`重新赋值来覆盖掉原来的即可。
8. props是父子页面之间互相传递的方式。在父页面中可以使用`<BodyIndex userid={123}`来将userid=123传给bodyindex页面,
然后在bodyIndex的页面中,使用this.props.userid就能来获取父页面发来的数据了。
9. 在当前页面中写function以后,如果在比如input-button的标签中调用,需要书写如下`onClick={this.functionName.bind(this,[args])}`的形式,
其中args为可选,如果填写会发送给function当做参数,这是ES6的语法,需要记住。
10. 从父页面传来的数据在使用前可以先进行验证,这些都是react里面有现成方法的,比如userid为数字
`BodyIndex.propTypes = {userid : React.PropTypes.number}`,这句话写在bodyindex页面即可进行验证。
11. 从父页面传来的数据如果没有填写,自己页面填写了`this.props.userid`也不会报错,只是输出空数据。
当然,我们也可以写一些默认的值来避免这些尴尬,如果有传过来,就使用传过来的值,没有就使用默认值
`const defaultPrps = {userid : 001}; BodyIndex.defaultProps = defaultProps`.
12. 如果想从父页面(A)向孙子页面(C)传递(隔着一个中间页面(B)传值),不需要很复杂的写好几个`this.props.XX = XXOO`,
可以直接在B页面中,C页面的代码处写`{...this.props}`就能将A的页面传来的数据给C。
13. 后面就是关于CSS部分,明天再来聊,拜拜啦。

时间: 2024-08-18 23:31:07

17-7-24-react入门的相关文章

react入门之使用webpack搭配环境(一)

react入门之搭配环境(一) 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建,my-app为项目名称 cd my-app/ //进入my-app目录 npm sta

React入门理解demo

1.React文档结构 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>React-demo1</title> 6 <!-- 核心库 --> 7 <script src="build/react.js"></script> 8 &

React 入门实例教程

React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的

(转)React 入门实例教程

作者: 阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非

学习react入门demo的总结。

在github上找到react入门学习比较好的demo,下面是那个链接: https://github.com/ruanyf/react-demos 然后接下来是每个demo的学习笔记: demo1: <body> <div id="example"></div> <script type="text/jsx"> //jsx类型可html和javasript一起写,遇到 HTML 标签,就用 HTML 规则解析:遇到代

react入门(5)

对前面四篇内容进行简单的回顾: react入门(1):jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3):jsx/html/css分开写(分成三个文件),state,onChange事件,refs react入门(4):props和state的混搭使用,state与props的对比,生命周期(挂载.更新.移除) 今天要讲的是组件之间的通信,会结合前面学的一些内容,主要以实例为主来进行讲解. 一.父组件向

【转】react入门实例教程

作者: 阮一峰 日期: 2015年3月31日 写在前面:原文链接http://www.ruanyifeng.com/blog/2015/03/react.html    github地址https://github.com/ruanyf/react-demos 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场

React入门资源整理

另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 孔明前端团队React项目新手指南:http://www.07net01.com/2015/09/920779.html

包建强的培训课程(15):React入门与提高

v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} Normal 0 false 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·‘“〈<「『[[[〝﹙﹛﹝$(.[{£¥ !%),.:;>?]}¢¨°·ˇˉ

React入门实例教程

文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却