Search code examples
syntaxreact-nativedifferenceexplain

What is the difference? Can you please explain the syntax?


I'm new in React-Native and I faced with two different (for me) instructions in tutorials. Could you please explain me the difference between them?

1) var React = require('react-native');

vs

import React, { AppRegistry, Component, StyleSheet, Text, View } from 'react-native';

2) var ReactComponent = React.createClass({...});

vs

class ReactComponent extends Component {}

And what is actually the best practice of react-native? - what variant is better to use and why? Also everywhere is written to name a variable "React" for react-native. Why can't I name it with another word (emulator say it can't find variable React then)?


Solution

  • In both examples, the first option is the way things used to be written, while the second option is the "new" ES6 syntax that introduces some new things. That's why you'll find older documentation using the first syntax, while newer documentation may use the new ES6 standards. It also confused me a lot when I just started out.

    If you're interested, you can read up on ES6 module system here: http://www.2ality.com/2014/09/es6-modules-final.html

    As far as I know you can use old (<=ES6) and new ES6 syntax interchangeably, but from a best practices point of view I'd adhere to one in your code, preferably the new standard.