react 기초 배우기 001 - react

React란

프로젝트 만들기

1. vs code 실행

2. 터미널 실행

    # 프로젝트 생성
    $ react-native init --version 0.61.5 react_01
   
    # 폴더로 이동
    $ cd react_01
   
    # 프로젝트 실행
    $ npm start
   

3. 새 터미널 추가

    # 에뮬레이터 실행
    $ react-native run-ios
   

화면 출력 맛보기

• 에뮬레이터에 출력된 예시 화면은 App.js 파일에서 나오는 것

  // react 모듈에서 Component 클래스를 import
  import React, { Component } from 'react';
  // react-native 모듈에서 View, Text, StyleSheet 클래스를 import
  import { View, Text, StyleSheet } from 'react-native';
  // Component 클래스를  App 클래스가 상속
  class App extends Component {
    // render 함수
    render() {
      // render 함수가 return 하는 내용이 화면을 구성하게 됨
      return (
        // Viwe 클래스에 styles.background 요소 스타일 적용
        <View style={styles.background}>
          <Text> Hello World </Text>
        </View>
      )
    }
  }
  
  // 스타일 선언
  const styles = StyleSheet.create({
    // backgound 요소
    background: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center'
    }
  })
  
  export default App;
  

참고

• https://www.inflearn.com/course/리액트-네이티브-기초