项目部分使用react.js_react.js, react-dom.js - CSDN
  • 本教程总共6篇,每日更新一篇,请...1、React项目配置1(如何管理项目公共js方法)---2018.01.11 2、React项目配置2(自己封装Ajax)---2018.01.12 3、React项目配置3(如何管理项目API接口)---2018.01.15


    本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!


    1、React项目配置1(如何管理项目公共js方法)---2018.01.11


    2、React项目配置2(自己封装Ajax)---2018.01.12


    3、React项目配置3(如何管理项目API接口)---2018.01.15


    4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16


    5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17


    6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18


    开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2


    在开发中,我们会用到很多js公共方法,我们通常把它们都放在一个统一的js文件中!

    比如:获取URL参数、判断是否是手机号等等公用方法!

    我们先来写出这个方法!

    在app -> public -> js 下新建 utils.js

    我们写入这两个方法,然后导出这两个方法

    /**
    * 截取URL参数
    * @param {string} name 截取的key
    * @param {string} [url] 被截取的url
    * @returns {string} 截取的val
    */
    let urlParam = (name, url) => {
    let reg = new RegExp(".*[&?]" + name + "=([^&]*)(&|$)");
       let r;
       if (!url) {
    r = window.location.search.match(reg);
       } else {
    r = url.match(reg);
       }
    if (r) return decodeURIComponent(r[1]);
       return '';
    };
    /**
    * 判断是否是手机号
    * @param {string} val 传进来的字符串
    */
    let isMobile = (val) => {
    let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
       return reg.test(val);
    };
    export default {
    "urlParam": urlParam,
       "isMobile": isMobile
    }

    我们用下这两个方法,看看好不好使!

    在 app -> component -> shop -> Index.jsx 中 引入 utils.js

    import utils from '../../public/js/utils';

    在渲染部分我们,使用 获取url 参数的这个方法:

    获取url中参数name的值:{utils.urlParam('name')}

    然后我们再浏览器里看下效果:

    OK 一切正常!

    在试下识别手机号的方法:

    <div>15910678888:这{utils.isMobile('15910678888') ? '是' : '不是'}手机号</div>
    <div>11111111111:这{utils.isMobile('11111111111') ? '是' : '不是'}手机号</div>

    看下浏览器效果

    运行正常!

    完整代码如下:

    import React from 'react';
    import utils from '../../public/js/utils';
    import '../../public/css/shop.pcss'

    class Index extends React.Component {
    constructor(props) {
    super(props);
           this.state = {
    list: [
    {id: 1, title: '前端人人1'},
                   {id: 2, title: '前端人人2'},
                   {id: 3, title: '前端人人3'},
                   {id: 4, title: '前端人人4'},
                   {id: 5, title: '前端人人5'},
                   {id: 6, title: '前端人人6'},
                   {id: 7, title: '前端人人7'},
                   {id: 8, title: '前端人人8'},
                   {id: 9, title: '前端人人9'}
    ]
    };
       }

    handleItemDel(id) {
    let list = this.state.list;
           list.splice(list.findIndex(data => data.id === id), 1);
           this.setState({list: list})
    }

    render() {
    let {list} = this.state;
           return (
    <div className="content">
                   <div>获取url中参数name的值:{utils.urlParam('name')}</div>
                   <div>15910678888:这{utils.isMobile('15910678888') ? '是':'不是'}手机号</div>
                   <div>11111111111:这{utils.isMobile('11111111111') ? '是':'不是'}手机号</div>
                   {
    list.map(data => <li key={data.id}>{data.title}
    <button onClick={() => this.handleItemDel(data.id)}>删除</button>
                       </li>)
    }
    </div>
           );
       }
    }

    export default Index;

    我们回过头来看下:utils.js 的另一种写法!

    export default {
    /**
        * 截取URL参数
        * @param {string} name 截取的key
        * @param {string} [url] 被截取的url
        * @returns {string} 截取的val
        */
       urlParam: (name, url) => {
    let reg = new RegExp(".*[&?]" + name + "=([^&]*)(&|$)");
           let r;
           if (!url) {
    r = window.location.search.match(reg);
           } else {
    r = url.match(reg);
           }
    if (r) return decodeURIComponent(r[1]);
           return '';
       },
       /**
        * 判断是否是手机号
        * @param {string} val 传进来的字符串
        */
       isMobile: (val) => {
    let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
           return reg.test(val);
       }
    }

    这样就不用在底部,再导出了!


    还有一种:

    /**
    * 截取URL参数
    * @param {string} name 截取的key
    * @param {string} [url] 被截取的url
    * @returns {string} 截取的val
    */
    let urlParam = (name, url) => {
    let reg = new RegExp(".*[&?]" + name + "=([^&]*)(&|$)");
       let r;
       if (!url) {
    r = window.location.search.match(reg);
       } else {
    r = url.match(reg);
       }
    if (r) return decodeURIComponent(r[1]);
       return '';
    };
    /**
    * 判断是否是手机号
    * @param {string} val 传进来的字符串
    */
    let isMobile = (val) => {
    let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
       return reg.test(val);
    };
    export {urlParam, isMobile}

    这种方法在使用的时候,就可以不用点方法了!

    可以直接使用:

    import {urlParam,isMobile} from '../../public/js/utils';
    <div>获取url中参数name的值:{utils.urlParam('name')}</div>
    <div>15910678888:这{utils.isMobile('15910678888') ? '是' : '不是'}手机号</div>
    <div>11111111111:这{utils.isMobile('11111111111') ? '是' : '不是'}手机号</div>


    完整代码:

    import React from 'react';
    import {urlParam,isMobile} from '../../public/js/utils';
    import '../../public/css/shop.pcss'

    class Index extends React.Component {
    constructor(props) {
    super(props);
           this.state = {
    list: [
    {id: 1, title: '前端人人1'},
                   {id: 2, title: '前端人人2'},
                   {id: 3, title: '前端人人3'},
                   {id: 4, title: '前端人人4'},
                   {id: 5, title: '前端人人5'},
                   {id: 6, title: '前端人人6'},
                   {id: 7, title: '前端人人7'},
                   {id: 8, title: '前端人人8'},
                   {id: 9, title: '前端人人9'}
    ]
    };
       }

    handleItemDel(id) {
    let list = this.state.list;
           list.splice(list.findIndex(data => data.id === id), 1);
           this.setState({list: list})
    }

    render() {
    let {list} = this.state;
           return (
    <div className="content">
                   <div>获取url中参数name的值:{urlParam('name')}</div>
                   <div>15910678888:这{utils.isMobile('15910678888') ? '是' : '不是'}手机号</div>
                   <div>11111111111:这{utils.isMobile('11111111111') ? '是' : '不是'}手机号</div>
                   {
    list.map(data => <li key={data.id}>{data.title}
    <button onClick={() => this.handleItemDel(data.id)}>删除</button>
                       </li>)
    }
    </div>
           );
       }
    }

    export default Index;

    看下浏览器:

    一切正常OK!

    希望大家能灵活运用,详细用法,可以去看下ES6!


    本文完 

    禁止擅自转载,如需转载请在公众号中留言联系我们!

    感谢童鞋们支持!

    如果你有什么问题,可以在下方留言给我们!


    展开全文
  • React.Js实战

    2018-08-09 20:50:42
    React.Js实战 需求来源 前端框架引入地图 初识 在React与Vue框架选择中,非常犹豫,React有成熟的社区和面对对象的抽象思想,vue则是轻量级的代表,结合了Angular和React的优势,对于新手用此入门甚佳。 ...

    React.Js实战

    需求来源

    前端框架引入地图

    初识

    在React与Vue框架选择中,非常犹豫,React有成熟的社区和面对对象的抽象思想,vue则是轻量级的代表,结合了Angular和React的优势,对于新手用此入门甚佳。

    前端开发的实质

    前端开发是与工程化紧密相连的,甚至是与UED等用户体验等艺术性相背离的,目前没有发现能在艺术和工程都能协调完美的人。
    前端开发面对的是复杂的组件,表现在管理和抽象复杂业务的能力,组件实质就是状态的集合,这和服务器端的服务复杂交互、治理,是同出一脉。

    准备工作

    在学习React之前,先保证有node,npm相关的经验,不熟悉请参考本人另一篇文章——VueJs实战。

    编码规范要求组件首字母大写,驼峰式。
    组件多种创建方式:https://www.cnblogs.com/Unknw/p/6431375.html

    • 组件通信
      react的单向数据模型,要求只能父组件给子组件传数据。
      这点与angular和vue不同,也是其强大的优势之一。
      双向数据模型,能提高编程的灵活性,但也导致了组件通信的混乱和代码规范的难以制定,所以React才能成为大型项目的无冕之王。

      父组件
      import Son from './son';
      export default class Dad extends Component {
      render() {
          var message = "God bless U!"
          return (
              <Son mess = {message}><Son/>
          );   
        }   
      }  
      子组件
      export default class Son extends Component {
      render() {
          var message = this.props.mess
          return (
              <div>{message}<div/>
          );   
        }   
      }
      

      组件数据分为state和pros两种,
      state为组件内数据,只读,无法分享,
      pros为父组件串入的数据。

    组件通信参考文章:https://segmentfault.com/a/1190000006831820

    项目实战

    main.jsx为入口,引入了redux实现数据共享,react-intl实现国际化,各类中间件和第三方插件引入,只包含app这个组件,代码如下

    import React from 'react';
    import ReactDOM from 'react-dom';
    import intl,{IntlProvider,addLocaleData} from 'react-intl'
    import App from './components/App';
    import getI18n from 'root/assets/i18n/i18n'
    import {Provider} from 'react-redux'
    import {applyMiddleware,createStore} from 'redux'
    import reducer from './store/reducer'
    import {createLogger} from 'redux-logger'
    import InitState from './store/initState'
    import thunk from 'redux-thunk'
    import promise from 'redux-promise'
    //引入外部第三方插件
    import 'root/business/lib/index'
    /*** 导航页
     */
    const logger = createLogger();//中间件,日志
    let store =  createStore(
        reducer,
        InitState,
        applyMiddleware(thunk,promise,logger)
    );//创建redux状态管理,中间件分别为支持异步,支持promise和日志  
    let language = 'zh-CN';//默认中文
    let i18n = getI18n(language);
    addLocaleData(...i18n.data);//国际化
    ReactDOM.render(
        <Provider store={store}>
          <IntlProvider locale={i18n.locale} messages={i18n.messages} formats={i18n.formats}>   
            <App />
          </IntlProvider>
         </Provider>
          ,
      document.body.appendChild(document.createElement('div'))
    );
    
    • UI组件
      • 入口
      • app
        app包含右侧栏和上边栏两部分,右侧为菜单,上边为标题
      • 菜单
        component/bar/sideBar.jsx通过遍历business/menu/menu.js提供的模拟数据,创建元素,其含子元素sideBarIcon(菜单按钮)和sideBarTitle(展示栏)
      • 标题栏
        component/bar/topBar.jsx通过遍历business/toolbar/buttons.js提供的模拟数据,创建元素,其含子元素topBarButton(标题按钮)和topBarList(标题列表)
      • 展示栏
        component/bar/sideBarTitle.jsx展示菜单的名称和返回主菜单按钮
    • 组件交互
      • 菜单与标题栏、展示栏
        点击菜单,发出store/actionType.js的menu.hover事件,通过redux分发到store/reducer.js,PageReducer、TitleReducer和ToolReducer根据这一事件,改变全局state的PAGE、TITLE、TOOL属性,component/bar/sideBarTitle.jsx的mapStateToProps检测到state变化,重新调用类的render,刷新了dom树,展示进入的菜单名称和按钮,component/bar/sideBar.jsx也刷新了页面,隐藏掉菜单,进入对应菜单的页面,component/bar/topBar也相应改变了。
        点击返回菜单按钮,则发出menu.back事件,reducer改变redux的state,触发各界面刷新dom。
    展开全文
  • React.js 提供UI层面的解决方案,在实际项目中,需要结合其他库,如Redux、React-router等来协助提供完整的解决方案,也就是我们经常说的react全家桶 第一阶段 探讨了如下几个问题: 什么问题导致了我们需要...

    《react.js》小书非常基础,适合入门新手,非常好理解,规定自己三天时间内阅读完并确保最基本的知识都掌握了,将一些平时回忽略的注意点做了小笔记和总结

    《react.js小书》读书笔记二
    《react.js小书》读书笔记三
    在线阅读:http://huziketang.com/books/react/
    在线OJ试题:http://scriptoj.mangojuice.top/problemsGroups/593a2e29b3838c385539fa4f

    第一阶段

    探讨了如下几个问题:

    • 什么问题导致了我们需要前端页面进行组件化 (为了提高代码复用性)
    • 前端页面组件化需要解决什么样的问题 (减少DOM操作)
    • react.js是怎么解决这些问题的

    优化DOM操作

    解决方案:一旦状态发生改变,就重新调用render方法,构建一个新的DOM(更新state->更新html结构的字符串->更新DOM->更新页面),也就是说,只要调用setState组件就会重新渲染,这就消除了手动的DOM操作。

    jsx原理

    React.createElement会构建一个js对象来描述HTML结构信息,包括标签名、属性、子元素等。所谓JSX其实就是javascript对象
    jsx到页面经历了以下过程:

    事件监听

    • react.js不需要手动调用浏览器原生addEventListenner进行事件监听(这里需要补充原生Js事件监听知识点)
    • 这些on*的事件只能用在普通的html的标签上,而不能用在组件标签上。

    event对象

    react.js不需要考虑不同浏览器兼容性的问题,由类似于w3c标准的event.stopPropagation、event.preventDefault等常用方法。

    关于事件中的this

    一般在某个类的实例方法里面的 this 指的是这个实例本身。但是你在react组件的的方法中把 this 打印出来,你会看到 this 是 null 或者 undefined。

    	handleClickOnTitle (e) {
    		console.log(this) // => null or undefined
    	}
    
    

    这是因为 React.js 调用你所传给它的方法的时候,并不是通过对象方法的方式调用(this.handleClickOnTitle),而是直接通过函数调用 (handleClickOnTitle),所以事件监听函数内并不能通过 this 获取到实例。

    如果你想在事件函数当中使用当前的实例,你需要手动地将实例方法 bind 到当前实例上再传入给 React.js。

        class Title extends Component {
    	    handleClickOnTitle (e) {
    	        console.log(this)
    	    }
    	
    	    render () {
    	        return (
    	        <h1 onClick={this.handleClickOnTitle.bind(this)}>React 小书</h1>
    	        )
    	    }
        }
    

    组件的state和setState

    • 组件可以拥有自己的状态,并且可以改变自身状态
    • 改变状态的时候不要直接用this.state=xxx,而要使用this.setState方法。
    • 调用setState的时候并不会马上修改state,而是放到更新队列里面,稍后才更新。
    • setState可以接受一个函数作为参数,把上一个setState的结果传入这个参数中。

    props

    • props是由父组件属性传到子组件的,可以是字符串、数字、对象、甚至是函数
    • 默认配置 defaultProps
        static defaultProps = {
            likedText: '取消',
            unlikedText: '点赞'
        }
    
    
    • props是不可变的,不可以在组件内部修改props,只能通过父组件主动更新

    state vs props

    • state是让组件控制自己的状态,props是让外部对组建进行配置

    总结

    • 组件化可以帮助我们解决前端结构复用性的问题,整个页面可以由不同的组件组合、嵌套组成
    • 一个组件由自己的显示形态,组件的显示形态可以由由数据状态(state)和配置参数(props)共同决定。
    • 使用className代替class,使用htmlFot代替for
    • 条件判断时候在表达式插入里面返回null,那么将什么都不显示,相当于忽略了该表达式的插入
    • 自定义的组件都必须要用大写字母开头,普通的 HTML 标签都用小写字母开头。
    • React.js 的事件监听方法需要手动 bind 到当前实例,这种模式在 React.js 中非常常用。
    • 规则:尽量少的用state,尽量多的用Props
    • 使用map等循环渲染列表的时候不要忘记key!!!
    • 使用react.js的时候,并不需要担心多次进行setState会带来性能问题
    • React.js 中的 <input /> 、<textarea />、<select /> 等元素的 value 值如果是受到 React.js 的控制,那么就是受控组件。

    实践

    第一阶段的实战部分比较简单,实现的功能类似之前我的一个小demo,详情可以见(react +mock.js 实现留言列表)

    展开全文
  • 最近在学习前端的各大流行框架, 主要学习了 Vue.jsReact.js, 前段时间用 Vue.js + uikit 实现了 V2EX 的克隆版本, 最近又用 React.js + redux + bootstrap 实现了 RubyChina 的克隆版本, 两个项目都支持响应式...

    最近在学习前端的各大流行框架, 主要学习了 Vue.js 和 React.js, 前段时间用 Vue.js + uikit 实现了 V2EX 的克隆版本, 最近又用 React.js + redux + bootstrap 实现了 RubyChina 的克隆版本, 两个项目都支持响应式布局. 不得不说这是学习新知识的一个有效途径. 这两个项目都比较合适学习 Vue.js 和 React.js 的朋友参考.

    Vue.js + V2EX 项目

    代码地址: https://github.com/liuzhenangel/v2ex_frontend

    Demo: http://v2ex.liuzhen.me

    关于这个项目的一些介绍和学习资料可以访问 这里 查看 .

    这篇文章主要介绍 React.js 的相关知识.

    React.js + RubyChina 项目

    代码地址: https://github.com/liuzhenangel/react-ruby-china

    Demo: http://ruby-china.liuzhen.me

    项目介绍

    react-ruby-china 项目是一个利用 react, react-dom, react-redux, react-router, redux, es6, redux-thunk 实现的 RubyChina 社区克隆项目.

    这是一个前后端分离项目, 前端主要是 react, redux, es6, css 框架使用了 bootstrap. 后端利用 ruby-china 开放的 api. 支持响应式布局. 部分功能仍在持续完善中.

    开发环境搭建

    可以根据下方列出的官方文档里面有详细说明, 这里介绍一下 create-react-app 这个命令行脚手架工具. npm install create-react-app -g 之后执行 create-react-app my-app, 然后 npm start 就能运行了.
    关于 create-react-app 详情可以点击 这里 查看.

    核心技术框架
    • react
    • react-dom
    • react-router
    • redux
    • redux-thunk
    • react-md-editor
    • isomorphic-fetch
    • react-paginate
    • react-redux
    • marked
    • es6-promise
    • classnames

    学习参考资料

    在学习 React 过程中, React.js 文档做的没有 Vue.js 的好, 文档中的例子各种不同语法. 对着照做不一定对, 也不方便查询, 踩过很多坑后给大家做个分享.

    React 中文文档(这个文档很好查询, 但是很多内容写的太简单了没讲清楚, 而且内容不全): https://hulufei.gitbooks.io/react-tutorial/content/index.html

    React 官方英文文档: https://facebook.github.io/react/docs/getting-started.html

    React 中文文档(这个文档比较差): http://reactjs.cn/react/docs/getting-started-zh-CN.html

    极客学院提供的 React 中文文档: http://wiki.jikexueyuan.com/project/react/

    另一个 Reac 中文文档(这个比较全面, 但是不便于搜索): http://www.phperz.com/article/15/0712/140537.html

    React Router 中文文档: https://react-guide.github.io/react-router-cn/

    RubyChina API: https://ruby-china.org/api

    ReacChina 社区(这里面有很多资源): http://react-china.org/

    ES6 文档: http://es6.ruanyifeng.com/#docs/intro

    Redux 介绍: http://www.alloyteam.com/2015/09/react-redux/

    展开全文
  • 由于近期项目原由,碰巧有机会接触了一下近来火热的一款前端框架——react.js 由于项目排期较紧,匆忙地写了将近几千行代码,对于Facebook所推的基于flux架构的这一套前端玩法有了一个大致的把握。 目前网上所找到的...
  • 感谢 yck: 剖剖析 React 源码解析,...React 版本为 16.8.6,关于源码的阅读,可以移步到yck react源码解析本文永久有效链接:react解析: React.createElement 在我们使用React开发项目的过程中,react的引入是必不...
  • 首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以...
  • Vue.jsReact.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两个框架的认知。 1.数据绑定 1.1 Vue中有关...
  • 学习react.js

    2016-08-09 14:12:23
    网址收集 http://www.ruanyifeng.com/blog/2015/03/react.html
  • React.js 开发参见问题

    2017-10-22 12:36:40
    课程完整的思维导图请查考文章:React.js 入门与实战课程思维导图,我使用的思维导图软件是 Mac 下的 iThoughtsx。 课程网站源码包请参考慕课问答区:求源代码地址,此源码包含了 node_modules ,因为非常大所以...
  • 组长说要使自己对产品在技术层面有一个清晰且足够的了解,最好自己动手开发一个迷你产品,例如todolist,因为公司有提供员工自学使用的服务器,所以我就来试试了,而且一步一步的记录自己的学习过程,这个过程有请教...
  • 项目是在初学React.js之后实现的简单留言板的新增和展示(Mock.js实现伪数据交互),功能比较简单,200行关键代码且超多注释,不过相对也更适合React初学者查看。 提供了git地址,下载后无需开启服务,浏览器打开/...
  • React,Angular,Vue, 这三个框架社区里讨论的时间可不短了,但对于一个小白来说,准备上手这三款框架,究竟从哪一个开始学习最佳,需要分析一波~首先从Angular.js说起,Angular.js目前指1.6版本之前的老Angular版本...
  • react.js 教程之 Installation 安装 运行方法 运行react有三种方式 1.如果你只是学习react,可以在http://codepen.io/gaearon/pen/rrpgNB?editors=0010上只写写代码 2.如果你想用自己的编辑器,...
  • react.js做小程序 本文最初发表在Stormpath上 。 感谢您支持使SitePoint成为可能的合作伙伴。 React(有时称为React.js)是一种构建Web UI的绝妙方式。 Stormpath React SDK通过路由和组件扩展了ReactReact ...
  • JavaScript领域发展速度很快,甚至有人...React.js在两年前发布时,我刚开始学Angular,React在我看来只是又一个模板库而已。这两年间,Angular得到了JavaScript开发者的认同,它几乎成了现代前端开发的代名词。我还
  • 通过选择合适的JavaScript框架来更好适配你的...JavaScript框架,比如Angular.js,Ember.js,或者React.js,能提供很好的代码框架,并且保持代码的组织性,从而使得你的app更具灵活性与可扩展性,开发过程更加容易。
  • 编写react.js工具 就JavaScript前端生态系统而言,尘埃落定了一点。 在这一点上,React可以说是最大的关注点,但是您需要适应许多麻烦。 Vue提供了相当简单的替代方案。 然后是Angular和Ember,它们虽然仍然很流行,...
  • React.js hello world

    2017-11-22 15:09:17
    React 官网上对它的介绍:A JavaScript library for building user interfaces从图书馆借了一本《React 快速上手开发》–Stoyan Stefanov写的,很薄,不到200页,开始啃。从它官网的宣传语可以看出来,React应该侧...
  • 最近在学React.jsReact官方推荐使用next.js框架作为构建服务端渲染的网站,所以今天来写一些Demo( Github地址)研究一下next.js使用。 next.js作为一款轻量级的应用框架,主要用于构建静态网站和后端渲染网站...
1 2 3 4 5 ... 20
收藏数 35,139
精华内容 14,055
关键字:

项目部分使用react.js