React Native 개념잡기 Learn the Basics #1

Learn the Basics

 

React Native is like React, but it uses native components instead of web components as building blocks.

React Native는 React(웹 프레임워크)입니다.

빌딩 블록으로 web components를 사용하지 않고 native components를 사용합니다.

 

So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props.

React Native app의 기본 구조를 이해하기 위해서는 JSX, componets, state 그리고 props 등 몇몇 기본적인 React concepts에 대해 알아야 합니다. 

 

If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not. Let's do this thing

React(웹 프레임워크)에 대해 알고 있더라도, natice components 등 React Navite의 구체적인 부분에 대해 배울 필요가 있습니다. 이 tutorial은 Reaact 경험 유무의 상관없이 모든 사람에게 해당됩니다. 시작해봅시다.

 

Hello world

In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:

개발자들의 옛 전통에 따라 첫 앱은 "Hello, world!"라는 단어를 제외하고는 아무것도 안나오게 만들어 보겠습니다.

다음과 같습니다.

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

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your App.js file to create a real app on your local machine.

호기심이 느껴지신다면, 웹 시뮬레이터에 예제 코드를 가지고 여러가지 적요애 보세요. 그리고 App.js에 붙여넣어 local machine에 실제 앱을 만들수도 있습니다.