React 领路人:jspang.com/ (和一位美女子)
技术胖:一个专注前端开发的人,我的React是看的他的博文学的。推荐一波
React版本:16x
虽说世界上React是使用者最多,但是国内Vue 使用者可能超越React的使用者了。(两个框架都非常优秀)
React简介 (官方网站:https://reactjs.org)
首先不能否认React.js是全球最火的前端框架(Facebook推出的前端框架),国内的一二线互联网公司大部分都在使用React进行开发,比如阿里、美团、百度、去哪儿、网易 、知乎这样的一线互联网公司都把React作为前端主要技术栈。
React的社区也是非常强大的,随着React的普及也衍生出了更多有用的框架,比如ReactNative和React VR。React从13年开始推广,现在已经推出16RC(React Fiber)这个版本,性能和易用度上,都有很大的提升。
需要的前置知识: JavaScript - ES6 、npm基础使用
这个学习也是有一个层次的,需要你先学会React.js的基本知识,然后再学习ReactNative,这样你的学习难度会大大降低。我的学习路程是也这样的,先了解React.js基础,然后基础打好了,开始学习ReactNatvie。
React开发环境搭建
首先安装node.js环境(我是windows系统),检查node 和 npm 版本。然后安装脚手架create-react-app(官方的),作为初学者为了减少踩坑,所以我使用官方的脚手架。
创建第一个React项目
create-react-app demo01
使用脚手架,创建文件夹为 demo01 的项目文件夹。
在这里,可能有人会碰到一些安装失败的问题,你不要惧怕,毕竟怕啥来啥。本人碰到因为网速问题导致的安装失败,之后使用热点完成安装。
public文件夹介绍
favicon.ico : 这个是网站或者说项目的图标,一般在浏览器标签页的左上角显示。
index.html : 首页的模板文件
mainifest.json:移动端配置文件
src文件夹介绍
这个目录里边放的是我们开放的源代码,我们平时操作做最多的目录。
index.js : 这个就是项目的入口文件
index.css :这个是index.js里的CSS文件。
app.js : 这个文件相当于一个方法模块,也是一个简单的模块化编程。
serviceWorker.js: 这个是用于写移动端开发的,PWA必须用到这个文件,有了这个文件,就相当于有了离线浏览的功能。
看到这里,就看到了两个不常见的文件,一个是移动端配置(mainifest.json),还有一个移动端开发(serviceWorker.js)
有一个词: PWA (PWA是Progressive Web App的英文缩写, 翻译过来就是渐进式增强WEB应用, 是Google 在2016年提出的概念,2017年落地的web技术。目的就是在移动端利用提供的标准化框架,在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。)
详细的你们可以网上查询,这里放的是简介。
ES6知识点:(可以用来装一下)
import React,{Component} from 'react'
这其实是ES6的语法-解构赋值,如果分开写就比较清楚了,你可以把上面一行代码写成下面两行.
import React from 'react'
const Component=React.Component
圆括号的使用:
let foo;
{foo} ={foo:'JSPang'};
console.log(foo);
//会报错,使程序正常,我们这时候只要在解构的语句外边加一个圆括号就可以了。let foo;
({foo} ={foo:'JSPang'});
console.log(foo); //控制台输出jspang