2019-08-29 初识 React

199 阅读3分钟

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