Vue基操会了，还有必要学React么？

这是我参与更文挑战的第12天，活动详情查看：更文挑战前端

前言

公众号给npy的前端秘籍node

加vx👉16639199716,拉你进群嗷~❤️react

本专栏会梳理一个Vue coder 对React 尝鲜的经历与过程的知识👍👍👍算法

若是你也是和我同样，有着相同的技术追求，有着进大厂的梦想，那么选择给npy的前端秘籍将是你不错的选择、那么我也愿意同你一块儿共同进步、共同窗习。废话很少说，让咱们立刻开始吧👇npm

React前言

很高兴你能来到这里学习React.js技术，这是本专栏的第一节，主要介绍一下小伙伴们常问的一些问题，虽然废话不少，可是仍是建议你能够花几分钟看一下。编程

React简介

首先不可否认React.js是全球最火的前端框架(Facebook推出的前端框架)，国内的一二线互联网公司大部分都在使用React进行开发，好比阿里、美团、百度、去哪儿、网易、知乎这样的一线互联网公司都把React做为前端主要技术栈。 React的社区也是很是强大的,随着React的普及也衍生出了更多有用的框架，好比ReactNative和React VR。React从13年开始推广，如今已经推出18.x.x版本，性能和易用度上，都有很大的提高。数组

React优势总结

生态强大：如今没有哪一个框架比React的生态体系好的，几乎全部开发需求都有成熟的解决方案。浏览器
上手简单: 你甚至能够在几个小时内就能够上手React技术，可是他的知识很广，你可能须要更多的时间来彻底驾驭它。前端框架
社区强大：你能够很容易的找到志同道合的人一块儿学习，由于使用它的人真的是太多了。服务器

React和Vue的对比

这是前端最火的两个框架，虽说React是世界使用人数最多的框架，可是就在国内而言Vue的使用者颇有可能超过React。两个框架都是很是优秀的，因此他们在技术和先进性上不相上下。

那我的而言在接到一个项目时，我是如何选择的那？React.js相对于Vue.js它的灵活性和协做性更好一点，因此我在处理复杂项目或公司核心项目时，React都是个人第一选择。而Vue.js有着丰富的API，实现起来更简单快速，因此当团队不大，沟通紧密时，我会选择Vue，由于它更快速更易用。（须要说明的是，其实Vue也彻底胜任于大型项目，这要根据本身对框架的掌握程度来决定，以上只是站在个人知识程度基础上的我的总结）

咱们将学到什么？

咱们将学习全部 React 的基础概念，其中又分为三个部分：

编写组件相关：包括 JSX 语法、Component、Props
组件的交互：包括 State 和生命周期
组件的渲染：包括列表和 Key、条件渲染
和 DOM & HTML 相关：包括事件处理、表单。

前提条件

咱们假设你熟系 HTML 和 JavaScript，但即便你是从其余编程语言转过来的，你也能看懂这篇教程。咱们还假设你对一些编程语言的概念比较熟悉，好比函数、对象、数组，若是对类了解就更好了。

环境准备

首先准备 Node 开发环境，访问 Node 官方网站下载并安装。打开终端输入以下命令检测 Node 是否安装成功：

node -v # v10.16.0

npm -v # 6.9.0

注意

Windows 用户须要打开 cmd 工具，Mac 和 Linux 是终端。

若是上面的命令有输出且无报错，那么表明 Node 环境安装成功。接下来咱们将使用 React 脚手架 -- Create React App（简称 CRA）来初始化项目，同时这也是官方推荐初始化 React 项目的最佳方式。

在终端中输入以下命令：

npx create-react-app my-todolist

等待命令运行完成，接着输入以下命令开启项目：

cd my-todolist && npm start

CRA 会自动开启项目并打开浏览器

🎉🎉🎉 恭喜你！成功建立了第一个 React 应用！

如今 CRA 初始化的项目里有不少无关的内容，为了开始接下来的学习，咱们还须要作一点清理工做。首先在终端中按 ctrl + c 关闭刚刚运行的开发环境，而后在终端中依次输入以下的命令：

进入 src 目录

cd src

若是你在使用 Mac 或者 Linux：

rm -f *

或者，你在使用 Windows：

del *

而后，建立咱们将学习用的 JS 文件

若是你在使用 Mac 或者 Linux：

touch index.js

或者，你在使用 Windows

type nul > index.js

最后，切回到项目目录文件夹下

cd .. 此时若是在终端项目目录下运行 npm start 会报错，由于咱们的 index.js 尚未内容，咱们在终端中使用 ctrl +c 关闭开发服务器，而后使用编辑器打开项目，在刚刚建立的 index.js 文件中加入以下代码：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    return <div>Hello, World</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
复制代码

咱们看到 index.js 里面的代码分为三个部分。

首先是一系列导包，咱们导入了 react 包，并命名为 React，导入了 react-dom 包并命名为 ReactDOM。对于包含 React 组件（咱们将在以后讲解）的文件都必须在文件开头导入 React。

而后咱们定义了一个 React 组件，命名为 App，继承自 React.Component，组件的内容咱们将会在后面进行讲解。

接着咱们使用 ReactDOM 的 render 方法来渲染刚刚定义的 App 组件，render方法接收两个参数，第一个参数为咱们的 React 根级组件，第二个参数接收一个 DOM 节点，表明咱们将把和 React 应用挂载到这个 DOM 节点下，进而渲染到浏览器中。

注意

上面代码的三个部分中，第一部分和第三部分在整篇教程中是不会修改的，同时在编写任意 React 应用，这两个部分都是必须的。后面全部涉及到的代码修改都是关于第二部分代码的修改，或者是在第一部分到第三部分之间插入或删除代码。

JSX 语法

首先咱们来看一下 React 引觉得傲的特性之一 -- JSX。它容许咱们在 JS 代码中使用 XML 语法来编写用户界面，使得咱们能够充分的利用 JS 的强大特性来操做用户界面。

一个 React 组件的 render 方法中 return 的内容就为这个组件所将渲染的内容。好比咱们如今的代码：

render() {
    return <div>Hello, World</div>;
}
复制代码

这里的 <div>Hello, World</div> 是一段 JSX 代码，它最终会被 Babel转译成下面这段 JS 代码:

React.createElement(
  'div',
  null,
  'Hello, World'
)
复制代码

React.createElement() 接收三个参数：

第一个参数表明 JSX 元素标签。
第二个参数表明这个 JSX 元素接收的属性，它是一个对象，这里由于咱们的 div 没有接收任何属性，因此它是 null。
第三个参数表明 JSX 元素包裹的内容。

React.createElement() 会对参数作一些检查确保你写的代码不会产生 BUG，它最终会建立一个相似下面的对象：

{
  type: 'div',
  props: {
    children: 'Hello, World'
  }
};
复制代码

这些对象被称之为 “React Element”。你能够认为它们描述了你想要在屏幕上看到的内容。React 将会接收这些对象，使用它们来构建 DOM，而且对它们进行更新。

App 组件最终返回这段 JSX 代码，因此咱们使用 ReactDOM 的 render 方法渲染 App 组件，最终显示在屏幕上的就是 Hello, World" 内容。

JSX 做为变量使用

由于 JSX 最终会被编译成一个 JS 对象，因此咱们能够把它当作一个 JS 对象使用，它享有和一个 JS 对象同等的地位，好比能够将其赋值给一个变量，咱们修改上面代码中的 render 方法以下：

render() {
  const element = <div>Hello, World</div>;
  return element;
}
复制代码

保存代码，咱们发现浏览器中渲染的内容和咱们以前相似。

在 JSX 中使用变量

咱们可使用大括号 {} 在 JSX 中动态的插入变量值，好比咱们修改 render 方法以下：

render() {
  const content = "World";
  const element = <div>Hello, {content}</div>;
  return element;
}
复制代码

JSX 中使用 JSX

咱们能够在 JSX 中再包含 JSX，这样咱们编写任意层次的 HTML 结构：

render() {
    const element = <li>Hello, World</li>
    return (
      <div> <ul> {element} </ul> </div>
    )
  }
复制代码

JSX 中添加节点属性咱们能够像在 HTML 中同样，给元素标签加上属性，只不过咱们须要遵照驼峰式命名法则，好比在 HTML 上的属性 data-index 在 JSX 节点上要写成 dataIndex。

const element = <div dataIndex="0">Hello, World</div>;
复制代码

注意

在 JSX 中全部的属性都要更换成驼峰式命名，好比 onclick 要改为 onClick，惟一比较特殊的就是 class，由于在 JS 中 class 是保留字，咱们要把 class 改为 className 。

const element = <div className="app">Hello, World</div>;
复制代码

实战

在编辑器中打开 src/index.js ，对 App 组件作以下改变：

class App extends React.Component {
  render() {
    const todoList = ["给npy的前端秘籍", "fyj", "每天的小迷弟", "仰望毛毛大佬"];
    return (
      <ul> <li>Hello, {todoList[0]}</li> <li>Hello, {todoList[1]}</li> <li>Hello, {todoList[2]}</li> <li>Hello, {todoList[3]}</li> </ul>
    );
  }
}
复制代码

能够看到，咱们使用 const 定义了一个 todoList 数组常量，而且在 JSX 中使用 {} 进行动态插值，插入了数组的四个元素。

提示

无需关闭刚才使用 npm start 开启的开发服务器，修改代码后，浏览器中的内容将会自动刷新！

你可能注意到了咱们手动获取了数组的四个值，而后逐一的用 {} 语法插入到 JSX 中并最终渲染，这样作还比较原始，咱们将在后面列表和 Key小节中简化这种写法。

在这一小节中，咱们了解了 JSX 的概念，而且实践了相关的知识。咱们还提出了组件的概念，可是并无深刻讲解它，在下一小节中咱们将详细地讲解组件的知识。

总结

专栏第一篇与你们一块儿学习了React基本知识、后续还会有更精彩的哇、一块儿加油哇~

❤️ 感谢你们

若是你以为这篇内容对你挺有有帮助的话：点赞支持下吧，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）关注公众号给npy的前端秘籍，咱们一块儿学习一块儿进步。以为不错的话，也能够阅读其余文章（感谢朋友的鼓励与支持🌹🌹🌹）