采用React框架搭建项目

2024-05-06 15:36:52

使用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框架写的官网示例：

采用React框架搭建项目相关推荐

如何使用React+Elementui搭建项目
基础准备工作由于React很多命令都是基于node.js才能运行,所以第一步要安装node. 1.安装Node.js 因为node.js更新很快,一般都推荐使用nvm来安装管理各个node.js版本 ...
React脚手架搭建项目
React提供了一个用于创建react项目的脚手架库:create-react-app 一.项目的搭建第一步: 全局安装 npm i -g create-react-app 第二步: 切换到准备创建 ...
ABP框架搭建项目系列教程基础版
我现在要着手一个新的项目,也打算用这个框架,所以想要将我一步一步用这个框架的做项目的步骤和想法跟大家分享出来. 经过前面十二篇的基础教程,现在终于该做个总结了. 第一篇,我们建议新手朋友们先通过ABP ...
在react里写原生js_从零开始使用react+antd搭建项目
之前的文章都是自己的学习日志,主要是防止自己遗忘之前遇到的坑.这次将从最基础的项目搭建开始讲起,做一个基于react和antd的后台管理系统.我会一步步进行下去,所以看完本文你哪怕不了解react,应 ...
Vue SEO 优化使用 Vapper SSR 服务器渲染框架搭建项目新手教程
Vapper 简介 Vapper 是一个基于 Vue 的服务端渲染(SSR)框架,它的核心目标是:简单.灵活.强大. 简单:尽最大的努力让开发 SSR 应用与开发 SPA 应用保持一致的体验,降&g ...
React框架创建项目详细流程-项目的基本配置-项目的代码规范
文章目录 React创建项目流程与规范项目规范项目配置目录结构样式重置 Router配置 Redux状态管理 axios配置 React创建项目流程与规范项目规范项目规范: 在项目中都会有 ...
React从零开始搭建项目
一.脚手架创建React项目二. 删除src目录下的所有文件三.创建App.js import React, {Component} from "react";/* 应用的根组 ...
Dva + React + Mock 搭建项目（主要讲解DvaJs）
一.初始化dva 1.安装 dva-cli $ npm install dva-cli -g $ dva -v dva-cli version 0.9.1 2.创建新应用安装完 dva-cli 之后 ...
乾坤qiankun框架搭建项目
主应用 vue2项目搭建第一步.创建vue2的项目与正常创建无异,在这里不做过多描述: 第二部.将创建好的vue2项目作为主应用,在根目录先安装qiankung yarn add qiankun # ...

最新文章

热门文章