React JS에서 제공하는 React Native에 대해 알아야 할 사항은 무엇입니까?

이 글은 React Native에 관심이 있는 사람들을 위해 쓴 것이다. 왜냐하면 그들은 React JS의 경험이 있기 때문이다.휴대전화와 인터넷을 개발하는 것이 그들의 업무 전망에 도움이 될 수 있다는 것을 아는 사람들은 documentation 에 너무 많은 시간을 투자하지 않도록 얼마나 쉬운지 알고 싶어 한다. (이것은 정말 좋다. 보아야 한다.)

개시하다

React Native를 설정하는 것은 매우 간단하기 때문에 절대로 당신을 막지 못하게 하세요.5분도 안 되는 시간에 자신의 휴대전화에서 볼 수 있는 앱을 개발할 수 있다.

Expo CLI를 사용하여 빠른 시작here 및 Expohere 사용에 대한 추가 제한 사항이 적용됩니다.노드 12+만 있으면 npm로 설치하고 새 프로젝트를 만들 수 있습니다.

npm install -g expo-cli

expo init MyFirstProject
cd MyFirstProject
npm start

당신의 가장 기본적인 설정은 바로 이렇습니다.이제 응용 프로그램을 개발할 준비가 되어 있습니다. (본문의 나머지 부분을 읽으면 React JS와 React Native 사이의 기본적인 차이를 알 수 있습니다.)

디스플레이 옵션

실행 npm start (또는 expo start) 은React JS의 작업 원리와 유사하며, 열린 브라우저 창에서만 프로젝트를 렌더링하는 옵션을 제공합니다.
이 메뉴 옵션을 보실 수 있습니다

QR코드도 있어요.

가장 빠르지만 가장 재미없는 옵션: 웹 브라우저에서 실행
이는 React JS와 동일합니다.새 탭이 열리고 프로그램에서 환영 메시지를 표시합니다.js 또는 렌더링할 내용을 선택하십시오.저장하면 브라우저의 코드가 자동으로 업데이트됩니다.

여전히 매우 빠르고 절대로 매우 재미있는 선택: QR코드
만약 모바일 기기에서 Expo Go 프로그램을 다운로드한다면, 응용 프로그램의 QR코드 스캐너 (두 장치가 같은 네트워크에 있는 한) 를 사용하여 휴대전화에 당신의 항목을 표시할 수 있다.일단 당신이 이 항목을 스캔하면 프로그램은 이 항목을 기억할 것입니다. 그러면 나중에 돌아갈 수 있습니다.솔직히 내가 제일 좋아하는 선택이야

설치 속도는 느리지만 아마도 가장 실용적인 옵션: iOS/Android 시뮬레이터
당신의 휴대전화에 그것을 설치하는 신기한 점은 확실히 멋있지만, 장기적인 개발에 있어서, 당신의 휴대전화를 내려다보는 것은 화면의 코드 옆에 시뮬레이터/시뮬레이터를 설치하는 것만큼 효과적이지 않다.그러나 이를 위해서는 Xcode와 Android Studio가 필요합니다. 이것은 처음 설치하고 설정하는 데 많은 시간이 걸릴 수 있습니다.

당신의 목표에 맞는 옵션을 선택한 후에 우리는 중요한 점으로 들어갑니다. 이것은 단지 몇 가지 새로운 전환점으로 JS에 응답하는 것입니까, 아니면 내가 반드시 새로운 문법을 배워야 하는 것입니까?

여기는 뭐가 달라요?

이것은 완전한 목록이 아니지만, 다음은 React-JS와 React-JS의 4대 차이입니다. 우리는 이러한 차이를 해결하여 React-Native에 빨리 적응할 수 있도록 해야 합니다.기초부터 확장하기 시작하면, 필요한 것이 있으면 구성 요소 here 가 있을 수 있습니다.

HTML 구문 없음

이것이 바로 React JS에서 기본적으로 환영하는 구성 요소의 외관이다

function Welcome(){
  return(
    <div>
      <h1>Welcome to my React App!</h1>
      <h3>Log in below</h4>
      <UserLoginForm />
    </div>
  )
}

지금 나는 이곳의 모든 HTML처럼 보이는 것이 사실상 JSX라는 것을 알고 있지만, 중점은 이 JSX가 HTML의 문법에 매우 열심히 일치한다는 것이다.React Native는 여전히 JSX를 사용하지만 HTML과 유사한 구성 요소는 사용할 수 없습니다.
이것은 일리가 있다. 왜냐하면 우리는 더 이상 인터넷을 위해 개발하지 않지만, 그것은 여전히 일종의 조정일 수 있기 때문이다.이러한 함수를 React Native에서 다시 생성하려면 일부 함수core components를 사용해야 합니다.
참고: 다음 구성 요소는 이름별로 가져와야 사용할 수 있습니다.너의 수입품을 잊지 마라!

Div를 View/ScrollView로 변경

<div> 라벨의 간단한 등효물은 <View> 구성 요소입니다.그것들의 행동은 거의 똑같다(둥지 짓기, 조형 등에서). 우리의 예를 들어 끄기<div>는 매우 신속하고 아프지 않다.

import {View} from 'react-native'

function Welcome(){
  return(
    <View>
      <h1>Welcome to my React App!</h1>
      <h3>Log in below</h4>
      <UserLoginForm />
    </View>
  )
}

이곳의 차이점은 보기가 굴러갈 수 없다는 것이다. 따라서 이 환영 구성 요소의 전부 또는 일부를 굴러갈 수 있도록 하려면 구성 요소의 이 부분을 <ScrollView>에 포장하거나 <View>를 모두 교체해야 한다.
주의: 스크롤 보기는 일정한 높이가 있어야만 정상적으로 작동할 수 있습니다.추가 정보here

텍스트 구성 요소

우리는 이미 <div> 오류를 복구했는데, 현재 어떻게 <h1>와 <h3> 라벨을 처리합니까?Enter<Text>: React Native의 모든 텍스트에 대한 간단한 솔루션입니다.<Text> 가장 가까운 직접적인 비교는 <p> 라벨이다.

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

function Welcome(){
  return(
    <View>
      <Text>Welcome to my React App!</Text>
      <Text>Log in below</Text>
      <UserLoginForm />
    </View>
  )
}

다시는 잘못을 저지르지 마라!적어도, 내가 UserLoginForm 구성 요소를 다른 곳에서 작성하고 정확하게 가져오거나 내보냈을 때 오류가 없었다고 가정하십시오.하지만 작은 문제에 주의를 기울였을 수도 있다.최초의 환영에서, 우리는 두 개의 다른 제목 크기를 가지고 있었지만, 지금은 두 개의 같은 텍스트 구성 요소만 가지고 있다.이는 React Native에 별도의 제목 텍스트 구성 요소가 없기 때문입니다.우리는 스스로 설계할 수 있도록 약간의 추가 절차를 늘려야 한다.

스타일시트 어셈블리

React Native에 HTML이 없듯이 CSS도 없습니다.그러나 걱정하지 마라. 스타일시트 구성 요소는 매우 비슷해서, 그것들 사이의 차이를 거의 알아채지 못할 것이다.인라인 스타일은 여전히 옵션입니다.

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

function Welcome(){
  return(
    <View>
      <Text style={{fontSize: 40}}>Welcome to my React App!</Text>
      <Text style={{fontSize: 20}}>Log in below</Text>
      <UserLoginForm />
    </View>
  )
}

그러나 가장 일반적인 스타일 설정 방식은 상수styles 아래에 대상을 만들고 해당하는 요소에 키프레임을 설정하는 것이다.

import {View, Text, StyleSheet} from 'react-native' // NEW IMPORT

const styles = StyleSheet.create({
  title: {
    fontSize: 40
  },
  subTitle: {
    fontSize: 20
  }
})

function Welcome(){
  return(
    <View>
      <Text style={styles.title}>Welcome to my React App!</Text>
      <Text style={styles.subTitle}>Log in below</Text>
      <UserLoginForm />
    </View>
  )
}

현재, 우리는 모든 오류를 복구했고, React JS에서 사용하기 시작한 같은 코드와 일치했습니다. (글꼴 크기와 숫자가 an <h1> 과 an <h3> 이 완전히 일치하지 않을 수도 있지만.docs 스타일링에 대한 설명이 더 많아서 저는 여기서 더 이상 깊이 토론하지 않겠습니다.
참고: React Native에서 간과하기 쉬운 차이점은 스타일시트 번호에 단위가 없다는 점입니다(예: "px").

이 둘은 어떤 공통점이 있습니까?

간단한 대답은: 많다!분명히 본 컴퓨터 응용 프로그램을 구축할 때 서로 다른 도전이 발생할 수 있기 때문에 이러한 도전을 해결해야 한다. 특히 프로젝트가 더욱 복잡해지면서 좋은 소식은 기본 원리가 같다는 것이다.
나는 모든 같은 것을 일일이 열거하지는 않지만, 리액션 JS 개발자들은 리액션 네이티브에서 어떻게 조작하는지 이미 알고 있다는 것을 발견할 때, 심지어는 시도하지 않아도 한숨을 돌릴 수 있다고 생각한다.
구성 요소를 구축하는 것이 가장 커야 한다. 구성 요소는 React의 핵심이기 때문에 React Native에서 구성 요소의 구조나 사용 방식을 중대한 변경하는 것은 커다란 난제이다.누군가가 이곳에 큰 차이가 있을 것이라고 기대하는 것은 아니다. (그들은 분명히 같은 사람이 창조한 것이고 함께 일하기 위해서이다.) 그러나 이것이 바로 공부를 결정하는 것을 그리 무섭지 않게 하는 일이다.

클래스 구성 요소를 구축할 수 있습니까?그래.

기능 부품?그래.

지방정부와 소품?완전히 같다.

갈고리?그럼요.

이벤트 처리?문법은 약간 다르지만 작업 원리는 같다.

요청을 받습니까?동일했어

만약에 Async/Await를 사용하고 싶다면 어떻게 합니까?자유!

알았어.너는 이미 네가 상상한 것보다 더 많이 안다!
만약 프로젝트에 대해 구체적인 생각을 가지고 시도하지 않는다면 아주 좋은 강좌가 많을 것이다. 따라서 만약에 React JS 배경에서 왔고 React Native를 고려한다면 시도하지 않을 이유가 없다.설치가 매우 간단해서 놀기만 해도 재미있다.