React的安装与使用

react 的安装与使用

本文不会告诉你为什么要使用 react 以及 react 的优点,只以实用的角度去介绍

安装 NVM(可选)

GitHub 地址 , 可自行下载 windows 版本一路下一步即可完成安装

Linux

先安装 build-essential

sudo apt-get install build-essential

然后执行命令

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

MacOS

使用 xcode 进行安装

xcode-select --install

安装 Node.js

如果已经安装了 nvm:

nvm install v12.18.3

MacOS

使用 homebrew 直接安装

brew install node

或者去官网下最新稳定版

Node.js 官网

换源(重要)

国内下载速度较慢,我们直接使用淘宝提供的镜像源下载以提高下载速度

npm config set registry https://registry.npm.taobao.org

安装 Create-React-App 脚手架

npm install -g create-react-app

Hello-World!

create-react-app helloworld

然后使用编辑器打开 helloworld 文件夹,这里使用 vscode

然后删掉 src 目录下的 所有文件

之后在 src 目录下新建文件 index.js,内容如下:


首先引入最重要的两个包,react 与 react-dom

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

ReactDOM.render(<div>Hello World</div>,document.getElementById('root'));



ReactDOM.render()方法调用了渲染函数,其中第一个参数表示 DOM 对象,第二个参数表示要替换的节点,这里是 id=root,是固定的,但是第一个参数看起来很奇怪,毫无疑问我们现在是.js 文件,我们却在里面写了一个 HTML 节点。其实这个并非 HTML,虽然他们看起来如此相似,但实际上它是一种新的语法,属于 JS 的扩展,叫 JSX,它允许你在 JS 里用类 HTML 的语法去编写 DOM 对象。

这里提到的 DOM 对象指的是 React 的 DOM 对象,并非真实渲染在浏览器上,而是通过 JS 对象描述了它的结构,它会和现有 DOM 树进行比对并高效更新局部的 DOM 节点,避免了大量而有繁复低效的页面重绘与重排。

需要注意的是,JSX 对象永远只能有一个节点,所以最外层始终要有一个 all in one 的标签包裹,例如 div 就是个不错的选择。

现在让我们来运行一下项目看一下效果:

在控制台输入:

npm run start

默认会运行在本机的 3000 端口上,现在让我们访问 localhost:3000 即可看到 Hello World 字样。

下一章会简单讲述 JSX 的语法并初步了解组件化的思想。最后还要强调一点:如果你学过 Vue 的话,会发现 Vue 操作起来要比 React 要简单的多,可能事实的确如此,但是 Vue 在更新到 3.0 版本后在结构上更加趋近于 React 提出的思想,这说明 React 是有可取之处的,希望大家学习的时候不要带有偏见。

    南木
    南木  2020-11-03, 22:11

    有一说一我喜欢react,因为react可以磨炼我JS语法