React入门 | 青训营笔记

用户2147483647
148 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第10天。

今天简单介绍一下React的内容。

感兴趣的可以看看我之前的文章：红包算法之如何助你抢到大红包 | 青训营笔记 - 掘金 (juejin.cn)

ReactJS简介

  • React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
  • 由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

前端三大主流框架

  • Angular.js：出来最早的前端框架，学习曲线比较陡，NG1学起来比较麻烦，NG2开始，进行了一系列的改革，也开始启用组件化了；在NG中，也支持使用TS（TypeScript）进行编程；
  • Vue.js：最火的一门前端框架，它是中国人开发的，对我我们来说，文档要友好一些；
  • React.js：最流行的一门框架，因为它的设计很优秀；
  • windowsPhone 7 7.5 8 10

React与vue.js的对比

组件化方面

什么是组件化：从 UI 的角度，去分析问题，把一个页面，拆分为一些互不相干的小组件，随着我们项目的开发，我们手里的组件会越来越多，最后，我们如果要实现一个页面，可能直接把现有的组件拿过来进行拼接，就能快速得到一个完整的页面， 这样方便了UI元素的重用；组件是元素的集合体；

  1. Vue是如何实现组件化的：.vue 组件模板文件，浏览器不识别这样的.vue文件，所以，在运行前，会把 .vue 预先编译成真正的组件；

  2. React如何实现组件化：在React中实现组件化的时候，根本没有 像 .vue 这样的模板文件，而是，直接使用JS代码的形式，去创建任何你想要的组件；

  • React中的组件，都是直接在 js 文件中定义的；
  • React的组件，并没有把一个组件 拆分为 三部分（结构、样式、业务逻辑），而是全部使用JS来实现一个组件的；（也就是说：结构、样式、业务逻辑是混合在JS里面一起编写出来的）

特点

  • 1 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
  • 2 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新
  • 3 HTML仅仅是个开始
> JSX --TO--> EveryThing

- JSX --> HTML
- JSX --> native ios或android中的组件（XML）
- JSX --> VR
- JSX --> 物联网

React安装搭建

搭建React开发环境之前的准备工作。

       1、必须安装nodejs      注意：安装nodejs稳定版本

       2、安装cnpm用cnpm替代npm

              地址：npm.taobao.org/

              安装cnpm:

                     npm install -g cnpm --registry=registry.npm.taobao.org

       3、用yarn替代npm

              yarn的安装：

                     第一种方法：参考官方文档yarn.bootcss.com/

                     第二种方法：cnpm install -g yarn  或者 npm install -g yarn

搭建React开发环境

第一种方法（老-现在推荐）：

       1、必须要安装nodejs     注意：安装nodejs稳定版本     nodejs版本:v8.11.2            npm版本:v5.6.0

       2.安装脚手架工具   （单文件组件项目生成工具）   只需要安装一次

              npm install -g create-react-app   /  cnpm install -g create-react-app

       3.创建项目   （可能创建多次）

              找到项目要创建的目录：

              create-react-app reactdemo

       4.cd  到项目里面

              cd  reactdemo

              npm start             yarn start运行项目

              npm run build         yarn build 生成项目

第二种方法（新-未来推荐）：

       1、必须要安装nodejs     注意：安装nodejs稳定版本      nodejs版本:v8.11.2           npm版本:v5.6.0

       2.安装脚手架工具并创建项目

              找到项目要创建的目录执行：

              npx create-react-app reactdemo

       4.cd  到项目里面

              cd  reactdemo

              npm start  运行项目（调试）

              npm run build 生成项目（发布）

以上便是React的简单介绍和安装搭建了，如果有不对之处，欢迎指出

avatar
文章
阅读
粉丝