React Native JSX, TSX 설정(Node.js, React, React Native, EXPO, JSX, 환경설정, Android)

React Native - JSX

프로젝트 만들기( node.js version 16.20.2 lts )

 

CMD 명령어 입력 (App.js 프로젝트 만들기)

프로젝트 생성 한 경로로 가서 커맨드 입력

expo init rn-calc

 

 

다운로드 완료 후 

npx eslint --init

위 커맨드를 입력하면 선택 하라고 나오는데

아래 처럼 선택하면 된다.

 

to check syntax and find problems 선택

JavaScript modules 선택

React 선택

No 선택

Node 선택

JSON 선택

yes / npm 선택

 

참고 사항 : ESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구이다

다운로드를 완료 했다면

 

.eslintrc.json 파일 수정

"extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:react/jsx-runtime"
    ],
    
    
    "rules": {
        "no-console": "warn"
    }

jsx-runtime 부분을 추가 해 주고(React import 관련 에러 방지),

rules에 no-console을 추가 해 준다.(추가하는 이유는 console.log를 사용하기 위함)

 

.prettierrc 파일을 추가하여 아래 내용을 추가

{
    "arrowParens": "always",
    "printWidth": 80,
    "singleQuote": true,
    "tabWidth": 2
}

 

(IDE 인텔리제이의 경우 플러그인 설치) React 관련 에러가 없어졌다면 ESLint가 잘 적용 된 것이다.

 

src 폴더를 생성하여 src/App.js를 새로 만든다.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

  const App = () => {
    return (
      <View style={styles.container}>
        <StatusBar style="auto" />
        <Text>Calc App</Text>
      </View>
    );
  };

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

export default App;

 

기존 App.js는 

import App from './src/App';

export default App;

위와 같이 수정

 

돌려보면

실행 결과

(필자는 Android - a 입력)

실제 USB에 연결된 휴대폰에 테스트 할 수 있다. 

 

---

React Native -TSX 

준비물

node.js

JDK (권장 버전은 17, 환경설정 필수)

Android Studio 설치

Window

 

안드로이드 환경변수 설정 (SDK가 설치 되어있는 경로)

ANDROID_HOME
C:\Users\userName\AppData\Local\Android\Sdk

path부분
%ANDROID_HOME%\platform-tools

 

기존 이미 설치가 되어있다면 삭제

npm uninstall -g react-native-cli @react-native-community/cli

 

 

프로젝트 생성

npx react-native@latest init AwesomeProject

 

 

특정 버전 생성

npx react-native@X.XX.X init AwesomeProject --version X.XX.X

 

 

app.tsx

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;

 

CMD 창에서

npm start

실행

필자는 Android 이며 a 입력

 

안드로이드 스마트폰 확인

휴대폰 연결