我的第一个React应用

前言

说起前端框架，我的第一反应就是Angular，Vue和React了，在实习的时候Vue和Angular都使用过，也写过相关的博客，包括自己毕业设计就是Angular来做的，但是毕业之后，在现在家公司就没有机会去使用这些框架(实际上我对于Java更加感兴趣)，所以现在对于前端框架的了解可能只是知道一些名词了。这次由于公司产品新的版本用的是React框架，所以有了学React的想法(当然只是想简单的学一些，够用就行了)

开发环境

在建立React应用之前，我们得做一些前期的准备，就好像配置Java环境变量一样，我们需要安装nodeJS。Node.js 是运行在服务端的 JavaScript，如果你是一名前端开发，不懂Java等编程语言，又想创建自己的服务，那么NodeJS就是首选。

NodeJS官网：https://nodejs.org/en/

nodeJS的安装是界面化的过程，这里就不说了。当我们安装好node之后,npm也会被附带安装上，npm其实是Node.js的包管理工具，就想Maven一样

验证是否安装成功很简单，我们控制台输入：

node -v

和

npm -v

当出现版本信息的时候，说明我们就安装成功了

创建应用

当开发环境搭建好之后，我们就可以来创建React应用了。创建React应用有一种很简单的方式，使用create-react-app命令行，同事说这种方式适合我们初学React的新手。我们先来看一下如何使用这种命令，然后再看以下这个命令行的作用

//全局安装create-react-app npm install -g create-react-app

我在安装create-react-app的时候出现权限不足的情况，所以需要使用sudo来提权(Mac)

安装好create-react-app有两种方式来创建React应用：命令行和开发工具，命令行如下

// 创建第一个React.js应用,也可以使用Idea来搭建 create-react-app my-app

我这里使用Idea来搭建React应用。

当这里应用就成功的创建了，之后我们使用npm start来启动React

我这里出现报错，同事跟我说要我把node_moudle文件夹删掉，在项目的目录下重新运行 npm install命令

此时启动就没有问题，浏览器打开界面如下，这里加载的界面就是App.js里面的内容

目录结构：

创建路由

我们上面创建的应用是一个单页面应用，但是我们实际的项目肯定是有很多页面组成的，页面与页面之间肯定能互相跳转，此时我们就需要创建路由了(还好接触过Vue和Angular不然百度都不知道怎么搜)，React创建路由，也需要我们安装一些包

npm install --save react-router-dom

安装好之后，我们就可以正式来使用路由了

我们先创建一个页面，我这里模仿App.js

import React from 'react'

export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a href='#/detail'>新的页面</a>
            </div>
        )
    }
}

然后构建路由组件，import导入App和自己创建的index，将两个页面组件使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面。

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Index from '../demo/index';
import Detail from '../App';


const BasicRoute = () => (
    <HashRouter>
        <Switch>
            <Route exact path="/Index" component={Index}/>
            <Route exact path="/detail" component={Detail}/>
        </Switch>
    </HashRouter>
);

export default BasicRoute;

最后我们将路由组件配置到src/目录下index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import Router from './router/Router'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    // <App />,
    <Router/>,
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

然后启动服务，效果图

解析

这一部分我们说一些命令行和组件标签

create-react-app

create-react-app是一个全局的命令行工具用来创建一个新的项目

一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖，再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。 现在如果你正在搭建react运行环境，使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-scripts 是唯一的 额外的 构建依赖在你的package.json中，你的运行环境将有每一个你需要用来构建一个现代React app应用程序。你需要的依赖，和在配置文件中编写的配置代码，react-scripts 都帮你写了，比如：react-scripts帮你自动下载需要的 webpack-dev-server 依赖，然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来 实例化 WebpackDevServer ，并且运行启动了一个使用 express 的Http服务器，现在你只需要专心写src源代码就可以了。省去了很多精力，最适合快速上手一个demo了

react-router-dom

使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。这里我们使用的是react-router-dom。

HashRouter

Router路由有BrowserRouter和HashRouter组件。在下面的单页应用中，我们使用的是HashRouter

Switch组件

可以把Switch当作Java中的Switch语句，当<Switch> 被渲染时，它仅会渲染与当前路径匹配的第一个子<Route>

React DOM在页面元素渲染的时候，首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

对Demo有兴趣的小伙伴可以去小程序进行下载，此外小程序每日都会有面试题更新