初学React，制作案例页面1

已于 2022-10-25 14:54:08 修改
阅读量852 收藏 1
点赞数
分类专栏： react知识点 文章标签： react.js
于 2022-10-20 19:34:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dmhuai_666/article/details/127432137
版权

通过node搭建开发环境，先下载node并安装，然后在cmd中用npm命令下载react脚手架，

我选择了react-bootstrap作为UI框架，所以也在cmd中下载react-bootstrap资源包。

npm install -g create-react-app

npm install react-bootstrap bootstrap 

然后创建项目，再进入运行项目

create-react-app myreact

cd myreact

npm start 

会自动打开页面，网址：http://localhost:3000/ 这是开发环境网页，项目中有已生成的index页面文件，在index.js里引用bootstrap的css文件

 我将App.js内容改造为三个板块

页面变成了这样 

最低0.47元/天 解锁文章
dmnext
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
十一）React项目实战记录：登录页面编写
jimson_zhu的博客
01-16 370
【代码】十一）React项目实战记录：登录页面编写。
react案例源码
07-17
三个Reactdemo的源码，帮助初学者更快的学习react入门
一篇文档让你知道，React 脚手架，怎么用，怎么写页面！超详细。
feifei221009的博客
07-12 91
大家好，我也是因为，领导说可能会接一个React的项目，所以我现学了一下，以下都是我通过一些资料，现学的；讲的都是我个人理解，如有异议，请说出来一起探讨。
React入门实战（二）页面跳转（附完整代码）
最新发布
2401_84093407的博客
04-20 597
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-c6oZQrY0-1713553093628)]
【React】2_如何使用react脚手架写一个简单的页面？
xuxuii的博客
06-02 1161
效果如下： 如果您也是react初学者，可以拿起手中的电脑跟着敲一敲哦~
react入门
m0_70930942的博客
02-13 346
react基础知识入门
React 基础-书写一个页面
SmileSB101-(ZXB)的博客
01-05 2500
由于 RN 环境过于麻烦，所以这里先尝试 React，有不对的还望不吝赐教 React 安装请查看官网 渲染 JSX React 的模板语法是 JSX，看起来很像是 JS+HTML 的混血儿。具体的语法这里就不再赘述，想了解的话，http://www.runoob.com/react/react-jsx.html，https://hulufei.gitbooks.io/react-tutorial...
前端 react教程（详细版）
热门推荐
it_varlue的博客
04-04 1万+
前端面试 react基础教程 。 类组件与函数组件区别。state与props区别.useCallback与useMemo区别.react生命周期。 高阶组件。reactHooks
React 从零开始学习（二）—— JSX
且听风吟的博客
07-12 1419
React 从零开始学习（二）—— 新建页面
基于React制作计算器实例
06-24
基于React制作计算器实例是一款使用React框架制作简单的加减乘除计算器，支持输入公式计算结果效果代码。
react 案例
09-19
react 案例11111111111111111111111111111111111111
Typescript 简单React项目案例
09-01
Typescript 简单React项目案例
React框架制作人物介绍切换特效
06-24
React框架制作人物介绍切换特效是一款圆形的虚线旋转和人物介绍标签文字结合，点击按钮切换下一张图片人物介绍效果。
react学习笔记-8：登录页
snipercai的博客
03-08 1230
react学习，登录页示例
Hello React （创建自己的第一个React 页面）
cvvvvvvvvvv的博客
11-05 2057
Rract是啥？ React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面 javscrtipt库。不是框架，是库， react 全家桶才是框架 react 全家桶： react: 核心库 react-dom: dom操作 react-router：路由, redux：集中状态管理 背景 Rract最牛逼！全球使用最多 特点 声明式 用类似于html的语法来定义页面。react中通过数据驱动视图的变
React框架构建用户界面
大张
06-22 1408
本文将介绍如何使用React框架来构建交互式的用户界面，包括项目的搭建、组件设计、状态管理和事件处理等方面的内容。
通过 React 来构建界面
张培跃的个人博客
01-31 1168
/ 通过createRoot函数，将 id 为 root 的 div 作为呈现 React 内容的容器。注意：以上两个文件可以通过浏览器打开，另存为并保存至目录lib中即可，lit目录文件如下。// ReactDOM 来自react-dom.development.js。同一个挂载位置，可以执行多次 render ，后者会覆盖掉前者的内容。同一个挂载位置，不允许多次被指定为 React 容器。// 在容器中呈现 Hello, world!允许在同一个界面中指定多个挂载容器。：React中的核心库文件。
React绘制用户界面（UI）篇
m0_61388464的博客
01-16 2154
本文章基于React新文档Beta版，用于重新学习复习React知识，重新学习了解React的新特性。 什么是组件 组件（Components）是 React 的核心概念之一。它是构建用户界面（UI）的基石。React中一切皆为组件。 在HTML当中，由许多的标签组成一个网页，例如 <article> <h1>My First Component</h1> <ol> <li>Components: UI Building
react refs 案例讲解
05-24
React Refs 是 React 提供的一种访问 DOM 元素或组件实例的方法。通过 Refs，我们可以在组件中直接访问到被 Refs 引用的 DOM 元素或组件实例，从而进行一些特殊的操作。 下面，我来举一个 React Refs 的案例： 假设我们有一个 Input 组件，需要在组件加载完毕后自动获取焦点，我们可以通过 Refs 来实现这个功能。具体的实现步骤如下： 1. 在 Input 组件中定义 Refs： ```jsx class Input extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); // 创建 Refs } render() { return <input type="text" ref={this.inputRef} />; } } ``` 2. 在 componentDidMount 生命周期中，使用 Refs 获取到 input 元素，并调用 focus() 方法： ```jsx class Input extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); // 创建 Refs } componentDidMount() { this.inputRef.current.focus(); // 获取 input 元素并获取焦点 } render() { return <input type="text" ref={this.inputRef} />; } } ``` 这样，当 Input 组件加载完毕后，它的 input 元素就会自动获取焦点了。 注意，Refs 只能在类组件中使用，不能在函数式组件中使用。另外，Refs 的值可以是回调函数，而不仅仅是 React.createRef() 方法返回的对象。如果使用回调函数的方式，可以在回调函数中访问到组件实例或 DOM 元素，例如： ```jsx class Input extends React.Component { constructor(props) { super(props); this.inputRef = null; // 创建 Refs this.setInputRef = element => { this.inputRef = element; }; } componentDidMount() { this.inputRef.focus(); // 获取 input 元素并获取焦点 } render() { return <input type="text" ref={this.setInputRef} />; } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值