小白的学习笔记 —— React环境构建 & 常用语法
我是小白，一名励志 被生活所迫 走向全栈工程师的小同学，心情美美哒。今天，我又开始了我的学习路程，今天开始的这一章节，是前端——作为一个严重强迫症患者本人最不愿意触碰的领域 o(╥﹏╥)o 。
先附上阿里云大学课程的链接哈~怕写的不好，大家不懂的地方可以翻看一下
React 入门教程（开发文档）: https://edu.aliyun.com/course/483
React前端开发入门与实战 : https://edu.aliyun.com/course/29
还有RN中文官网 —— https://reactnative.cn/
一、搭建开发环境
下面就需要开始使用React和React-Native开发Android的移动应用程序。
需要准备几个软件：
- Android Studio（3.0以上版本）【这个就是为了有模拟器……可以用真机】
- Nodejs
- 模拟器（自带的）
首先启动Android模拟器，可以使用命令行方式，也可以使用Android Studio的软件方式启动。
命令行启动，需要先在命令行中进入到Android SDK的tools目录下，然后执行emulator -list-avds列出现有的模拟器，然后可以通过 emulator @模拟器名称 来启动模拟器。
启动后，通过npm命令，安装react-native-cli支持库。 npm install -g react-native-cli
安装好后，应该可以在命令行中运行react-native命令。
然后在你想创建项目的文件夹下，运行 react-native init 项目名 来创建一个项目。（mac记得加sudo）
安装配置好后，项目环境就已经建立了，下面就是需要编译项目并自动发布到手机上。
这里需要做一些准备：
- 配置ANDROID_HOME的环境变量（位置就是Android的SDK的根目录）
- 配置PATH，在里面多加入一个Android的adb命令的位置。
（这一步是为了能直接“召唤”你的模拟器，不用每次都去tools目录下）
测试再次运行时，会发现出现一些错误提示，这是因为React本身的bug造成的。
需要我们单独启动包管理器（将项目打包上传到模拟器的那个程序）react-native start --reset-cache
（当然，用真机就不用启动这个包管理器啦~）
然后再打开另一个命令行窗口，执行启动命令（react-native run-android）
我们的项目就算是创建完成啦~完成后我们的项目内容差不多是这样啦~
看到这个截图，我们在开发的时候需要在App.js里面开始编写~
二、React基本语法 —— JSX
2.1 模块化
可以把一些通用的功能或者界面上一样的布局等内容，封装到一个js文件里，通过导出的方式，让其他js可以使用。
语法： export default {所有要导出的类、变量、以及方法}
class Timer {
getTime() {
return new Date().getTime();
}
}
let a = 10 ;
function test() {
console.log("Hello World");
}
export default {Timer,a,test};2.2 渲染内容到页面上
在使用React进行开发时，所有的js必须导入React的相关支持库。其中一个叫ReactDOM的类可以将js中的页面代码渲染到HTML中某个页面元素中。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
let div = <div id="test_div">
<font color='red'>Hello World</font>
</div>;
ReactDOM.render(div, document.getElementById('root'));2.3 React组件
这里的组件就类似于HTML中的标签，所有React组件都是一个类，继承了React中的Component对象，并覆写了render()方法，来生成一段html页面。需要注意的是，在HTML中，理论上标签不区分大小写，但是在JSX语法中，必须小写，大写会被认为是React的组件。
React中为了能将一些通用的内容可以重复使用，会把一些JSX语法组成的内容封装到一个Component里，作为组件来使用。组件的基本语法如下：
import React, { Component } from 'react';
import './title.css';
class TitleBar extends Component {
render() {
// 必须通过return返回需要的元素
return (
<ul>
<li>今日最新</li>
<li>星级评测</li>
<li>新游预告</li>
<li>时下热门</li>
</ul>
);
}
}
export default TitleBar;如果想让组件实现一些变化，这里React提供了props的属性操作。
import React, { Component } from 'react';
class TitleItem extends Component {
constructor(props) {
super(props);
}
render() {
return (
<li>{this.props.value}</li>
);
}
}
class TitleBar extends Component {
constructor(props) {
super(props);
let arr = this.props.allValues.split(",") ;
let itemArray = new Array();
for (let i = 0;i < arr.length;i++) {
itemArray[i] = <TitleItem value={arr[i]}/>
}
this.itemArray = itemArray;
}
render() {
// 必须通过return返回需要的元素
return (
<ul>
{this.itemArray}
</ul>
);
}
}
export default TitleBar;import React from 'react';
import ReactDOM from 'react-dom';
import TitleBar from './index/title';
ReactDOM.render(<TitleBar allValues="首页,关于"/>,
document.getElementById('root'));2.4 事件处理
这里编写的组件也可以通过onXxxx事件来进行交互。
但是，这个交互是无法影响页面的显示结果的，因为页面是在打开的时候，执行的render()来渲染，而调用事件时，默认时不重新渲染的。
这里如果想重新渲染，需要通过修改state的属性来实现。
import React, { Component } from 'react';
import './title.css';
class TitleItem extends Component {
constructor(props) {
super(props);
this.state = {classValue:"not_selected"};
}
changeColor = () => {
// console.log("0--0------");
this.setState({
classValue:"selected"
});
}
changeColorOut = () => {
this.setState({
classValue:"not_selected"
});
}
render() {
return (
<li className={this.state.classValue} onMouseOut={this.changeColorOut} onMouseOver={this.changeColor} key={this.props.value}>{this.props.value}</li>
);
}
}
class TitleBar extends Component {
constructor(props) {
super(props);
let arr = this.props.allValues.split(",") ;
let itemArray = new Array();
for (let i = 0;i < arr.length;i++) {
itemArray[i] = <TitleItem key={i} value={arr[i]}/>
}
this.itemArray = itemArray;
}
render() {
// 必须通过return返回需要的元素
return (
<ul>
{this.itemArray}
</ul>
);
}
}
export default TitleBar;import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import TitleBar from './index/title';
import * as serviceWorker from './serviceWorker';
// let div = <div id="test_div">
// <font color='red'>Hello World</font></div>;
ReactDOM.render(<TitleBar allValues="首页,关于"/>,
document.getElementById('root'));熟悉以上几点我们就可以开始开始我们的工作啦~
三、React Native的界面开发
RN的组件样式需要通过StyleSheet来控制
1. View
控制布局的组件，类似于html、css中的div。
通过集成Component来建立导出的组件对象。通过覆写render()方法来返回显示的内容，在这里建立View进行分割界面的操作，再通过StyleSheet控制界面的比例。（比例通过flex属性来设置）
2. Text
很明显的文本框~用于显示纯文本。
3. Image
图片组件，用于显示图片
4. TextInput
文本输入框
For Example
样式代码
import React, {Component} from 'react';
import {ImageBackground,Button,Dimensions,StyleSheet,Text, View,Image} from 'react-native';
//
var {height, width} = Dimensions.get('window');
let styles = StyleSheet.create({
all: {
flexDirection: 'column',
height: height,
backgroundColor: 'rgb(226,226,226)',
},
sometext: {
flex: 5,
},
textitem: {
height: height/12,
justifyContent: 'center',
},
gversion: {
flexDirection: 'row',
},
nowversion: {
},
newversion: {
},
newversiontext: {
color: 'rgb(0,156,255)',
},
});【备注：
内容排列方式flexDirection: 'column' column为竖直排列，row为水平排列。
内部组件用flex给数值按比例分配空间。】
输出组件：
export default class Today extends Component<Props> {
constructor(props) {
super(props);
}
render() {
return(
<View style={styles.all}>
<View style={styles.sometext}>
<ImageBackground
source={flatitembg}
style={{width: width, height: height/12}} >
<View style={styles.textitem}>
<Text></Text>
</View>
</ImageBackground>
<ImageBackground
source={flatitembg}
style={{width: width, height: height/12}} >
<View style={styles.textitem}>
<View style={styles.gversion}>
<View style={styles.nowversion}><Text> 当 前 版 本 : 1.0</Text></View>
<View style={styles.newversion}><Text style={styles.newversiontext}>（有新版本1.1）</Text></View>
</View>
</View>
</ImageBackground>
<ImageBackground
source={flatitembg}
style={{width: width, height: height/12}} >
<View style={styles.textitem}>
<Text> 官 方 网 站 : www.ahanwhite.com（未运营）</Text>
</View>
</ImageBackground>
<ImageBackground
source={flatitembg}
style={{width: width, height: height/12}} >
<View style={styles.textitem}>
<Text> 官 方 微 博 : @白安瀚</Text>
</View>
</ImageBackground>
<ImageBackground
source={flatitembg}
style={{width: width, height: height/12}} >
<View style={styles.textitem}>
<Text> 微信公众号 : 小白的学习日记</Text>
</View>
</ImageBackground>
</View>
</View>
);
}
}完成后的代码：
总的来说，只要有一定的html & css基础的同学，研究一小会儿就能搞明白啦~
感谢你的阅读哦~有任何问题可以在评论区指出来！感谢！
