史上最全的React全家桶+Spring Boot(JAVA)分布式实战（一） - 好文

很多小伙伴都比较疑问，我们学习了很多的技术库，看了很多的官方文档，怎么才能独立做一个小的项目呢？把我们的知识运用到实战当中呢？别急，本教程会一步一步的带领大家，做一套前后端分离的项目，最后上线部署到阿里云服务。（腾讯云、百度云同理，关键看哪个便宜。哈哈，开个玩笑，言归正传。）

首先来介绍下本教程用到的技术栈，用的是比较流行的React架构作为前端页面渲染，有的小伙伴可能用的是Vue或者是AngularJS,没关系，我后面系列教程涉及的。那我们后端用的技术是JAVA语言，java自从Sun
Microsystems公司于1995年5月推出以来，收到了广泛的欢迎，连续评为使用最多、最广泛的语言。Spring有作为java中最优秀的架构，你没有理由拒绝它。

<>技术简介

（1）React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的
V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React
拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React特点

声明式设计 React采用声明范式，可以轻松描述应用。
高效 React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 React可以与已知的库或框架很好地配合。
组件通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
JSX JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
单向响应的数据流 React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
（2） Spring Boot是构建所有基于Spring的应用程序的起点。Spring Boot旨在尽可能快地启动和运行，只需最少的Spring前端配置。

<>环境搭建

欲先攻其事，必先利其器（不说明自己使用的环境行为都是耍流氓），网上的工具有很多，每个人都有每个人的爱好，我不勉强，在这里我只介绍我这边用的一些比较好用的一些工具。（
再次声明，本教程是实战教程，不是入门教程，下面工具自行下载安装，如果安装问题可以在下边评论我，我会统一回复！）
1、vscode(Visual Studio Code)+Node.js+git 2、JDK1.8(springboot 要求最低版本)+intellij
idea+maven 3、Oracle 11g （或者更高，不过会有一些函数语法差异）+ Redis server(缓存)
装好之后，查看JAVA环境是否安装成功，打开DOC命令行工具，输入java -version
C:\Users\hp>java -version java version "1.8.0_161" Java(TM) SE Runtime
Environment (build 1.8.0_161-b12) Java HotSpot(TM) 64-Bit Server VM (build
25.161-b12, mixed mode)
查看NODE.JS环境是否安装成功，打开DOC命令行工具，输入npm -version
C:\Users\hp>npm -version 5.6.0
还有童鞋会问intellij idea不是收费的吗？不要急，这里给大家介绍一个网站，把里面的注册服务地址粘贴进去就可以了。传送门：
http://idea.lanyus.com/ <http://idea.lanyus.com/>

<>安装依赖

到此我们的工具已经下载安装好了，不过别急，我们还需要下载我们工程所需要依赖，React给我们提供了一整套技术栈，在这里我们选择：
create-react-app:快速构建工具 React-Router：路由管理器 Redux（熟悉mobx可以自行安装）：状态管理器
webpack:项目管理工具(create-react-app自动安装好了，无需手动安装)
babel：ES6语法转换工具(create-react-app自动安装好了，无需手动安装) Ant Desgin：蚂蚁金服退出的UI组件库，开箱即用
babel-plugin-import:按需引入插件
接下来是我们的Spring
Boot依赖这里我们借助maven项目依赖工具，IDEA会根据pom.xml文件配置自动下载依赖，这里简单说下，我们用的是阿里巴巴的Durid连接池，和Mybatis包来对数据库进行操作。
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version> </properties> <dependencies> <dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.2</version>
</dependency> <dependency> <groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId> <scope>test</scope>
</dependency> <dependency> <groupId>com.alibaba</groupId>
<artifactId>druid</artifactId> <version>1.1.6</version> </dependency>
<dependency> <groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId> </dependency>  <dependency>
<groupId>com.oracle</groupId> <artifactId>ojdbc14</artifactId>
<version>10.2.0.3.0</version> </dependency> <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency>
<groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId>
<version>3.3.2</version> </dependency> <dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId> <version>4.3.1</version> </dependency>
</dependencies>
好了，到了这里我们的环境和依赖都已经安装好了，接下来都要动手撸代码了！

<>目录

【史上最全的React全家桶+Spring Boot(JAVA)分布式实战（一）】
<https://blog.csdn.net/weixin_43404667/article/details/83045016>
【史上最全的React全家桶+Spring Boot(JAVA)分布式实战（二）】
<https://blog.csdn.net/weixin_43404667/article/details/83045689>

热门工具换一换