React Native 시작하기1 : 기본 설치

React Native 시작하기1 : 기본 설치

챗GPT에게 시작할 수 있는 가이드를 달라고 했습니다.

React Native를 시작하기 위한 빠른 가이드입니다.

1. Node.js 및 npm 설치: React Native에는 Node.js v12.0 이상 및 npm이 필요합니다. 공식 웹 사이트에서 다운로드하여 설치할 수 있습니다.
2. React Native CLI 설치: 터미널에서 다음 명령을 실행하여 npm을 사용하여 React Native CLI를 설치할 수 있습니다.

java
npm install -g react-native-cli

3. 새 React Native 프로젝트 생성: React Native CLI를 설치했으면 다음 명령을 실행하여 새 프로젝트를 생성할 수 있습니다.

java
react-native init MyProject

그러면 "MyProject"라는 디렉토리에 새로운 React Native 프로젝트가 생성됩니다.

4. 앱 실행: 앱을 실행하려면 프로젝트 디렉터리로 이동하고 다음 명령을 실행합니다.

java
cd MyProject
react-native run-android

이렇게 하면 Android 에뮬레이터 또는 연결된 기기에서 앱이 시작됩니다.

5. 코딩 시작: 선호하는 코드 편집기에서 프로젝트 디렉토리를 열고 파일 편집을 시작합니다. 앱의 기본 진입점은 index.js 파일입니다. 필요에 따라 새 화면, 구성 요소 및 스타일을 앱에 추가할 수 있습니다.

다음은 React Native에서 기본 "Hello World" 앱을 만드는 방법에 대한 간단한 예입니다.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
    </View>
  );
};

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

export default App;

이 코드는 "Hello World!"라는 텍스트를 표시하는 단일 화면이 있는 간단한 앱을 만듭니다. StyleSheet 구성 요소는 앱의 스타일을 정의하는 데 사용됩니다. flex 속성은 컨테이너가 전체 화면을 차지하도록 하는 데 사용되며 alignItems 및 justifyContent 속성은 텍스트를 수직 및 수평 중앙에 배치하는 데 사용됩니다.

이것이 React Native를 시작하는 데 도움이 되기를 바랍니다.

---

1. VSCode 설치하고

2. Ctrl + ` 를 눌러 커맨드 창을 띄웁니다.

테스트 프로젝트 경로 : C:\Users\pkh\MyProject

C:\Users\pkh\MyProject>react-native run-android

(node:21300) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency

(Use `node --trace-warnings ...` to show where the warning was created)

error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting `project.android.sourceDir` option to point to a new location.

info Run CLI with --verbose flag for more details.

실행을 하려는 데 에러가 발생하였습니다.

이건 리액트 맞습니다.

react-native upgrade

업그레이드를 진행하였다.

---

1. Install Node.js and npm: React Native requires Node.js v12.0 or higher and npm. You can download and install them from the official websites.

2. Install React Native CLI: You can install React Native CLI using npm by running the following command in your terminal:

java
npm install -g react-native-cli

3. Create a new React Native project: Once you have installed the React Native CLI, you can create a new project by running the following command:

java
react-native init MyProject

This will create a new React Native project in a directory named "MyProject".

4. Run the app: To run the app, navigate to the project directory and run the following command:

java
cd MyProject
react-native run-android

This will start the app on an Android emulator or a connected device.

5. Start coding: Open the project directory in your favorite code editor and start editing the files. The main entry point for your app is the index.js file. You can add new screens, components, and styles to the app as needed.

Here's a simple example of how to create a basic "Hello World" app in React Native:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
    </View>
  );
};

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

export default App;

This code creates a simple app with a single screen that displays the text "Hello World!". The StyleSheet component is used to define the app's styles. The flex property is used to make the container take up the full screen, and the alignItems and justifyContent properties are used to center the text vertically and horizontally.

I hope this helps you get started with React Native! Good luck with your learning.