React之简单页面搭建

最新推荐文章于 2024-04-20 02:59:30 发布
最新推荐文章于 2024-04-20 02:59:30 发布
阅读量1.2k 收藏 2
点赞数 2
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chd_sun/article/details/105031155
版权

1.本地创建文件夹，保存所创建的项目
注意：文件夹名一定是英文名,不要有汉字
在这里插入图片描述
2.用vs code 打开本地所创建得空文件夹
在这里插入图片描述
3.使用cmd命令切换到当前目录
在这里插入图片描述
4.开始创建react项目
4.0先创建一个package.json
作用：一般记录了项目的配置信息，包括名称、版本、许可证等元数据，
也会记录所需的各种模块，包括 执行依赖，和开发依赖，
在这里插入图片描述
4.1下载react 核心包
在这里插入图片描述
4.2下载react-dom包
在这里插入图片描述
4.3下载babel包
在这里插入图片描述
5.新建一个html文件
在这里插入图片描述
6.引入react文件
在这里插入图片描述
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<body>
    <!--创建根节点 一个页面中需要有一个根节点  -->
    <div id="reactId">

    </div>

    <!-- type类型必须是text/babel -->
    <script type="text/babel">
        // 下面得语法是jax语法  相当于javascript和 xml得结合语法
        //执行的效率更快 类型更安全
        let myDom=<h1>你好react</h1>;
        //使用rander进行渲染
        ReactDOM.render(myDom,document.getElementById("reactId"));
    </script>
</body>
</html>

7.运行html文件
在这里插入图片描述

微微笑再加油
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react新建页面步骤（新手必看）
weixin_30273931的博客
09-28 1783
react+antd新建页面步骤： 1.antd创键一个页面从routes开始 import React from 'react'; import { connect } from 'dva'; import UserPage from '../components/userPage' //这是链接组件的地方 function User({dis...
VUE，vue-cli项目结构，以及在vue-cli脚手架原始项目框架引入模块
NI_computer的博客
10-12 265
一、项目结构： 初始化一个vue-cli之后，我们可以在目录中看到以下结构。 app.vue src下的app.vue是项目的根组件，可以包含其他的子组件。在项目运行时进入的首页即为app.vue。子组件写在src文件夹下的components内。根组件和子组件组成组件树。 main.js mian.js是vue应用的入口文件，可以创建一个新的vue实例并挂载再根节点下。Vue插件也从这里引入。 二、添加引入新模块 1.在components文件夹下新建一个vue文件 模块内基本组件： templ
react 创建界面的2种常见方式以及react hooks
smaller_coder的博客
11-21 350
1、无状态state，function组件 import React, { Component } from 'react' import ChildTest from './test' function Test(props) { return ( <div className="safe-wrap"> <ChildTest camera="测试"...
用React搭建渲染一个前端页面
持续学习中
03-05 4631
用React搭建渲染一个前端页面
React入门实战（二）页面跳转（附完整代码）
最新发布
2401_84093407的博客
04-20 531
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-c6oZQrY0-1713553093628)]
使用React做个简单的页面-01
qq_39736103的博客
05-20 4323
1.页面效果   2.项目结构   具体代码    root.js    pc_index.js    pc_header.js  移动端代码调整   页脚页面    1.页面效果代码实现       pc_index.js   注册模块开发   1.页面效果 代码实现     移动端效果；代码实现  import React from 'react';import {Row, Col} from...
react新建一个路由页面并实现跳转
weixin_42332641的博客
06-20 1354
最近开始学习更新react 让我们一起开启react之旅吧 1，新建一个注册页 register.js文件 2，在react-router-config.js配置路由 3,导入这个register.js文件 4,在某个页面实现跳转
react 创建新页面_创建一个新的 React APP
weixin_39598308的博客
12-19 606
使用一套集成工具链来实现用户和开发人员的最佳体验。本页面接到了一些热门的React工具链，它们可以帮助完成如下任务：扩展到许多文件和组件。使用 npm 的第三方库。尽早发现常见错误。在开发中实时编辑 CSS 和 JS 。优化生产输出。本页推荐的工具链 不需要配置即可开始使用 。带 标签的 HTML如果您没有遇到上述问题，或者不习惯使用 JavaScript 工具，那么考虑 在HTML页面上使用简...
react项目新增页面方法(Ant Design Pro)
BHSZZY的博客
01-04 1805
最近本人在看react，目标是快速上手可以开发前端页面。好不容易搞清楚了react项目启动流程、路由规则；）下一步就总结下如何写新页面。
使用react创建单页面项目
jared.wang
07-08 868
react创建单页面项目并且组件传值 首先在app.js中配置路由,这里是通过react-router-dom这个自带的组件完成的 定义一个class类在里面进行单页面的创建,并且此文件还可以创建其他的页面以及多个单页面项目 import React, { Component } from 'react'; import { BrowserRouter as Router , Rout...
React框架构建用户界面
大张
06-22 1388
本文将介绍如何使用React框架来构建交互式的用户界面，包括项目的搭建、组件设计、状态管理和事件处理等方面的内容。
react项目搭建
09-27
此项目包含了 路由配置（嵌套路由） fetch请求接口 redux状态管理 webpack代理设置 蚂蚁金服ant使用 调用h5+手机摄像头功能，绝对物超所值，页面简单 但是架子稳定 涉及的知识全面
webpack4 + react 搭建多页面应用示例
12-03
webpack 升级到4之后还没好好的同步一个可实用的webpack架子，接下来用webpack4来搭建一个简单的react的多界面应用，废话不说 直接撸码 创建工程 $ mkdir demo && cd demo $ npm init -y webpack 配置 安装...
react-admin:使用 react 搭建一个简易的后台管理系统（更新中...）
08-05
如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 lint 错误。yarn test 在交互式观察模式下启动测试运行器。 有关更多信息，请参阅有关的部分。yarn build 将用于生产的应用程序构建到build文件夹。 它...
react-blog:react搭建的一个简单的博客网站
05-29
react-blog介绍个人博客网站由于该项目是本人第一次使用react所建项目，所以有些地方代码不尽如人意，请自行斟酌使用技术栈主要包括react,redux,axios,sass网站效果项目结构src|--components 储存组件，一些早期的...
Smart-contract-lottery:使用智能合约部署简单的彩票应用,react搭建前台页面
04-27
基于以太坊开发的简易彩票项目 使用solidity编写智能合约 ...使用infura提供的节点发布构建的智能合约 ...使用react搭建简易的页面骨架 使用semantic-ui做页面美化 对登录权限校验,非管理员账户不可调用转账类型方法
React构建单页应用方法与实例
精选资讯文章
06-10 214
首先在学习这门框架前，你需要对以下知识有所了解：原生JS基础CSS基础npm包管理基础webpack构建项目基础ES6规范以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。JS和CSS就不多说了，npm是目前最提倡也是占据主导地位的包管理工具，还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具，已经在前端打包工具中独占鳌头，和Browserify相比也有很大优势。至于ES6规范虽然现在主流浏览器还不兼容，但可以使用babel等转换器进行转换。
初次使用React写一个静态网页
fang_my的博客
03-12 4192
今天是我学习完react并且使用的第一个小工程，也不算小工程吧，仅仅就是一个小的静态网页。但是我的思想逻辑差不多已经理清了，为什么我们要用react写，而不是用html和css写，虽然我这个网页具体用react写的功能性组件不多，但是重要的是自己写下一个完完整整页面的那种开心，和遇到问题自己探索的那种过程才是我最喜欢的。 react的组件化思想很适合用于团队开发项目，因为页面的各个组成部分仅仅就是组件而已，要举例子的话，我喜欢用制造一辆汽车来举例子。 本来如果单单使用html来写一个网页的时候，人员分配
React页面路由 react-router-dom
橘猫吃不胖的博客
03-09 2388
React页面路由1 背景2 hash模式3 history模式3 React实现页面路由的模块：react-router-dom3.1 安装3.2 HashRouter和BrowserRouter：路由的容器3.3 Route：路由与组件之间的映射3.4 Router：管理路由的状态3.5 Link和NavLink：跳转链接3.6 Redirect：页面重定向3.7 Switch：路由切换3.8 withRouter：包装器3.9 Router Hooks：在函数组件中获取路由信息3.10 history
react项目搭建路由配置
08-27
在React项目中搭建路由配置，你可以使用React Router库来实现。下面是一些基本步骤来配置路由： 1. 首先，确保你的项目中已经安装了React Router库。你可以使用以下命令进行安装： ``` npm install react-router-dom ``` 2. 在你的项目中创建一个`Routes`组件，用于定义不同路径下的页面组件。这个组件将会被用作主要的路由配置。 ```jsx import React from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import About from './components/About'; import NotFound from './components/NotFound'; const Routes = () => { return ( <BrowserRouter> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route component={NotFound} /> </Switch> </BrowserRouter> ); }; export default Routes; ``` 在这个示例中，我们定义了三个路由： - `/`路径对应`Home`组件 - `/about`路径对应`About`组件 - 任何其他路径都会渲染`NotFound`组件 你可以根据你的需求添加更多的路由。 3. 在你的根组件中引入`Routes`组件，并将其放置在合适的位置。 ```jsx import React from 'react'; import Routes from './Routes'; const App = () => { return ( <div> {/* 其他组件 */} <Routes /> {/* 其他组件 */} </div> ); }; export default App; ``` 这样，你的路由配置就完成了。你可以根据需要在不同的页面组件中使用`<Link>`标签来导航到不同的路径。 希望这个简单的路由配置能够帮到你。如果你有任何其他问题，请随时提问！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微微笑再加油

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值