آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش React Native -آموزش مفاهیم پایه React Native

دوره های مرتبط با این مقاله

مفاهیم پایه React Native

React Native مانند React است، اما به جای component های مبتنی بر وب، از component های native به عنوان اجزای سازنده application استفاده می کند. برای فهم ساختار پایه یک React Native application، باید کمی با مفاهیم پایه React مثل JSX، component ها، state، و props آشنا باشید. اگر با React آشنا هستید، هنوز مواردی مختص React Native هستند که باید یاد بگیرید، مثل component های native. این آموزش برای همه مناسب است، چه تجربه کار با React داشته باشید چه نه.


آموزش React Native

اولین برنامه، Hello World!

طبق سنت قدیمی برنامه نویس ها، اولین برنامه ما یک application ساده است که هیچ کار نمی کند جز اینکه یک Hello, World! ساده را نشان دهد:


import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
  render() {
    return (
                        < view style="{ {" flex:="" 1,="" justifycontent:="" "center",="" alignitems:="" "center"="" }}=" " >
                        < text >Hello, world!< /text >
      < /view >
    );
  }
}

می توانید در شبیه سازهای تحت وب با کدها کار کنید. میتوانید کد را در فایل App.js روی سیستم خودتان بگذارید و یک app روی سیستم خودتان بسازید.

چه اتفاقی می افتد؟

کدهایی که نوشتیم ممکن است اصلا شبیه جاوا اسکریپت نباشد. نگران نباشید، این آینده ی جاوا اسکریپت است.

ES2015 یا همان ES6 مجموعه ای از تغییرات روی جاوا اسکریپت است که حالا بخشی از استاندارد رسمی آن شده، اما هنوز همه ی مرورگرها از آن پشتیبانی نمی کنند، به همین دلیل هنوز به قدر کافی در زمان develop برای وب استفاده نمی شوند. React Native از ES2015 پشتیبانی می کند. می توانید از آن بدون هیچ دغدغه ای درمورد سازگاری استفاده کنید. کلمات کلیدی مثل import، from، class، extends در مثال بالا همه از ویژگی های ES2015 هستند. اگر با ES2015 آشنا نیستید، احتمالا فقط با خواندن همین آموزش آن را یاد می گیرید. این صفحه (لینک) مروری روی ویژگی های ES2015 دارد.

قطعه کد نامعمول دیگر این مثال < code >< view >< text >Hello world!< /text >< /view >< /code > است. این JSX است. این syntax است که XML را درون جاوااسکریپت می نشاند. Framework های زیادی از زبان قالبی خاصی استفاده می کنند که به شما اجازه استفاده از کد درون markup language را بدهد. این syntax شبیه Html تحت وب به نظر می رسد، با این تفاوت که به جای استفاده از المان هایی چون تگ div یا تگ span، از component های React استفاده می شود. در این مثال، < text > یک component آماده است که متنی را نشان می دهد و View مثل تگ span است.< /text >


آموزش پروژه محور React Native

component ها

این قطعه کد یک component جدید را تعریف می کند. وقتی یک React Native application می نویسید چندین component خواهید داشت. هرچیز که روی صفحه می بینید یک component محسوب می شود. یک component می تواند بسیار ساده باشد. تنها چیزی که نیاز دارد یک تابع render است که JSX برای render شدن برمی گرداند.

این app کار زیادی نمی کند. برای اینکه با component ها کارهای جالبتری انجام دهیم باید درمورد Props بدانیم.

  • 735
  •    0
  • تاریخ ارسال :   1398/05/28

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .