APP Notes

REACT NATIVE

• Javascript like CSS
• it imports a lot of staff from React.
• StyleSheet act like our CSS file

Questions

• Why do we require app registery at the end of the page: AppRegistery.registerComponent('app', () => app);

Components

• we can import any component from another class

==============================================================================

props

• components can hold props; and also these props can be called and used.

<View> <Component1 message="bu bir prop adi da mesaj"> </View>

{this.props.message}

Constructor(props)

• The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

constructor(props) { super(props); this.state = { color: props.initialColor }; }

• While using constructor dont use setState() always prefer this.state

• constructor holds state

• it is written prior to render in the code so render nows how to render it

• there is also something called defaultProps = {} which is another

let statement

• can be used like if; like in the following example this component has a constructor: name and it has a boolean showName. this check if showName is true; if not it shows the text 'No name'

name = this.state.showName ? this.state.name : 'No name';

StyleSheet

• helps us to change preview of the application

import StyleSheet from 'react-native';

<View style = {{styles.myView}}> </View>

• We can style anything we want

• also it is possible to add styles as an import like follows

const styles = StyleSheet.create (myView {backgroundColor:'blue'})

• in const styles we can define multiple styles by naming them like myView

• const styles can also have container (flex container for example) it is inherited from CSS

• flex container helps as fix spacing by flexDirection:'row'

TouchableHiglight

View

Text