반응 본족어 안내: 초보자 입문 - 제1부분

본고는 이미 React 경험이 있고 React 모국어가 완전히 초보인 사람들을 대상으로 한다.본문을 읽으면 React Native 응용 프로그램을 만들고 React Native와 전통적인 React에서 개발할 때 겪는 차이점을 탐색할 수 있습니다.나는 이 문장에 링크를 포함하고 밑에 참고할 수 있는 목록을 열거했다.나는 네가 나와 함께 공부하는 것을 좋아하길 바란다.시작합시다!

1. 설정

React Native에는 Expo CLI 및 React Native CLI 두 가지 유형의 설정 설명이 있습니다.우리 이 두 사람 사이의 차이를 좀 봅시다.

기본 CLI 대응

Mac 사용자만 해당

특히 iOS

의 사용자 정의 기능 추가 옵션

학습 곡선이 더 많다

XCode 또는 Android Studio

필요

엑스포 CLI

Windows, Linux 및 Mac

기능/사용자 정의 제한

개발 중인 프로젝트를 공유할 수 있습니다(Android만 해당)

어플리케이션 스토어에 배포하는 등 단순화되고 다양한 작업을 수행할 수 있습니다.XCode 또는 Android Studio를 사용할 필요가 없음

과거에는 React Native 응용 프로그램(CRNA)을 만드는 세 번째 선택이 있었지만 Expo와 통합되었습니다.
Expo 및 React Native CLI에 대한 자세한 내용은 보다 똑똑한 사용자에게서 확인하실 수 있습니다.https://levelup.gitconnected.com/expo-vs-react-native-cli-a-guide-to-bootstrapping-new-react-native-apps-6f0fcafee58f
저는 현재 Expo와 React Native를 사용하여 개발을 진행하고 있습니다. 이것은 제가 접촉한 대부분의 개발자들의 첫 번째 방법인 것 같습니다.이 블로그는 Expo CLI 빠른 시작 설명을 선택한 사용자를 대상으로 합니다.이 설명서는 Windows, Mac 및 Linux의 모든 주요 운영 체제에 적용됩니다.
Windows 사용자에게 유용한 팁: Gitbash에서 많은 문제를 겪었고 Powershell을 사용하는 체험이 훨씬 낫다는 것을 알게 되었습니다.Gitbash가 아닌 Powershell을 사용하여 expo/react 명령을 실행하는 것을 강력히 권장합니다.

2. 새 응용 프로그램 만들기

이제 엑스포 환경을 설정하여 새로운 React Native 응용 프로그램을 시작합니다!프로젝트 디렉터리 (모든 코드 항목을 저장하는 폴더) 에 있는지 확인하십시오.터미널에 이 명령을 입력하십시오.expo init RNToDoApp일반 React와 달리 현재 응용 프로그램 이름에 대문자를 사용할 수 있습니다.
다음과 같은 응답이 제공됩니다.

? Choose a template: (Use arrow keys)
  ----- Managed workflow -----                                                  
> blank               minimal dependencies to run and an empty root component
  blank (TypeScript)  same as blank but with TypeScript configuration
  tabs                several example screens and tabs using react-navigation
  ----- Bare workflow -----
  bare-minimum        minimal setup for using unimodules

우리의 목적을 위해서, 화살표 선택을 첫 번째 옵션에 보류합시다.만약 당신이 템플릿 간의 차이를 더 알고 싶다면, 저에게 알려주세요. 저는 앞으로의 댓글에서 더 많은 것을 알고 싶습니다.
이제 설정이 곧 완료될 것이라는 힌트를 볼 수 있을 것입니다."이름"의 불완전한 부분을 클릭하고 응용 프로그램에 이름을 제공합니다.이 항목에는 공백이 포함될 수 있습니다.

? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ » 50% completed
 {
   "expo": {
     "name": "<The name of your app visible on the home screen>",
     "slug": "RNToDoApp"
   }
 }

다음 메시지가 표시됩니다.

Yarn v1.15.2 found. Use Yarn to install dependencies? (Y/n)

네가 실을 사용하는 데 문제가 있지 않으면, 너는 여기에서 "y"라고 말할 수 있다.

3. 점화🔥

성공 메시지 및 새 React Native 응용 프로그램 시작 지침을 받았어야 합니다.

Your project is ready at C:\Users\Manda\Git\RNToDoApp

To get started, you can type:

  cd RNToDoApp
  yarn start

상술한 설명에 따라 조작한 후, 당신은 몇 가지 일이 발생한 것을 주의할 것입니다.먼저 Expo 개발자 도구가 기본 브라우저에서 시작됩니다.터미널에서 QR 코드도 볼 수 있습니다.이것이 바로 일이 재미있어지기 시작한 곳이다.😃
나만의 경험, 타인의 경험, 그리고 강력한 스택 넘침을 바탕으로 최상의 경험을 얻기 위해 Expo Developer 도구에서 LAN (기본 설정) 대신 "Tunnel"을 선택하겠습니다.

지금 너는 카메라를 켜고 코드를 스캔하고 나서...오, 우리는 지금 응용 프로그램을 다운로드해야 합니다.😵
모바일에서 App store에 접속하여 "Expo"라는 앱을 다운로드계정에 로그인했는지 확인합니다 (로그인하지 않은 경우 생성).나는 엑스포를 위해 통지를 남길 것이다. 왜냐하면 그것은 더욱 빨리 프로젝트를 열 수 있기 때문이다.다음은 Android와 iOS의 아이콘입니다.

자, 이제 우리는 우리의 응용 프로그램을 열 수 있습니다!🎉 Expo 개발자 도구의 터널 QR 코드를 스캔합니다.너는 반드시 너의 휴대전화에서 통지를 받고 엑스포에서 이 프로젝트를 열어야 한다.다음은 항목이 로드된 후의 모양입니다.

4. 코드를 살펴보자

원하는 코드 편집기에서 RNToDoApp 디렉토리를 엽니다.VSCode를 사용합니다.
응용 프로그램으로 이동합니다.js 파일.다음과 같은 내용을 볼 수 있습니다.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

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

응용 프로그램과 큰 차이가 없다.일반 React 응용 프로그램에서 본 js입니다.하지만 다른 점도 있다.위의 가져오기는 스타일시트, 텍스트, 보기를 가져왔습니다.
먼저 텍스트와 보기를 봅시다.이것은 여전히 JSX이지만 HTML 태그가 아니라 내장 구성 요소를 사용합니다.이 예에서 <Text> 은 일부 텍스트를 표시하는 내장 구성 요소이며, <View> 또는 <div> 와 유사합니다.
지금 한번 봅시다<span>.응용 프로그램의 밑부분을 알아차리면js 파일 - Stylesheet 방법으로 스타일시트 구성 요소를 연결한 다음 스타일 변수에 분배합니다. 대부분의 React 기본 구성 요소에서 사용할 수 있는 스타일 속성을 통해 스타일을 전달할 수 있습니다.
이미 알 수 있는 바와 같이, CSS 속성 이름은 React Native에서 낙타봉식 대소문자로 되어 있으며, 선형 그래디언트와 같은 모든 같은 기능을 사용할 수 없습니다."픽셀"대신 "점"을 사용하는 React Native와 같은 다른 차이점을 발견하기 시작합니다.
우리의 응용 프로그램은 지금 매우 무료하다.나는 그것이 약간의 조형이 필요하다고 생각한다.텍스트 주위에 테두리를 추가해서 진정으로 유행하게 합시다.
먼저 다음과 같이 다른 객체를 작성하여 스타일시트에 추가해야 합니다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }, 
  //  Here we are adding a "class" of textBox with properties to create our border.
  textBox: {
    borderRadius: 5,
    borderWidth: 0.5,
    borderColor: '#000',
    padding: 10
  }
});

너는 네가 돈을 저축하면 아무 일도 일어나지 않는다는 것을 알아차릴 것이다.다음과 같이 7행의 텍스트 구성 요소에 스타일을 적용해야 하기 때문입니다.

 export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.textBox}>Open up App.js to start working on your app!</Text>
    </View>
  );
}

지금, 프로그램을 저장할 때.js 파일, 당신의 핸드폰에 있는 expo 응용 프로그램이 재구성됨을 알게 될 것입니다. 당신의 유행하는 새로운 테두리를 볼 수 있습니다.

그래, 네 말이 맞다.우리의 응용 프로그램은 보기에 매우 좋다...그래도 심심해요.우리는 약간의 기능을 추가해야 한다!단추를 추가해서 비밀 메시지를 보냅시다.
단추 구성 요소를 가져오는 것부터 시작합시다.버튼 구성 요소가 HTML에서 자주 사용하는 .create() 과 어떻게 다른지 탐색하기 시작할 때입니다.

우선, <button> 자동으로 닫히고 문자열의 제목 속성이 필요합니다.

React에서 이벤트 처리를 위해 도구<Button />를 사용하는 데 익숙합니다.React Native에서 사용됩니다onClick.

버튼은 스타일 도구가 없고 기본 스타일입니다. (Android를 사용하느냐, 아이폰을 사용하느냐에 따라 다릅니다.)단, 당신은'색'도구를 사용하여 단추의 색을 변경할 수 있습니다.React Native docs의 "터치 처리"에서 자세한 내용을 확인하십시오.

왜 우리는 onPress 구성 요소를 사용해야 합니까?응, 너는 할 줄 몰라.
두 번째 부분에서, 우리는 터치스크린을 처리하는 데 사용할 구성 요소를 더욱 토론할 것이다.
이제 우리는 극비 정보로 우리의 휴대전화를 일깨워 주는 기능을 만들어 이 일을 완성합시다.아래 코드를 참고하십시오.

export default function App() {

  secretMsg = () => {
    alert('Drink more Ovaltine')
  }

  return (
    <View style={styles.container}>
      <Text style={styles.textBox}>Open up App.js to start working on your app!</Text>
      <Button title='Press Me' color='pink' onPress={secretMsg} />
    </View>
  );
}

이 코드를 저장하면 버튼을 누르면 비밀 메시지가 있는 경보를 보냅니다.
만약 네가 이 점을 할 수 있다면 정말 좋겠다.너 망했어!너는 정말 하이파이브할 만하다.
읽어주셔서 감사합니다.또한 두 번째 섹션을 발표하기 전에 다음 리소스를 통해 React Native에 대한 자세한 내용을 확인할 수 있습니다.
React Native에서 날씨 응용 프로그램을 구축하는 방법, 저자: Nathan Thomas: https://medium.com/hackernoon/building-your-first-react-native-app-77a192734ff1
React 로컬 문서: https://facebook.github.io/react-native/docs/getting-started