欢迎Follow我的Github,博客会同步在Github的Blog仓库更新。
- Github地址: LeoMobileDeveloper
前言
想来想去,还是需要写一篇文章来介绍下JavaScript和React的基本知识。最初开发ReactNative的时候,完全没接触过React,大学那会简单学了点JS。毕业后一直在某五百强外企上班。做的东西也乱七八糟的,搞过大数据,搞过物联网,不过看我博客的同学应该知道,我对iOS和Android还是比较喜欢的。所以,博客都是写的都是移动端的东西。好像扯的有点多了,本文的目的就是为了那些JS和React小白提供一个快速入门,能够在看React Native语法的时候能够不那么吃力,有过JS经验的同学可以直接略过了
准备工作
先安装React Native,然后初始化一个示例工程
react-native init JSReactBasics
会生成如下一个目录
然后,XCode打开JSReactBasics.xcodeproj,运行模拟器会看到如下截图
本文,示例代码都是修改的index.ios.js
,每次修改后选择保存。Command + R
就可以动态刷新了。
默认创建的index.ios.js如下
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
//导入一些必要的模块
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
//类,这是默认的载入类,继承自Component,Component类似于Android和iOS中的View
class JSReactBasics extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{
'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
//定义风格
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('JSReactBasics', () => JSReactBasics);
什么是JavaScript?
JS是一个轻量级的,解释型的讲函数视为一级公民的程序设计语言。他是一种基于原型的多范式动态脚本语言,支持面向对象,命令式编程和函数式编程。
JavaScript的标准是 ECMAScript,React Native的语法是基于ECMAScript 6,简称ES6.
Tips:Java和JavaScript语法很像,但是用处完全不同,而且也是两个几乎没关系的东西
关于Java和JS的区分,可以见如下表
JavaScript | Java |
---|---|
面向对象。不区分对象类型。通过原型机制继承,任何对象的属性和方法均可以被动态添加。 | 基于类系统。分为类和实例,通过类层级的定义实现继承。不能动态增加对象或类的属性或方法 |
变量类型不需要提前声明(动态类型)。 | 变量类型必须提前声明(静态类型)。 |
不能直接自动写入硬盘。 | 可以直接自动写入硬盘 |
JS的基础知识
声明
- var 声明变量,可以在声明的时候初始化为一个值
- let 声明块范围局部变量,可以在声明的时候初始化一个值
- const 声明一个只读常量
Tips:JS是大小写敏感的
变量,常量
- 命名要以数字字母下划线开头
例如,在class ReactJSBasics
上添加两行
var mainText = "来自Leo的博客"
var subText = "欢迎阅读"
Tips:JS是一个动态类型语言(d