ReactNative Expo + javascript Settings

1.ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ / Project start
https://docs.expo.dev/get-started/create-a-project/

# npx create-expo-app@latest

2.์—‘์Šคํฌ ํ™˜๊ฒฝ์„ค์ • ๋ฐ ์‹คํ–‰/ Expo environment settings
https://docs.expo.dev/get-started/set-up-your-environment/
1)์•ฑ์Šคํ† ์–ด๋‚˜, ํ”Œ๋ ˆ์ด์Šคํ† ์–ด์—์„œ Expo Go๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜๋ฉด ์—‘์Šคํฌ์•ฑ์„ ๊ฐœ๋ฐœ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
You can develop Expo apps by downloading Expo Go from the App Store or Play Store.
https://docs.expo.dev/get-started/set-up-your-environment/

2)์—‘์Šคํฌ ์‹คํ–‰ / Setting up and running Expo
https://docs.expo.dev/get-started/start-developing/

# npx expo start

— ๊ธฐ๋ณธ ์•ก์Šคํฌ์•ฑํ™”๋ฉด์ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‹คํ–‰ ๋ฉ๋‹ˆ๋‹ค.
The basic Expo app screen runs as follows.

3)ํ”„๋กœ์ ํŠธ ๋ฆฌ์…‹ / reset project
https://docs.expo.dev/get-started/next-steps/
— ๋ฆฌ์•กํŠธ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
React Native natively supports TypeScript and JavaScript.
— ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด ๊ธฐ๋ณธ ์•ฑํ™”๋ฉด์ด ์žˆ์Šต๋‹ˆ๋‹ค.
When you start a project, you will see a basic app screen.
— ์™„์ „ํžˆ ์ƒˆ๋กญ๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ”„๋กœ์ ํŠธ๋กœ ๊ฐœ๋ฐœ ์œ„ํ•ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฆฌ์…‹ํ•ฉ๋‹ˆ๋‹ค.
Reset the project to develop a completely new project in JavaScript.

# npm run reset-project

— index.tsx๋ฅผ ๋”ฐ๋กœ ๋ฐฑ์—… (b_index.tsx) / Back up index.tsx separately (b_index.tsx)
— index.jsํŒŒ์ผ ์ƒ์„ฑ /. Create an index.js file

// /**
// * @format
// */
// expo์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์…‹ํŒ…โ€ฆ
import {AppRegistry} from 'react-native';
import App from './test'; // 'test'์ธ์‹ ๋ชป ํ•  ์ˆ˜ ์žˆ์Œ.
import {name as appName} from '../app.json';
AppRegistry.registerComponent(appName, () => App);

— test.jsํŒŒ์ผ์— index.tsxํŒŒ์ผ์˜ ์ฝ”๋“œ์ž…๋ ฅ
Enter the code from the index.tsx file into the test.js file

import { Text, View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Edit app/index.tsx to edit this screen.</Text>
      <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

-๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ / directory structure

5)์•ฑ์‹คํ–‰ / run app

# npx expo start

–Expo Go์•ฑ์„ ํ†ตํ•ด์„œ ์•ฑ ์‹คํ–‰ํ™”๋ฉด
App launch screen via Expo Go app

Leave a Reply