[React-Native]앱만들기-1(환경설정-HelloWorld)

매년마다 만든다고 하면서 한번(ㅠㅠ) 도 만들지 못한, 앱을 다시한번 도전 해보려고 합니다!

 

쓰고있는 핸드폰은 아이폰이지만, 개발자등록비용이 좀 비싸니까 ㅠㅠ

 

일단 안드로이드 버전부터 시작해보겠습니다.

 

react-native 사이트에 나온거 같이 똑같이하고, 

 

첫번째 프로젝트를 실행해 보았습니다~~!

 

reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

사이트에 나와있는 첫번째 예제

그리고 이걸 조금 수정해서 진짜 헬로우 월드를 찍어보았습니다.

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

export default class FirstProject extends Component {
  render(){
    return (
      <View>
        <Text>
          Hello World!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  
});

헬로우 월드!

 

스타일을 추가해 봤습니다.

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

export default class FirstProject extends Component {
  render(){
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

스타일 추가된 Hello World!

잘나옵니다~~!