return h1 Hello props name h1 const element Welcome name Sara ReactDOM render

Return h1 hello props name h1 const element welcome

This preview shows page 11 - 20 out of 38 pages.

) {return<h1>Hello, {props.name}</h1>;}constelement =<Welcome name="Sara" />;ReactDOM.render(element,document.getElementById('root')±²When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.For example, this code renders “Hello, Sara” on the page:Try it on CodePen
Background image
StateCopyright © 2018 Marco Papa and Chenglong Hao12Representsinternalstate of the componentAccessed viathis.stateWhen a component’s state data changes, the renderedmarkup will be updated by re-invoking render() methodrender: function() {return <h3>Click count: <spanclassName=‘label label-default'>{this.state.clicks}</span>±²h3³´µ
Background image
State vs PropsCopyright © 2018 Marco Papa and Chenglong Hao13Stateis referred to the local state of the component which cannot be accessed and modified outside of the component and can only be used & modified inside the component.Props,on the other hand, make components reusable by giving components the ability to receive data from the parent component in the form of props.Props:External dataCan’t be changedState:Internal dataCan be changedPrivate for component
Background image
Component LifecycleCopyright © 2018 Marco Papa and Chenglong Hao14
Background image
React NativeCopyright © 2018 Marco Papa and Chenglong Hao15Build native mobile apps using JavaScript and React
Background image
React JSReact Native - OverviewCopyright © 2018 Marco Papa and Chenglong Hao16Your appReact Native JSLibraryJavaScript EngineReact Native LibraryNative AppAn embedded instance ofJavaScriptCore.React components withbindings to Native UIcomponents.Manipulating calls intoObjective C & java forbehavior.And polyfills for some webAPIs.
Background image
React vs React NativeCopyright © 2018 Marco Papa and Chenglong Hao17React (a.k.a. ReactJS or React.js) is is a JavaScript library you use for building dynamic, high performing, responsive UI for your web interfaces.React Native is an entire platform allowing you to build native, cross-platform mobile apps.React.js is the heart of React Native, and it embodies all React’s principles and syntax, so the learning curve is easy.
Background image
React Native - ComponentsCopyright © 2018 Marco Papa and Chenglong Hao18React Native provides a number of built-in components.BasicComponentsViewTextImageTextInputScrollViewIOSComponentsDatePickerImagePickerActionSheetProgressViewTabBarAndroidComponentsBackHandlerProgressBarTimePickerToastToolbar
Background image
React Native - StylesheetsCopyright © 2018 Marco Papa and Chenglong Hao19React Native implements a strict subset of CSS. Here's an example of how stylesheets are created in React Native:var styles = StyleSheet.create({container: {flex: 1,marginTop: 30±±²³<View style={styles.container}>...
Background image
Image of page 20

You've reached the end of your free preview.

Want to read all 38 pages?

  • Fall '07
  • Papa
  • Marco Papa, Lecture On React, Chenglong Hao

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes