React JS’den React Native’e

React.js ve React Native arasındaki benzerlikler sayesinde React.js’den React Native’e geçiş yapmak oldukça kolaydır. Her ikisi de React’in temelini oluşturur ve React’in bileşen tabanlı yapısını paylaşır, bu nedenle React.js’de geliştirdiğiniz becerileri ve bileşenleri, React Native’de kullanabilirsiniz.

React Native’de temel farklılıklar CSS tabanlı stiller yerine JavaScript tabanlı stil tanımlamaları yapılmasıdır.

React Native’de View, Text gibi özel bileşenler kullanılır ve stillemeler için StyleSheet.create kullanılır. CSS yerine JavaScript tabanlı stil tanımlamaları yapılır.

Bu örnekler, temel dosya yapısı ve stillemeye dair farklılıkları göstermektedir. React.js ile web uygulamaları geliştirirken HTML ve CSS ile çalışırken, React Native ile mobil uygulamalar geliştirirken özel bileşenler ve JavaScript tabanlı stil tanımlamaları kullanırsınız.

Örneğin App.js dosyaları üzerinde farklılıklara bir bakalım,

React.js

App.js;

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React.js!</h1>
    </div>
  );
}

export default App;

App.css

.App {
  text-align: center;
  font-family: Arial, sans-serif;
}

h1 {
  color: blue;
}

React Native

App.js

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

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'blue',
    fontSize: 24,
  },
});

export default App;