.jsx reactnative_jsx {...} - CSDN
  • 最近在学习RN,发现项目里面的.jsx文件怎样都无法引用,后来网上搜索了一下,发现RN无法运行.jsx文件。在网上搜索到一位大神的博客,描述了如何让RN运行...1.项目主文件夹\node_modules\react-native\packager\react-p

    最近在学习RN,发现项目里面的.jsx文件怎样都无法引用,后来网上搜索了一下,发现RN无法运行.jsx文件。在网上搜索到一位大神的博客,描述了如何让RN运行打包.jsx文件,copy一份作为记录,源博客链接:http://www.cnblogs.com/Grart/p/5033281.html

    1.项目主文件夹\node_modules\react-native\packager\react-packager\src\Server\index.js找"var watchRootConfigs = opts.projectRoots.map(dir => {"这段,加上'.jsx'

    var watchRootConfigs = opts.projectRoots.map(dir => {
    return {
    dir: dir,
    globs: [
    '**/*.js',
    '**/*.json',
    '**/*.jsx',
    ].concat(assetGlobs),
    };
    });

    2.项目主文件夹\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\index

    0.22版使用的是node-haste在\node_modules\react-native\node_modules\node-haste\lib\index

    找"this._crawling = crawl(allRoots, {"加段,同样加上'jsx'

    this._crawling = crawl(allRoots, {
    ignore: this._opts.ignoreFilePath,
    exts: ['js', 'jsx','json'].concat(this._opts.assetExts),
    fileWatcher: this._opts.fileWatcher,
    });

    3.项目主文件夹\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\ResolutionRequest.js

    0.22版在\node_modules\react-native\node_modules\node-haste\lib\DependencyGraph
    找"if (this._fastfs.fileExists(potentialModulePath)) {"改成

    let file;
    let exts=["",
        this._platform?('.' + this._platform + '.js'):null,
        '.js',
        '.json',
        '.jsx'];
    for(let c=0;c<exts.length;c++){
      if(null!=exts[c]
            &&this._fastfs.fileExists(potentialModulePath + exts[c])
            &&(file = potentialModulePath + exts[c]))
          break;
    }
    if(!file){
      throw new UnableToResolveError(
        fromModule,
        toModule,
        `File ${potentialModulePath} doesnt exist`,
      );
    }
    //以下为原来的代码
    //if (this._fastfs.fileExists(potentialModulePath)) {
    //  file = potentialModulePath;
    //} else if (this._platform != null &&
    //           this._fastfs.fileExists(potentialModulePath + '.' + this._platform + '.js')) {
    //  file = potentialModulePath + '.' + this._platform + '.js';
    //} else if (this._fastfs.fileExists(potentialModulePath + '.js')) {
    //  file = potentialModulePath + '.js';
    //} else if (this._fastfs.fileExists(potentialModulePath + '.json')) {
    //  file = potentialModulePath + '.json';
    //} else {
    //  throw new UnableToResolveError(
    //    fromModule,
    //    toModule,
    //    `File ${potentialModulePath} doesnt exist`,
    //  );
    //}


    展开全文
  • React-Native入门指南 第六篇JSXReact-Native中的应用 一、JSX概述 你一定疑问为什么要用JSX?其实这不是必需,而是建议。只是因为React是作为MVC中的V,是为UI而生,所以,React-Native使用JSX更能像HTML样表达树...

    React-Native入门指南

    第六篇JSX在React-Native中的应用

    一、JSX概述
    你一定疑问为什么要用JSX?其实这不是必需,而是建议。只是因为React是作为MVC中的V,是为UI而生,所以,React-Native使用JSX更能像HTML样表达树形结构,其实HTML的超类就是XML,React-Native将这个带到了解放前,不可否认的是JSX相比节省了很多的代码。JSX不是什么新奇的东西,JSX只是对JavaScript进行了拓展,仅此而已。
    
    二、语法介绍
    1、类XML UI组件表达,在React-Native中表现为:
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
            </View>
        );
    }
    
    2、js表达式
    在JSX中,表达式需要{}包裹,例如:
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    {0? '第一段': '第二段'}
                </Text>
            </View>
        );
    }
    上面的代码我们可以看出,style={}是一个表达式;{0? '第一段': '第二段'}是表达式,最后显示的应该是“第二段”。
    
    3、属性
    在HTML中,属性可以是任何值,例如:<div tagid="00_1"></div>,tagid就是属性;同样,在组件上可以使用属性。
    建议使用以下方式:
    var props = {
        tagid: 'GGFSJGFFATQ',
        poiname: '东方明珠'
    };
    return (<View {...props}></View>);
    
    4、如果需要在调用组件的时候动态增加或者覆盖属性,又该如何呢?
    很简单:<View {...props} poiname={'虹桥机场'}></View>
    
    5、关于样式
    (1)普通内联样式:{{}},第一层{}是表达式,第二层{}是js对象;
    <View style={{fontSize:40, width:80,}}> </View>
    (2)调用样式表:{样式类.属性}
    <View style={styles.container}></View>
    (3)样式表和内联样式共存:{[]}
    <View style={[styles.container, {fontSize:40, width:80}]}>
    (4)多个样式表:{[样式类1, 样式类2]}
    <View style={[styles.container, styles.color]}>
    
    6、属性校验
    为了实现强类型语言的效果,我们可以使用propTypes来声明数据属性的合法性校验。例如:
    React.createClass({
        porpTypes:{
            username: React.PropTypes.string,
            age: React.propTypes.number,
        }
    });
    
    7、设定默认属性
    React.createClass({
        getDefaultProps: function(){
            return {
                sign: '这个家伙很懒,什么都没留下'
            };
        }
    });
    
    8、组件的生命周期
    componentWillMount:组件创建之前
    getInitialState:初始化状态
    render:渲染视图
    componentDidMount:渲染视图完成后
    componentWillUnmount:组件被卸载之前
    
    三、了解虚拟DOM
    React进行了虚拟DOM的封装,所有的视图的更新都是虚拟DOM做了一个校验(diff)后最小更新。为什么这么做,因为现在机器的内存已经足以支撑这样视图UI的diff计算,用内存计算换取UI渲染效率。
    
    1、我们需要获取组件中真实的dom
    React.findDOMNode(component)
    
    2、第二节已经简单说了组件的生命周期(will, did)
    组件的生命周期分为3个部分:
    Mounting:正在装载组件;
    Updating:重新计算渲染组件;
    Unmounting:卸载组件
    
    展开全文
  • JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是...

    JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰。

    看代码:

    js 代码:
    1. //使用JSX
    2. React.render(
    3. <div>
    4. <div>
    5. <div>content</div>
    6. </div>
    7. </div>,
    8. document.getElementById('example')
    9. );
    10.  
    11. //不使用JSX
    12. React.render(
    13. React.createElement('div', null,
    14. React.createElement('div', null,
    15. React.createElement('div', null, 'content')
    16. )
    17. ),
    18. document.getElementById('example')
    19. );

    那么也就是说,我们写一个XML标签,实质上就是在调用React.createElement这个方法,并返回一个ReactElement对象。

    查看API:http://www.css88.com/react/docs/top-level-api.html#react.createelement

    js 代码:
    1. ReactElement createElement(
    2. string/ReactClass type,
    3. [object props],
    4. [children ...]
    5. )

    这个方法的第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。从第三个参数开始,之后的参数都被认作是元素的子元素。

    转化

    React JSX将类似XML的语法转化到原生的JavaScript,元素的标签、属性和子元素都会被当作参数传给React.createElement方法:

    js 代码:
    1. #JSX
    2. var Nav;
    3. var app = <Nav color="blue" />;
    4.  
    5. #native JS
    6. var Nav;
    7. var app = React.createElement(Nav, {color:"blue"});

    JSX转化器

    要把带有JSX语法的代码转化为纯Javascript代码,有多种方式,对于内联与HTML中的代码或者是未经过转化的外部文件,在script标签中要加上type="text/jsx",并引入JSXTransformer.js文件即可,不过这种方式并不建议在生产环境使用,建议的方法是在代码上线前就将代码转换好,可以使用npm全局安装react-tools

    js 代码:
    1. npm install -g react-tools

    并使用命令行工具转化即可(具体用法可以参考jsx -h):

    js 代码:
    1. jsx src/ build/

    如果使用自动化工具,比如gulp的话,可以使用相应插件gulp-react

    查看:http://www.css88.com/react/docs/tooling-integration.html#jsx

     

    HTML 标签 vs. React 组件

    React.render方法可以渲染HTML结构,也可以渲染React组件。
    渲染HTML标签,声明变量采用首字母小写

    js 代码:
    1. var myDivElement = <div className="foo" />;
    2. React.render(myDivElement, document.body);

    渲染React组件,声明变量采用首字母大写

    js 代码:
    1. var MyComponent = React.createClass({/*...*/});
    2. var myElement = <MyComponent someProperty={true} />;
    3. React.render(myElement, document.body);

    React 的 JSX 使用大写和小写字母来区分本地的组件类和 HTML 标签.

    不过需要注意的是classfor这两个属性,JSX语法最终是要被转换为纯Javascript的,所以要和在Javascript DOM中一样,用classNamehtmlFor

    js 代码:
    1. //使用JSX
    2. React.render(
    3. <label className="xxx" htmlFor="input">content</label>,
    4. document.getElementById('example')
    5. );
    6.  
    7. //不使用JSX
    8. React.render(
    9. React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
    10. document.getElementById('example')
    11. );

    还有一点是,在创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加data-前缀。

    js 代码:
    1. <div data-custom-attribute="foo" />

    命名空间式组件

    比如开发组件的时候,一个组件有多个子组件,你希望这些子组件可以作为其父组件的属性,那么可以像这样用:

    js 代码:
    1. var Form = MyFormComponent;
    2.  
    3. var App = (
    4. <Form>
    5. <Form.Row>
    6. <Form.Label />
    7. <Form.Input />
    8. </Form.Row>
    9. </Form>
    10. );

    这样你只需将子组件的ReactClass作为其父组件的属性:

    js 代码:
    1. var MyFormComponent = React.createClass({ ... });
    2.  
    3. MyFormComponent.Row = React.createClass({ ... });
    4. MyFormComponent.Label = React.createClass({ ... });
    5. MyFormComponent.Input = React.createClass({ ... });

    而创建子元素可以直接交给JSX转化器:

    js 代码:
    1. var App = (
    2. React.createElement(Form, null,
    3. React.createElement(Form.Row, null,
    4. React.createElement(Form.Label, null),
    5. React.createElement(Form.Input, null)
    6. )
    7. )
    8. );

    该功能需要0.11及以上版本

    Javascript表达式

    在JSX语法中写Javascript表达式只需要用{}即可,比如下面这个使用三目运算符的例子:

    JSX是HTML和JavaScript混写的语法,当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。

    js 代码:
    1. // Input (JSX):
    2. var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
    3. // Output (JS):
    4. var content = React.createElement(
    5. Container,
    6. null,
    7. window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
    8. );

    属性表达式

    js 代码:
    1. React.render(
    2. <div className={2 > 1 ? 'class-a' : 'class-b'}>content</div>,
    3. document.body
    4. );

    子表达式

    js 代码:
    1. var Nav = React.createClass({
    2. render: function () {
    3. return <div>nav</div>
    4. }
    5. });
    6.  
    7. React.render(
    8. <div>
    9. {2 > 1 ? <Nav/> : <div>div</div>}
    10. </div>,
    11. document.body
    12. );

    不过要注意的是,JSX语法只是语法糖,它的背后是调用ReactElement的构造方法React.createElement的,所以类似这样的写法是不可以的:

    js 代码:
    1. // This JSX:
    2. <div id={if (condition) { 'msg' }}>Hello World!</div>
    3.  
    4. // Is transformed to this JS:
    5. React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

    可以从转化后的Javascript代码中看出明显的语法错误,所以要不用三目运算符,要不就这样写:

    js 代码:
    1. if (condition) <div id='msg'>Hello World!</div>
    2. else <div>Hello World!</div>

     

    传播属性(Spread Attributes)

    如果提前就知道了组件的属性的话,写起来很容易。例如component组件有两个动态的属性foo和bar:

    js 代码:
    1. var component = <Component foo={x} bar={y} />;

    而实际上,有些属性可能是后续添加的,我们没办法一开始就确定,我们可能会写出下面不好的代码:

    js 代码:
    1. var component = <Component />;
    2. component.props.foo = x; // bad
    3. component.props.bar = y; // also bad

    这样写是错误的,因为我们手动直接添加的属性React后续没办法检查到属性类型错误,也就是说,当我们手动添加的属性发生类型错误时,在控制台是看不到错误信息的。

    在React的设定中,初始化完props后,props是不可变的。改变props会引起无法想象的后果。

    延伸属性

    为了解决这个问题,React引入了属性延伸

    js 代码:
    1. var props = {};
    2. props.foo = x;
    3. props.bar = y;
    4. var component = <Component {...props} />;
    5. //或者
    6. var props = { foo: x, bar: y };
    7. var component = <Component { ...props } />;

    这样就相当于:

    js 代码:
    1. var component = <Component foo={x} bar={y} />

    当需要拓展我们的属性的时候,定义个一个属性对象,并通过{…props}的方式引入,在JSX中,可以使用...运算符,表示将一个对象的键值对与ReactElementprops属性合并,这个...运算符的实现类似于ES6 Array中的...运算符的特性。,React会帮我们拷贝到组件的props属性中。重要的是—这个过程是由React操控的,不是手动添赋值的属性。

    它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:

    js 代码:
    1. var props = { foo: 'default' };
    2. var component = <Component {...props} foo={'override'} />;
    3. console.log(component.props.foo); // 'override'

    JSX 陷阱

    style属性

    在React中写行内样式时,要这样写,不能采用引号的书写方式

    js 代码:
    1. React.render(
    2. <div style={{color:'red'}}>
    3. xxxxx
    4. </div>,
    5. document.body
    6. );

    HTML转义

    比如我们有一些内容是用户输入的富文本,从后台取到数据后展示在页面上,希望展示相应的样式

    js 代码:
    1. var content='<strong>content</strong>';
    2.  
    3. React.render(
    4. <div>{content}</div>,
    5. document.body
    6. );

    结果页面直接输出内容了:

    html 代码:
    1. <strong>content</strong>

    React默认会进行HTML的转义,避免XSS攻击,如果要不转义,可以这么写:

    js 代码:
    1. var content='<strong>content</strong>';
    2.  
    3. React.render(
    4. <div dangerouslySetInnerHTML={{__html: content}}></div>,
    5. document.body
    6. );

     

    参考资料(可能无法直接打开链接)

    展开全文
  • 最近在学习和开发react native的过程中,看了社区很多大牛的的文章,自己总结的一些东西。 1.react Js的目的 是为了使前端的V层更具组件化,能更好...2.react native的目的是用前端的技术将jsx通过babel编译成reac...

    最近在学习和开发react native的过程中,看了社区很多大牛的的文章,自己总结的一些东西。

    1.react Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会改变相应的dom。

    2.react native的目的是用前端的技术将jsx通过babel编译成reactElement,在创建对应的原生组件在移动端运行的app,但是性能可能比原声app差一点。 

    3.react和react native的底层原理是相同的,都是使用js实现虚拟dom树来驱动页面的渲染,react是驱动HTML dom的渲染,react native是驱动原生组件的渲染。

    4.二者都是基于组件(component)开发,然后组件和组件之间通过props传递方法,每个组件都有一个状态(state),当某个方法改变了这个状态值时,整个组件就会重绘,从而达到刷新。另外,说到重绘就要提到虚拟dom了,就是用js模拟dom结构,等整个组件的dom更新完毕,它会有一个diff的过程,对比出哪些组件发生了变化,然后才渲染到页面,简单来说只更新了相比之前改变了的部分,而不是全部刷新,所以效率很高。

    虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并。

    展开全文
  • React Native 学习 之JSX

    2017-09-22 18:02:07
    JSX是什么    字面上来看JSX即 JavaScript XML取首字母结合,所以JSX并不是一门新语言,仅仅是个语法糖。  React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到  我们在浏览器运行的时候,JSX语法会通过...
  • 介绍  1,React Js的目的 是为了使前端的V层更具...2,React Native的目的 是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架。可以创建出在移动端运行的app,但是性能可能比原声app差一点。
  • React Native -- JSX 语法

    2018-01-07 20:10:51
    React NativeJSX 语法字面上来看JSX即 JavaScript XML取首字母结合,所以JSX并不是一门新语言,仅仅是个语法糖。React发明了JSXReact的核心机制之一就是虚拟DOM,可以在内存中创建虚拟DOM元素。React利用虚拟...
  • RN学习网站: ReactNative官网:... ReactNative中文网:http://reactnative.cn/ 江清清RN技术专栏:http://www.lcode.org/react-native/(环境搭建,基础组件和常用API学习,RN开源项目,技术周报...)
  • React Native 中的JSX学习

    2017-08-17 09:35:07
    JSX是什么 字面上来看JSX即 JavaScript XML取首字母结合,所以JSX并不是一门新语言,仅仅是个语法糖。 React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到 我们在浏览器运行的时候,JSX语法会通过Babel转换成...
  • 1. ReactJS 和 React Native 比较 2.reactJSX书写借鉴于XHTML的一些规范  (1)开始和结束标签配对  &lt;组件&gt;ooxx&lt;/组件&gt;  (2)无内容的组件标签应写为自封闭标签  &lt;...
  • 1,React Js的目的是为了使前端的V层更具组件化,能...2,React Native的目的是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架。可以创建出在移动端运行的app,但是性能可能比原声app差一点。
  • React Native使用TypeScript

    2018-10-12 18:12:54
    React Native使用TypeScript 新建项目 react-native init TSReactNative TypeScript配置 npm install -g typescript npm install -g typings 也可以在项目下安装typescript: 根目录下运行 npm install typescript...
  • import React, {Component} from 'react'; import { AppRegistry, Platform, StyleSheet, View, Text, Image, Dimensions, PixelRatio, } from 'react-native'; const instruction...
  • react native常见的错误

    2016-06-01 10:28:18
    更多组件:https://react.parts/native,调用系统的,注意查看:支持iOS or 安卓 组件和相关使用 样式用这种方式定义,可以单独提...就可引入相对自己目录下的Styles.js,注:React Native 没有所谓的CSS。var styles
  • React Native概述什么是React NativeReact Native是Facebook在React.js Config 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript,UI使用JSX(一种语法类似于XML的UI描述语言)...
  • 该课程是慕课网里很火的一个React Native课程,当初在看了课程介绍和课程安排觉得讲解的点还是很全的,所以毫不犹豫地买了下来。 从看视频,敲代码到重构,改bug,大概花了2个多星期的时间,除了调用友盟的SDK...
  • 一.ReactReact.js、React Native三者之间的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或者网页。在它之上发展出了React.js框架用来开发网页,发展出来React Native用来...
  • 一、ReactReact.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页。 在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发...
  • JSX并不是一门新的开发语言,而是Facebook提出的语法方案:一种可以在JavaScript代码中直接书写HTML标签的语法糖,所以,JSX本质上还是JavaScript语言。 小知识:语法糖(Syntactic sugar)是由英国计算科学家彼得·...
  • react native github官方网: http://facebook.github.io/react-native/ js es6语法: http://es6.ruanyifeng.com/ react native redux开发框架: http://cn.redux.js.org/docs/basics/DataFlow.html react native ...
1 2 3 4 5 ... 20
收藏数 5,798
精华内容 2,319
关键字:

.jsx reactnative