使用ReactJs React-Bootstrap 构建网站（1）：环境配置

最新推荐文章于 2024-05-22 00:02:25 发布
最新推荐文章于 2024-05-22 00:02:25 发布
阅读量327 收藏
点赞数
分类专栏： React 文章标签： bootstrap react.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fenboo9416/article/details/120610645
版权

第一步，使用脚手架，构造起React环境

cnpm install -g create-react-app
create-react-app my-app my-app为自己的应用程序名称

第二步，安装React-Bootstrap组件
React-Bootstrap，构造了若干部件，也有参考示例，可以很方便地拿来就使用，不用考虑排版的问题。
React-Bootstrap的使用参照其官方网站

安装它

cnpm install react-bootstrap@next bootstrap@5.1.1

杨平祥 PMO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用ReactJs React-Bootstrap 构建网站（2）：路由器控制
fenboo9416的博客
10-07 247
为什么BootStrap效果显示不出来 因为版本不对的原因，React-BootStrap与BootStrap版本要相配。 本人取了如下的匹配 “bootstrap”: “^4.6.0”, “react-bootstrap”: “^1.5.2”, 这个问题困扰了好长时间，网上没有现成的解答，后来看了它提供的示例，才明白。 示例在如下链接里 https://github.com/react-bootstrap/code-sandbox-examples/blob/master/README.md 路由器的
使用ReactJs React-Bootstrap 构建网站（5）：框架结构
fenboo9416的博客
10-07 260
文件结构 文件结构是设计中重要的一环，需要层次清晰。 在总目录下，需要有index引导文件，接下来一般有app.js文件和路由器的数据存储文件。 路由器存储文件 routes.js const WebSiteRoutes= [ { path: "/dashboard", name: "Dashboard", rtlName: "لوحة القيادة", icon: Dashboard, component: DashboardPage, layout:
在React项目中导入Bootstrap
最新发布
weixin_51621120的博客
05-22 444
Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in 'D:\练习\react-login\src。create-react-app [项目名] //创建React项目。在创建的react项目中重新下载Bootstrap依赖即可。在react项目中找不到下载的Bootstrap依赖。一、新建一个React项目。
使用ReactJs React-Bootstrap 构建网站（4）：布局器的使用
fenboo9416的博客
10-07 406
布局器 bootstrap布局器，网上有不少，但是个人感觉最好的是https://www.layoutit.com/ bootstrap布局器生成出来的html代码，需要再做修整，例如button要改为Button,这是因为React-BootStrap的语法规则要求。 使用布局器，有利于快速地产生一些可修改的代码，以提高工作效率。 ...
React-js-React-Bootstrap：这是一个简单的项目，在这里我们可以参考如何在您的项目中使用React Bootstrap
02-16
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（webpack，Babel，E
React配置使用Bootstrap
Qing_0124的博客
04-28 2124
1.安装Bootstrap依赖 npm install bootstrap@3 --save 2.在入口文件里（src下的index.js）导入Bootstrap依赖和css样式表 import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap'; 3.引入Jquery的在线依赖（public下的index.html） <script type="text/javascript"src="
igorbelem.com:使用ReactJS，Bootstrap构建的个人网站
03-30
【标题】：“igorbelem.com:使用ReactJS，Bootstrap构建的个人网站” 在这个项目中，开发者Igor Belem采用先进的Web开发技术ReactJS和流行的前端框架Bootstrap，构建了一个功能丰富的个人网站。ReactJS是由Facebook...
webpack-react：:package:一个示例项目，以演示如何将ES6，React，SASS和Bootstrap与Webpack捆绑在一起
02-01
本示例项目“webpack-react”展示了如何将 ES6（ECMAScript 2015）语法、React 框架、SASS 预处理器以及 Bootstrap CSS 框架整合到一起，利用 Webpack 进行高效打包。 **1. Webpack 的核心概念** Webpack 是通过...
reactjs-rent-calculator:计算器，用于计算使用 React.js、SASS、Boostrap 构建时您可以负担多少租金
06-03
React.js 租金计算器是一个基于JavaScript的Web应用，利用了React库来构建用户界面，同时结合SASS（Syntactically Awesome Style Sheets）进行样式设计，并且采用了Bootstrap框架以实现响应式布局和组件化设计。...
CH-Listings-App:使用ReactJS（create-react-app）CSS和ReactStrap创建的SPA。 功能分类和加载组件
03-09
**CH-Listings-App** 是一个基于 **ReactJS** 的单页面应用程序（SPA），它利用了 `create-react-app` 工具来快速初始化项目，同时也应用了 **CSS** 和 **ReactStrap** 进行样式设计和组件构建。这个项目的主要目标...
LeagueStats-React:使用 ReactJS 查询联赛统计数据
06-18
- **Create React App**："LeagueStats-React"可能基于Create React App创建，它提供了开箱即用的配置，包括构建、热重载和生产环境优化。 - **Webpack和Babel**：Webpack用于模块打包，Babel用于将ES6+代码转换为...
NodeJS_ReactJS:项目正在考虑React Js，Node Js，Bootstrap，数据库的内容
05-24
使用React JS for FrontEnd和Node JS for BackEnd开发的商店 要使用此项目，您需要： git clone克隆项目或下载.zip 创建数据库及其表。 fulleletro.db和数据库 表格： 评论类别产品 给CD进入BackEnd文件夹并进行安装： / node_modules * npm安装节点模块 然后在nodemon server.js终端中键入nodemon 服务器运行后（它在端口4444上运行） 给CD进入FrontEnd文件夹并执行以下安装： 做/ node_modules安装，最后一个npm启动 React在端口3000上运行
typescript+react+webpack+react-bootstrap搭建
06-29
自己参照搭建的简易demo，直接能跑，目前不含react-route和readx 具体参考文档如下 入门一 https://www.cnblogs.com/baqiphp/p/7647912.html 入门二 https://www.jianshu.com/p/71bbcdc8c1fc typescript配置说明 https://www.tslang.cn/docs/handbook/compiler-options.html eslint typescript配置说明 https://juejin.im/entry/5a156adaf265da43231aa032 webpach typescript配置说明 http://www.css88.com/doc/webpack/guides/typescript/ react-bootstrap http://react-bootstrap.cn/components.html npm 安装步骤 npm init npm i -S webpack webpack-dev-server clean-webpack-plugin tether extract-text-webpack-plugin@next npm i -S css-loader style-loader typings-for-css-modules-loader bootstrap-loader url-loader postcss-loader flie-loader postcss-loader npm i -S typescript ts-loader source-map-loader npm i -S eslint eslint-plugin-react eslint-plugin-typescript typescript-eslint-parser npm i -S csstype npm i -S jquery bootstrap @types/jquery @types/bootstrap npm i -S react-bootstrap react react-dom @types/react-bootstrap @types/react @types/react-dom 配置文件步骤 npm init /*生成package.json*/ tsc --init /*生成tsconfig.json*/ 进入node_modules\.bin目录执行 eslint --init /*生成.eslintrc.json*/ 手工创建webpack.config.js
使用ReactJs React-Bootstrap 构建网站（3）：主题色设置
fenboo9416的博客
10-07 322
主题色设置 定义主题色 定义主题色的css文件，后缀名为scss. 记得要@import 一下bootstrap /* make the customizations */ $theme-colors: ( "info": tomato, "danger": teal ); /* import bootstrap to set changes */ @import "../node_modules/bootstrap/scss/bootstrap"; 引入主题色 引入主题
在React中使用Bootstrap
JackieDYH的博客
06-29 2657
可以在react项目中执行以下命令安装bootstrap npm install bootstrap@3 --save 在使用的时候，直接在index.js文件导入即可 import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap';
创建react-bootstrap的demo工程
megglove的专栏
03-28 341
1.安装react脚手架命令 npm install create-react-app -g 本例中的版本为create-react-app@3.4.1 2.通过react脚手架创建demo工程 create-react-app bootstrap-app-demo 3.测试demo工程可以运行成功 npm install npm start 可以通过ht...
React Bootstrap
Northeast_Husky的博客
09-04 218
Reference:https://react-bootstrap.github.io/getting-started/introduction 1: 安装bootstrap:npm install react-bootstrap bootstrap 成功后会安装这两个东西，版本也许会不一样。 + react-bootstrap@1.3.0 + bootstrap@4.5.2 也可以只安装bootstrap:npm install bootstrap 2：import components...
利用 React 和 Bootstrap 进行强大的前端开发
网罗天下方法，方便你我开发！！！
11-21 2065
创建响应式、交互式和外观引人入胜的 Web 界面是现代前端开发人员的基本技能。幸运的是，借助 React 和 Bootstrap 等工具的出现，制作这些 UI 变得更加简单，花费的时间更少。在本文中，我们将探讨如何将 Bootstrap 与 React 结合使用，进行高效和强大的前端开发。
ReactNative+Node.js+AngularJS+Bootstrap实现基于JS的网上书城APP
攻城诗的酸甜苦辣
05-29 678
这是毕设做的项目，时间不够主要是在用RN做移动端的应用。现在有时间重新整理一下，然后把web端的后台管理系统也做一下，web端的后台管理系统主要用Node.js+AngularJS+Bootstrap来实现，会继续沿用当初做的部分，然后改善~ 源码地址：https://github.com/Orangetsss/WBS 下面贴上几张效果图（自己随便做的效果~美观度emm…将就着看）： ...
react-native link react-native-pdf zsh: command not found: react-native
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： 1. 打开命令提示符或PowerShell。 2. 运行以下命令来安装react-native-cli： ``` npm install -g react-native-cli ``` 3. 等待安装完成后，你应该能够在命令提示符或PowerShell中使用react-native命令。 Mac： 1. 打开终端。 2. 运行以下命令来安装react-native-cli： ``` sudo npm install -g react-native-cli ``` 输入你的密码以确认安装。 3. 安装完成后，运行以下命令来查找react-native-cli的安装路径： ``` which react-native ``` 记下这个路径，我们称之为路径A。 4. 打开你的bash配置文件（例如：~/.bash_profile、~/.bashrc、~/.zshrc等）。 5. 在文件末尾添加以下行： ``` export PATH="$PATH:路径A" ``` 将路径A替换为你在步骤3中记录的路径。 6. 保存并关闭文件。 7. 在终端中运行以下命令来使配置生效： ``` source ~/.bash_profile ``` 如果你使用的是其他bash配置文件，请相应地修改命令。 完成上述步骤后，你应该能够在终端中使用react-native命令了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值