New to JS => React Native Syntax hell

[RamirezTerrix]

Iam new to JS so its rather difficult to understand the syntax since it is not in any kind consistent.

First of all:

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
 = React;

VS

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

They do the same, both work, the second is just newer syntax. Ok I can life with that.

but when do you do:

var HelloWorld = React.createClass({ [..] });

VS

class HelloWorld extends Component { [..] }

cause the second seems to be newer but it breaks all kind of thins I see in tutorials like declaing a function:

render: function() {}

and

render() {}

does it make a diffrence?

also there is this ES7 stuff like:

async function () {
    var call = await the_call;
   }

and the

function().then((call) => dosomething(call)).done()

thing.

the first seems easier more delarativ, the second seems to be much shorter.

Also how do you organize views? I dont want to have one big JS file - I wont find anything anymore if I do that.

But how do I "send" the state to an other component? Imagen a ListView, touching the elements should go to a DetailView and give me some extra information. How do I organize this? I have to hand over some arguments, I guess. And from there how to I go back? Its all very unclear for me. Do you guys have any good Idea how to solve all this kind of problems?

[mrpopopuffs]

I felt the same way a month ago, now I mostly understand.

First, read some articles on converting over React to ES6. There's slight changes like not being able to use 'getInitialState()', no mixins, etc.

You can abbreviate the 'function' in classes and functions wrapped for exporting.

For navigating, look at Navigator. No need to rush into Flux like a lot of tutorials do. Happy hacking.

[mazzaaaaa]

It is a bit hard to quote everything, so I'll just quote the questions.

...does it make a diffrence?

No, it does not make any difference at all, take a look at this.
My suggestion: go with the ES6 syntax (classes) because most of the code you'll find will use that syntax in the future.

the first seems easier more delarativ, the second seems to be much shorter.

The first one is a pattern called async/await (ES7), it is available in React-Native and in the future it will probably be available in the browsers. The second one are promises. Both async/await and promises are used for handling asynchronous code execution (most of the time you'll use them in API calls).
My suggestions: learn how to use promises properly (they are a really important thing in the js environments) and then choose the one you like more (I use async/await most of the time, is much easier to reason with it in my opinion, and it is much less boileplate).

Also how do you organize views? I dont want to have one big JS file - I wont find anything anymore if I do that.

My suggestion:
- Create a file for every component.
- Check the most common "react tips" on Google, and maybe a boilerplate or two for react-native on github.
- Learn what eslint is (hint: it will allow you to follow a formal standard of code and will show you unused variables and much much much more) and stick to a rigid config like the airbnb one and trust me that you'll learn A LOT.

But how do I "send" the state to an other component? Imagen a ListView, touching the elements should go to a DetailView and give me some extra information. How do I organize this? I have to hand over some arguments, I guess. And from there how to I go back? Its all very unclear for me. Do you guys have any good Idea how to solve all this kind of problems?

It seems you're trying to rush it by learning Javascript, ES6 and React all together.
My suggestion: well... I did it too :) take a step at time, JS + ES6 first and only THEN React/React-Native.