리액트 네이티브는 요즘 플로터와 더불어 인기를 끌고 있는 모바일 개발 플랫폼이다. .
리액트 자체가 좀 어렵고, 혼자 해볼생각이 두려웠는데 입문서가 쉽게 나온것같아 책을 접하게 되었다.
기본 환경설정부터 내용이 자세히 나와있어서 설치하는데 어려움 없이 설치 할수 있었다.
기본 설치환경이 기존에 프로그램이 설치되어있으면 충돌이 날수도있으므로, 지우고 새로운 버전으로 설치 해보는게 좋은것같다.
첫 에뮬 에서 실행을 하는데에 좀 기존 설치된 것과, 충돌이 나는 부분이 있어서, 노드를 삭제 하고 재설치 하고 우여곡절 끝에 첫화면을 띄우는데 성공하였다.
생각보다 컴포넌트를 적용하는 코드는 기본초기 설치되는 소스가 있기 때문에 변경하여 적용하는것은 크게 어렵지 않은것같다.
가변적인 값에 따라 화면에 표시가 달라지는 예제 이다.
아직 모든 실습을 해보지는 못했지만, 에뮬레이터를 통해 바로 실습을 확인할수있고, 쉬운예제부터 차근 차근 실습위주의 내용으로,
리액트네이티브에 대해 처음 접하고자 하는 사람에게 매우 좋은 책이라 생각한다.
import { StatusBar } from 'expo-status-bar';import React,{Fragment} from 'react';import { StyleSheet, Text, View } from 'react-native';// import {Text} from 'react-native'//3항 연사자 실습 name의 값에 따라 화면에 표시되는 내용이 틀려진다. export default function App() { const name = "Hanbit"; return (
My name is {name ==='Bemjun'?'Beomjun kim':'ReactNative'}
);}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, text :{ fontSize:30, }});
import {StatusBar} from 'expo-status-bar'; import React, {Fragment} from 'react'; import {StyleSheet, Text, View} from 'react-native'; // import {Text} from 'react-native '// 3 항 연 사자 실습 이름의 값에 따라 화면에 표시되는 내용이 틀려진다. export default function App () {const name = "Hanbit"; return (
제 이름은 {name === 'Bemjun'? 'Beomjun kim': 'ReactNative'} );} const styles = StyleSheet.create ({container : {flex : 1, backgroundColor : '#fff', alignItems : 'center', justifyContent : 'center',}, text : {fontSize : 30,}}) ;
<!DOCTYPE html><body><script src="lib/jquery.min.js"></script><script src="background.js"></script>