I’ve written about , and to the text on the initial screen (or “stage”), and now I’m going to write a little bit about some of the important syntax concepts that are different from React that I’ve discovered while working on my app. installing and getting started with React Native how to make basic changes React Native A quick refresher on a few differences between React and React Native React is a library, and React Native is a framework. A React Native app is not a mobile web app, but is a native application React Native does not use CSS (more on this a little later!) React Native Basic Code Structure Like React, React Native uses ES6 features including arrow functions and also uses JSX. Here is a snippet from the React Native . documentation import React, { Component } from 'react';import { Text } from 'react-native'; export default class HelloWorldApp extends Component {render() {return (<Text>Hello world!</Text>);}} The <Text></Text> is the JSX, which renders just like would on the page. HTML With React, you can just wrap HTML in an enclosing <div> tag, for example: import React from 'react' const Intro = () => {console.log("Intro renders!")return (<div><div className="container"><div className="site-title"><h2>Home Page</h2></div><p> Lorem ipsum dolor sit amet, consectetur adipiscing        elit. Pellentesque pulvinar euismod commodo. Etiam orci dolor, commodo non sem vitae, ultricies porttitor sem.</p></div></div>)} export default Intro; In React Native, it’s critical to use JSX, rather than the HTML tags. For example, if you would like something to render as you imagine HTML would render <p>Hello world!</p> Then you would write it using the <Text> JSX tags: <Text>Hello world!</Text> If you don’t do this, you will get an error message, which is one of the first problems I ran into when getting started with . This error message in this case (which typically displays on the screen you are using as your view — in this case it was on my iPhone) actually was indicating that I was using HTML tags instead of the proper JSX tags. updating my app Updating Screens React is single-page, meaning that you aren’t really moving when you navigate around on the application, but rather different components are just showing up on the page. Coming from web applications where a new page was loaded each time you click on something (thinking about a Rails application for example, or using <a href= “#”>Link</a>) the experience is like a much smoother version of the same concept. It feels similar, just seamless and much quicker. In React Native, however, you navigate between screens or “scenes” using React Native tools. The simplest one suggested by the documentation is , which is an easy-to-use library that lets use set up screens pretty quickly. As mentioned in the , you can also stack and override the routers, meaning you can make adjustments in one place without having it affect your entire program. React Native Navigation documentation Styling And finally, a quick overview of styling. (Documentation .) here React Native does not use CSS. However, for folks who have experience using CSS or a pre-processor like LESS or SASS, teaching yourself how to do styling with React Native should be pretty simple. A lot of the syntax is similar, although the structure is a bit different. All React Native components have the prop “style”, which allows us to make stylistic changes to the component. The style can then be called within the component, such as on a <Text>. export default class StyleExample extends Component {render() {return (<View><Text style={styles.black}>Black Text</Text></View>);}} The style is defined elsewhere in the file (conventionally at the bottom) using the following format const styles = StyleSheet.create({black: {color: 'black',},}); Coming Up A deeper dive into React Native Navigator and creating a Navigation bar and forms! Resources A framework for building native apps using Reactfacebook.github.io React Native | A framework for building native apps using React _I have started to learn React out of curiosity and wanted to know this. Could not find a satisfactory answer in Google…_stackoverflow.com What is difference between React native vs React? _After reading through the docs for native I'm still left with a couple of questions that I'd like to see addressed…_github.com React Native from Navigator to React Router docs/example request · Issue #4747 · ReactTraining… _Answer (1 of 16): React.js was developed by Facebook to address its need for a dynamic and high performing User…_www.quora.com What are five differences between React.js and React Native?

Facebook

Google

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React Native Syntax Basics and Styling

Too Long; Didn't Read

Companies Mentioned

Marcella Maki

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React Native Syntax Basics and Styling

Too Long; Didn't Read

Companies Mentioned

Marcella Maki

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES