react 搭建项目并运行,react框架菜鸟教程

使用vue框架也做了很多项目，基本的需求业务逻辑都没可满足，可是依然对框架内部工作原理不是很熟悉，只是套用一些指令方法去应用，做开发越接近本质收入越大。

原生的一些写法可能已经很过时了，但是仍然要熟悉原理，否则一直停留在业务层，而非技术层。
花了一点时间，了解了下react框架。

react框架其实更注重原生思路，也偏原生的写法，而vue框架不关注底层原理，只使用方法。
讲效率的话若降低成本可以选vue，如果开发大型项目选react会更灵活。

开始搭建react项目

安装

1、安装react

安装两种方式，通过npm或者yarn：

$ npm install -g create-react-app
$ yarn add -g create-react-app

查看版本

$ create-react-app --version

2、创建应用

$ create-react-app react-demo

注意事项：

创建过程中如果 create-react-app 超级慢的解决方法：

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

配置后可通过下面方式来验证是否成功

$ npm config get registry
或 $ npm info express

3、切到项目路径下

$ cd react-demo

4、运行项目

$ npm run start

其他库安装命令

1、安装网络请求库axios

$ npm add axios --save

2、添加scss样式扩展

$ npm add node-sass -S

3、安装Ant UI组件库

$ npm add antd -S

4、安装路由

$ npm add react-router-dom --save

5、scss报错添加

$ npm add node-sass -S

其他说明：

1、react生成项目下没有任何关于webpack的配置，react脚手架已经内置了webpack

2、运行eject暴露出来webpack的一些配置信息，注意此操作无法还原

$ yarn run eject

3、index.html 是项目打包执行的入口

4、public/index.html 是项目工程入口

5、Vue中 css，js，html 都是分离的，而react中只有样式是分离的，html和js是一起的

6、react 新版框架不需要安装scss就可以直接使用，若报错

$ npm add node-sass -S

7、安装antd UI组件库：

$ npm add antd -S

React UI 组件库 Ant Design of React

采用react框架写的官网示例：