React Native (1) - Hooks ve ClassComponent ile ayrı ayrı HelloWorld uygulaması

Herkese merhaba,
bu yazımda react 16.8 ile birlikte gelen hooks yapısına kısa bir giriş yapacağız.
Önce ekrana "Hello World" yazan bir classComponent oluşturacağız ardından da aynı işi yapan Hooks fonksiyonunu yazacağız.

NOT: vakit bulursam hooks yapısıyla alakalı birkaç  yazı daha yazıp bir seri haline getirerek github üzerinde paylaşacağım.

Proje yapısı aşağıdaki şekilde olacaktır.
├── package.json
└── src
    ├── screens
    │   ├── Home
    │   │   ├── Class
    │   │   │   └── index.js
    │   │   └── Hooks
    │   │       └── index.js
    │   └── package.json
    └── wrapper
        └── index.js


ilk olarak react native ile bir proje oluşturun.

$ react-native init someProject

Terminal üzerinden projenin bulunduğu dizine gidin.

$ cd someProject

src/screens adında bir dizin oluşturun. Ardından burada bir package.json dosyası oluşturun.

$ mkdir src/screens/ && touch package.json

package.json dosyasının içeriğini aşağıdaki şekilde güncelleyin.

{   "name": "appScreen" }

touch ile HomeHooks fonksiyonunu tanımlamak için Hooks dizininde index.js adında bir dosya oluşturun

$ touch src/screens/Home/Hooks/index.js

index.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.

import * as React from 'react'; import {StyleSheet, Text} from 'react-native'; export const HomeHooks = () => {   return <Text style={styles.paragraph}>Hello from HomeHooks</Text>; }; const styles = StyleSheet.create({   paragraph: {     margin: 24,     fontSize: 18,     fontWeight: 'bold',     textAlign: 'center',     color: 'red',   }, });

touch ile Home class'ını  tanımlamak için Class dizininde index.js adında bir dosya oluşturun

$ touch src/screens/Home/Class/index.js

index.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.

import React, {Component} from 'react'; import {StyleSheet, Text} from 'react-native'; export default class Home extends Component {   render() {     return <Text style={styles.paragraph}>Hello from Home</Text>;   } } const styles = StyleSheet.create({   paragraph: {     margin: 24,     fontSize: 18,     fontWeight: 'bold',     textAlign: 'center',     color: 'red',   }, });

touch ile src dizininde bir wrapper component oluşturun. Bu componentin içinde diğer componentleri load edeceğiz.

$ touch src/wrapper/index.js

index.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.

import React, {Component} from 'react'; import {SafeAreaView, StyleSheet} from 'react-native'; import Home from 'appScreen/Home/Class'; import {HomeHooks} from 'appScreen/Home/Hooks'; export default class Wrapper extends Component {   render() {     return (       <SafeAreaView style={styles.container}>         <Home />         <HomeHooks />       </SafeAreaView>     );   } } const styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',   }, });

Dikkat edilmesi gereken birkaç nokta:

• Class olarak component tanımlaması yapılırsa bu class React.Componenti extend etmelidir. Hooks yapısında fonksiyon olarak tanımlandığı için extend yoktur.
• Class olarak tanımlanan componentin render methodu olmalıdır. Hooks yapısında direk değer return edilmelidir.
• src/screens/Home/Class/index.js dosyasında Class export edilerek ve React.Component'i extend ederek bir component oluşturuldu.
• src/screens/Home/Hooks/index.js dosyasında ise fuction export edilerek bir component oluşturuldu.
• Wrapper component içine import ederken Hooks ile oluşturulan component method tabanlı olması nedeniyle  direkt kullanım için süslü parantezler kullanılarak import edildi.  
• Style tanımlama da dahil olmak üzere diğer kullanımların tamamı aynı şekildedir.

github: https://github.com/lvntyldz/tutorials/tree/1-react-hooks-hw/react-native-hooks-examples