[Basic React-Native] Handling App.js (State, Props)

I would like to skip how to download React-Native, Java and so on...

[Print Hello World in center of screen]

When you want to print some text in application, you need to amend App.js file. And it is one of simple example to show how to write "hello world" in your application in Android application.

step 1) Import component class in react module.

step 2) Class App would have to be inheritanced by Component.

step 3/4) There is a reder constant which is returned for composing the view of app.

step 5) Also import View, Text and StyleSheet that you need to usw when you want to print some text in the screen.

step 6) You can use StyleSheet to locate a text in the center.

import React, {Component} from 'react'; // 1) react라는 모듈에서 component라는 class를 import 한다.
import {View, Text, StyleSheet} from 'react-native'; // 5) 화면에 뭔가를 출력하려면 필요한 것들

class App extends Component{ // 2) 그 component라는 클래스를 app이라는 클래스가 상속받는데,
  render(){ // 3) 이 안에는 화면을 rendering 하는 상수가 있고,
    return ( // 4) 이 함수가 return하는 것들이 화면을 구성하게 된다.
      <View style={styles.background}>
        <Text> Hello world </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({ // 6) View에 스타일을 주어 Text를 가운데에 위치시킨다.
  background:{
    flex:1,
    backgroundColor : '#fff',
    alignItems : 'center',
    justfyContent : 'center'
  }
})

export default App;

 

[ State ]

: It is a javascript object to contain and maintain some data rendered in component so the output shown on the screen will be changed by the state.

If you define App as a function component like this below example, it is impossible to use.

const App = () =>{
	return (

	)
}

 

It will be defined outside of render function and in class App so we will assign text('Hello Wold') to variable state and print.

import React, {Component} from 'react'; // 1) react라는 모듈에서 component라는 class를 import 한다.
import {View, Text, StyleSheet} from 'react-native'; // 5) 화면에 뭔가를 출력하려면 필요한 것들



class App extends Component{ // 2) 그 component라는 클래스를 app이라는 클래스가 상속받는데,

  state = {
    sampleText : 'Hello world2'
  }

  render(){ // 3) 이 안에는 화면을 rendering 하는 상수가 있고,
    return ( // 4) 이 함수가 return하는 것들이 화면을 구성하게 된다.
      <View style={styles.background}>
        <Text> {this.state.sampleText} </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({ // 6) View에 스타일을 주어 Text를 가운데에 위치시킨다.
  background:{
    flex:1,
    backgroundColor : '#fff',
    alignItems : 'center',
    justfyContent : 'center'
  }
})

export default App;

 

And you can use boolean state to change the value of state using set state.

step1) define changeState() function in App class.

step2) change the state using boolean state value.

step3) Should use retern in InputText for rendering.

step4) Change <Text> putted on Press to react when clicked

import React, {Component} from 'react'; // 1) react라는 모듈에서 component라는 class를 import 한다.
import {View, Text, StyleSheet} from 'react-native'; // 5) 화면에 뭔가를 출력하려면 필요한 것들



class App extends Component{ // 2) 그 component라는 클래스를 app이라는 클래스가 상속받는데,

  state = {
    sampleText : 'Hello world2',
    sampleBoolean : true
  }

  inputText = () => {
    return( // state 사용하려면 return으로 감싸줘야 rendering되어서 나간다
      this.state.sampleBoolean ?
        <Text>sampleBoolean is true</Text>
      :
        <Text>sampleBoolean is false</Text>
    )
  }

  changeState = () => {
    if(!this.state.sampleBoolean){
      this.setState({
        sampleText : 'Text Changed!',
        sampleBoolean : true
      })
    }else{
      this.setState({
        sampleText : 'Hello World!',
        sampleBoolean : false
      })
    }

    
  }

  render(){ // 3) 이 안에는 화면을 rendering 하는 상수가 있고,
    return ( // 4) 이 함수가 return하는 것들이 화면을 구성하게 된다.
      <View style={styles.background}>
        <Text onPress={this.changeState}> // state 변화를 클릭시 변경하게 하기
            {this.state.sampleText}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({ // 6) View에 스타일을 주어 Text를 가운데에 위치시킨다.
  background:{
    flex:1,
    backgroundColor : '#fff',
    alignItems : 'center',
    justfyContent : 'center'
  }
})

export default App;

 

Or you can add some integer.

import React, {Component} from 'react'; // 1) react라는 모듈에서 component라는 class를 import 한다.
import {View, Text, StyleSheet} from 'react-native'; // 5) 화면에 뭔가를 출력하려면 필요한 것들



class App extends Component{ // 2) 그 component라는 클래스를 app이라는 클래스가 상속받는데,

  state = {
    sampleText : 'Hello world2',
    sampleBoolean : true,
    sampleNum : 1
  }

  inputText = () => {
    return( // state 사용하려면 return으로 감싸줘야 rendering되어서 나간다
      this.state.sampleBoolean ?
        <Text>sampleBoolean is true</Text>
      :
        <Text>sampleBoolean is false</Text>
    )
  }

  changeState = () => {
    if(!this.state.sampleBoolean){
      this.setState({
        sampleText : 'Text Changed!',
        sampleBoolean : true
      })
    }else{
      this.setState({
        sampleText : 'Hello World!',
        sampleBoolean : false
      })
    }

    
  }

  onAdd = () => {
    this.setState(prevState => {
      return{
        sampleNum : prevState.sampleNum +1
      }
    })
  }

  render(){ // 3) 이 안에는 화면을 rendering 하는 상수가 있고,
    return ( // 4) 이 함수가 return하는 것들이 화면을 구성하게 된다.
      <View style={styles.background}>
        <Text onPress={this.onAdd}>
            {this.state.sampleNum}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({ // 6) View에 스타일을 주어 Text를 가운데에 위치시킨다.
  background:{
    flex:1,
    backgroundColor : '#fff',
    alignItems : 'center',
    justfyContent : 'center'
  }
})

export default App;

 

[Props]

: It is read-only property so it is impossible to change the value. It is meaningful when it forms a parent-child. At this time, the data is transmitted from the parent to the child component. 

<App.js>

import React, {Component} from 'react'; // 1) react라는 모듈에서 component라는 class를 import 한다.
import {View, Text, StyleSheet} from 'react-native'; // 5) 화면에 뭔가를 출력하려면 필요한 것들
import PropsChild from './propsChild';


class App extends Component{ // 2) 그 component라는 클래스를 app이라는 클래스가 상속받는데,

  state = {
    sampleText : 'Hello world2',
    sampleBoolean : true,
    sampleNum : 1
  }

 changeState = () => {
    if(!this.state.sampleBoolean){
      this.setState({
        sampleText : 'Text Changed!',
        sampleBoolean : true
      })
    }else{
      this.setState({
        sampleText : 'Hello World!',
        sampleBoolean : false
      })
    }

    
  }


  

  render(){ 
    return ( 
      // put the data wanted to transfer in a vairable and use props function
      <View>
        <PropsChild sText={this.state.sampleText} cState={this.changeState}/> 
      </View>
    )
  }
}

export default App;

< PropsChild.js >

// 부모가하는 일을 자식에게 가장 간편하게 주는 방법 = props
// 1) PropsChild라는 함수를 export 하는 파일
import React, {Component} from 'react';
import {View, Text} from 'react-native';

// 
const PropsChild = (props) =>{
    return (
        // got a data from parents by using props as a cState and sText named by parents
        <View>
            <Text onPress={props.cState}>
                {props.sText}
            </Text>
        </View>
    )
}

export default PropsChild;