#React native media meta code#

Many frameworks use a specialized templating language which lets you embed code inside markup language. This is JSX - a syntax for embedding XML within JavaScript. The other unusual thing in this code example is Hello world!. If you want, this page has a good overview of ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. import, export, const and from in the example above are all ES2015 features. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. This is the future.įirst of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. Some of the things in here might not look like JavaScript to you. Finally, we have alignItems: 'center', which aligns children of a container in the center of the container's cross axis. This aligns children of a container in the center of the container's main axis. The following style is justif圜ontent: 'center'. In this case, it is the only component, so it will take all the available screen space. Since we only have one container, it will take all the available space of the parent component. The first style that we find is flex: 1, the flex prop will define how your items are going to 'fill' over the available space along your main axis. This container has several styles applied, let's analyze what each one is doing. The Text component allows us to render a text, while the View component renders a container. This function returns a View component with some styles and a Text as its child. Then we define the HelloWorldApp function, which is a functional component and behaves in the same way as in React for the web. On line 2, we import the Text and View components from react-native.First of all, we need to import React to be able to use JSX, which will then be transformed to the native components of each platform.You can also paste it into your App.js file to create a real app on your local machine. If you are feeling curious, you can play around with sample code directly in the web simulators.