Por que você deve aprender React

Para começar, o React foi criado pelo Facebook e pela comunidade. Hoje em dia, ele é usado pelas Startups mais importantes como Uber, Airbnb, Tesla, Instagram.

Ao aprender React, você não somente aprende como fazer interfaces web melhores ou como ser um desenvolvedor front-end mais feliz, como pode usar os mesmos conceitos para fazer aplicativos nativos para Android, iOS e aplicações VR.

Uma grande vantagem que o React tem, comparado a outros frameworks, é que o Facebook o usa em toda a sua plataforma e isso traz a segurança de que ele não vai ser descontinuado nem sofrer mudanças radicais na sua API, como acontece com Angular.

Outro ponto a favor é a comunidade ao seu redor. Qualquer problema que tenha já está, basicamente, resolvido de antemão. Da mesma forma, há bibliotecas para solucionar qualquer problema.

O React é flexível, pode adaptá-lo ao stack que você usa agora mesmo.

A seguir, te explicarei o quão fácil é fazer três aplicações com React usando apenas os conceitos básicos.

Lembre-se, aprender React abre as portas a três tecnologias muito importantes

WEB

import React, { Component } from 'react';
import { Render } from 'react-render';

classFoxHoundextendsComponent {

	render() {
		return (
      <section>
				<header
					style={{
						background:'#000',
						color:'#DB9E34',
						textAlign:'center',
						padding:'40px'
					}}
				>
          <h1>FOXHOUND</h1>
        </header>
			  <img style={{width:'100%', margin:'0 auto'}} src="./hello-world.jpg" />
		  </section>
		)
	}
};

Render(document.getElementById('#container'), FoxHound);

Resultado

VR

Você pode fazer o mesmo para um app VR:

importReact, { Component } from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
} from 'react-vr';

classFoxHoundextendsComponent{
  render() {
    return (
      <View>
        <Pano source={asset('hello-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#000',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
            color: '#DB9E34'
          }}>
          FOXHOUND
        </Text>
      </View>
    );
  }
};

AppRegistry.registerComponent('FoxHoundVR', () => FoxHound);

Resultado

Mobile

O mesmo programa num app 100% nativo ficaria assim:

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

class FoxHound extends Component {
  render() {
    return (
      <Viewstyle={styles.container}><ImageBackgroundstyle={styles.img}source={require('./hello-world.jpg')}
        ><Textstyle={styles.title}>FOXHOUND</Text></ImageBackground></View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 25,
    textAlign: 'center',
    margin: 10,
    backgroundColor: '#000',
    color: '#DB9E34',
    padding: 40
  },
  img: {
    width: '100%',
    height: '100%',
    flex: 1,
    justifyContent: 'center'
  }
});

AppRegistry.registerComponent('FoxHoundMobile', () => FoxHound);

Resultado

Se você deseja um grande avanço na sua carreira, agora é a hora de aprender React