2024年Web前端最新给所有开发者的React Native详细入门指南,2024年展望前端原生开发的现状

读者福利

========

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)


建议先下载好资料后,再阅读本文。demo代码和资料下载

目录


前言


从最开始开始接触 React Native(以下简称 RN),到写下第一篇博文后,就再也没有写过相关的文章了,随着微信小程序的正式发布,其实也又一次将一个概念推到公众面前,那就是全栈式前端,这是个什么概念呢?大概意思就是一个人可以同时写 Android、iOS、Web 程序。可能民间不乏一些大神 Java、OC、Swift、JS 都写得特别好,但我相信大部分人还是和我一样,毕业后只从事一个方向的开发,所以要成为全栈式前端有比较大的困难。

但是随着发 RN 布,这一切似乎变得有了可能。这也是随着社会进步不断要求生产力提高后导致的必然发展趋势。虽然这个概念早在RN前就有了,但是之所以能在这个时间火起来,那就说明时候到了。像手机上的指纹识别一样,并不是苹果第一个集成到手机上,但却是苹果把它用在了最正确的时代。现在连几百元的手机都有指纹识别了。所以如果去年你没有去关注去学习RN 不要紧,但是随着微信发布小程序,这再次说明了全栈式前端是一个趋势,如果你还没有趁机上车,那……那其实也没啥,一门心思写好 Android 其实也是可以的,毕竟专才也是要有的!

哈哈~前面说的有点危言耸听了,但还是希望那些学有余力、热爱并关注前端开发的人能早点搭上这趟车。虽然目前RN还有很多问题,比如首当其冲的就是性能问题,但是随着版本的不断迭代,我相信这个问题迟早会被解决的。你问我那是什么时候?现在RN版本是 0.40,会不会是 1.0 发布的时候呢?哈哈~这个谁能知道呢,但是有生之年肯定会的!说了这么多,让我们正式发车吧!

二、回答一些问题



  • 为什么写此教程

首先主要是出于我们公司业务发展上的要求,并且我对 RN 开发很感兴趣,因为它确实可以提高生产力,所以公司就指派我负责这次 RN 在公司移动端内部的推行。其次是苦于网上虽然关于RN资料很多,但是却没有一个比较系统的学习方案,看视频课程又觉得效率太低,这也导致我在学习RN的过程中浪费了大量的时间去搜集资料。所以我想写一篇文章记录一下我的学习过程,将我从零开始的入门学习心得和大家分享一下。目的就是为了让更多想学 RN 的人,不用再东奔西走的把时间浪费在搜集资料,能够快速的入门进行学习。

  • 本文适合哪些人看?

1.热爱前端开发,并且总想开发一些能看得见的东西

2.对 RN 有着像对女朋友一样的兴趣,愿意去了解他

3.可以不懂 Web 开发,但最好有一定 Android 或者 iOS 开发经验。

4.对 RN 完全不了解的新人(如果是RN老司机不巧看到了这篇文章,我想说…哥,收徒么?我骨骼精奇,是个码代码的好手…哥…诶…别走啊…我还跪着呢!)

  • 如何使用本教程?

看!多看!反复看! 敲!多敲!反复敲!

嘿嘿~说正经的,必须要结合我给出的 Demo 中的代码一起看。而且我会附上我在学习过程中梳理的思维导图文件,可以结合起来和文章一起看,这样学习的思路会更加清晰一些。

  • 需要先学习 JavaScript、HTML、CSS 么?

HTML 和 CSS 没什么要求,略懂就行,不懂也无所谓。但是JS还是要懂一点(卧槽,“一点”是多少?就和菜谱里的盐少许一样难以琢磨)。好吧,我再说详细一点。把阮一峰老师的《 ECMAScript 6 入门》这篇关于ES6的文档花一周时间详细看一下其实就差不多了。至于 JS 里涉及的一些其他特性,闭包什么的,后面入门了再研究也可以。包括 ES7 关于网络请求写法的变化,我们也可以先不用管。

  • 如何编写demo

是不是我们编写每一个知识点的demo都要通过 react-native init XXXX 的方式去新建一个项目呢?当然不是,我们可以把所有代码都写到一个demo里,并通过分包进行管理(app的文件夹是自己创建的,名字自定),这样自己看起来也比较方便。然后每个 demo 都通过 import 的方式导入到 index.android/ios.js 文件中进行使用。

  • 保不保证学习效果?

怎么不问我包不包就业呢?

三、章节内容(预计用时:9.5~14.5天)


1.内容简介


1.1)本教程共分为三个阶段,第一阶段主要是带大家入门,熟悉一些 RN 基础组件、JS 语法等等。该阶段结束后,基本可以搭建一个 App 框架了,甚至可以写一些简单的新闻类 App,在该阶段的教程中我仿写的是【开眼v3.1.2】。

1.2)本文中有大量的内容来自各家博客,所以出于对原文作者的尊重,我会直接给出原文链接并附上作者名字,如果看到对应的章节,请大家跳转到相应的网址去看一下。现在网上关于 RN 的文章太多,看的眼花缭乱结果却往往不容易形成体系,所以我只整理了一些必须的内容,而且相关的内容看我推荐这几篇文章基本也就够了。

1.3)在开始第一阶段的学习前,先来看一下完成这个阶段的学习后,我们大概能做出一个什么效果来。希望借此也能给你一些学习的动力吧!上图(被压缩太厉害了,凑合看吧)!

2.环境搭建(预计用时:1~2天)


按照RN中文社区的指导就可以了。不过过程中会遇到一些坑,我也附上我的踩坑记录。我建议大家可以先看一下踩坑记录,然后再开始安装环境。

2.1) 环境搭建踩坑指南:《一起学》安卓 React Native 开发–踩坑大全(持续更新…)

2.2)环境搭建中文教程,点击跳转RN中文社区

2.3)开发工具安装和配置 :

本文中使用 WebStorm 进行开发,也有人用 Atom 或 Sublime,对此我想说:赶快换 WebStrom 吧。为了不牵扯什么不必要的问题,下载地址我就不贴了,自行破*解吧。我最多只能说一下我用的是下面这个版本的。

安装好 WebStorm 后,为了更便捷的去开发,我们需要安装一些插件,以及进行一些常用配置。比如RN组件库的安装,添加一些常用的Live Templates等,下图是我添加的两个比较常用的,给大家参考一下,至于如何添加 Live Template 大家可以自行百度一下,比较简单,我就不过多赘述了。

《[React Native]去掉WebStorm中黄色警告》——于连林520wcf

配置Live Templates

3.Hello World(预计用时:0.5天)


不教大家写 Hello World 的教程,不是好教程!千万注意!【要看注释】哈!不然会很坑!

import React, { Component } from ‘react’;

import { AppRegistry, Text } from ‘react-native’;

class HelloWorldApp extends Component {

render() {

return (

Hello World!

);

}

}

// 注意,这里用引号括起来的 ‘HelloWorldApp’ 必须和你 init 时创建的项目名一致

AppRegistry.registerComponent(‘HelloWorldApp’, () => HelloWorldApp);

4.了解 index.android/ios.js


index.android.js 和 index.ios.js 分别作为 Android 手机和 iOS 手机上程序开始的入口,所以我们先来了解一下这个文件的结构。

1)组件导入区: 所有用到的组件都需要事先进行导入,包括样式也需要进行导入

**2)核心代码区:**所有逻辑代码编写的地方

**3)组件样式区:**render() 方法中用到的组件的样式,可以集中在这里编写

**4)注册启动组件:**组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入

5.Flex布局(预计用时:2~3天)


Flex 布局是 Web 开发必备的技能,如果你是 Web 开发人员,可以直接跳过该部分内容。但是也需要注意的是 Web 中的一些属性在 RN 中是没有的,而且属性命名是通过小驼峰的方式进行命名的。后面我会附上我自己整理的关于 RN 组件支持的属性大全。可能不完善,但是常用的应该是有了。如果 Flex 布局没有练熟,还是不要看后面的了,所以请多花点时间在这里,甚至可以自己找一些比较有难度布局进行练习。

6.网络请求(fetch)(预计用时:2~3天)

JavaScript

  • js的基本类型有哪些?引用类型有哪些?null和undefined的区别。

  • 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)

  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?

  • JS常见的dom操作api

  • 解释一下事件冒泡和事件捕获

  • 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?

  • 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?

  • this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?

  • call,apply,bind

  • 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链

  • 创建对象的多种方式

  • 实现继承的多种方式和优缺点

  • new 一个对象具体做了什么

  • 手写Ajax,XMLHttpRequest

  • 变量提升

  • 举例说明一个匿名函数的典型用例

  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?

  • attribute和property的区别

  • document load和document DOMContentLoaded两个事件的区别

  • JS代码调试

  • 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 7
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值