小白的学习笔记 —— 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

安装配置好后,项目环境就已经建立了,下面就是需要编译项目并自动发布到手机上。
这里需要做一些准备:

  1. 配置ANDROID_HOME的环境变量(位置就是Android的SDK的根目录)
  2. 配置PATH,在里面多加入一个Android的adb命令的位置。

(这一步是为了能直接“召唤”你的模拟器,不用每次都去tools目录下)

测试再次运行时,会发现出现一些错误提示,这是因为React本身的bug造成的。
需要我们单独启动包管理器(将项目打包上传到模拟器的那个程序)
react-native start --reset-cache

(当然,用真机就不用启动这个包管理器啦~)

然后再打开另一个命令行窗口,执行启动命令(react-native run-android

我们的项目就算是创建完成啦~完成后我们的项目内容差不多是这样啦~
小白的学习笔记 —— React环境构建 & 常用语法
看到这个截图,我们在开发的时候需要在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>
      );
   }
 }

完成后的代码:
小白的学习笔记 —— React环境构建 & 常用语法


总的来说,只要有一定的html & css基础的同学,研究一小会儿就能搞明白啦~
感谢你的阅读哦~有任何问题可以在评论区指出来!感谢!

上一篇:用 Flask 来写个轻博客 (17) — MV(C)_应用蓝图来重构项目


下一篇:IDEA构建Spark编程环境和用Scala实现PageRank算法