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
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
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
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