React学习笔记03-----手动创建和运行

已于 2024-07-17 09:17:33 修改
阅读量607 收藏 1
点赞数 2
分类专栏： 前端 文章标签： 学习 笔记
于 2024-07-15 14:40:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_67357141/article/details/140438438
版权

一、项目创建与运行【手动】

react-scripts集成了webpack、bable、提供测试服务器

1.目录结构

public是静态目录，提供可以供外部直接访问的文件，存放不需要webpack打包的文件，比如静态图片、CSS、JS

src存放源码

（1）index.html

是首页的模板

（2）index.js

是js的入口文件，webpack打包时会以此文件为入口，JS编译后，再关联到index.html中

主要写引入文件以及渲染，核心代码写在后续的App.js中

最低0.47元/天 解锁文章
React学习笔记--进阶之路
JackieDYH的博客
08-12 692
react框架 * react是facebook内部的一个javascript类库，用于构建用户界面的 JavaScript 库 react官网：https://react.docschina.org/ react不是一个完整的MVC框架，最多可以认为是MVC中的V（View） react引入了虚拟DOM机制 react引入了组件化思想 react使用facebook专门为其开发的一套语法糖--jsx 使用注意事项-jsx语法 注意事项 jsx语法 * 标签内容内属性 例如 *
ReactNative学习笔记
weixin_68658847的博客
10-04 1286
ReactNative学习笔记
初学react-创建并运行项目
s_9527_s的博客
04-18 4378
本篇数据通过脚手架创建 一、脚手架安装 npm install -g create-react-app 通过以上命令安装完成后可以通过一下命令查看create-react-app的版本号及是否安装成功 create-react-app -V 二、通过命令创建项目 npx create-react-app 项目名称 然后静等 这样就创建完成了，项目创建完成后的效果 三、运行项目 cd 切换到文件中，然后运行npm start命令就可以了，如果是拉取的项目没有依赖的话，..
react 是怎么运行的？
舜岳的博客
12-21 3433
react 是怎么运行的？ import React from 'react'; import ReactDOM from 'react-dom'; const App = <div className="title" style={{color:'red'}}>hello world</div> console.log('App', App) ReactDOM.render( App, document.getElementById('root') ); react
搭建React简单项目
最新发布
zhangxueyou2223的博客
03-20 1725
搭建React项目，包含路由，axios请求，模版等。在项目的 src 目录下创建一个名为 utils 的文件夹（如果不存在的话），然后在 utils 文件夹中创建一个名为 http.js 的文件，用于封装 Axios 请求。在 React 项目里对密码进行 MD5 加密，你可以借助 crypto-js 库，它提供了 MD5 加密功能。1. 安装 Axios。
新建react项目与运行
weixin_52796953的博客
08-06 998
首先确保已经安装好Node（这里对Node的安装不做描述）,可以通过以下命令行，查看Node是否安装，版本是哪个。打开终端，在你想要新建react项目的文件夹中，输入如下命令行，就可新建react项目。现在正式来新建react项目。
手动创建React项目
weixin_47529732的博客
05-06 483
执行成功后项目根目录下会生成 build 文件夹，在浏览器中打开目录下的 index.html 会发现页面一片空白，查看控制台会发现报错内容为。执行以下命令会让项目运行在本地，默认是localhost:3000上，修改代码会实时更新页面。缺点：每次修改都不能实时查看，都需要打包并且修改路径才能查看。- index.js **入口文件**或者是 localhost找不到某文件类似的报错信息。上述步骤正确操作后，此时在项目根目录的终端中执行。注：下面的命令需要在项目根目录下的终端执行。刷新页面就会有内容！
react项目的运行流程
qq_65537235的博客
03-19 544
初始化好一个id为root的dom对象，去到App.tsx编写组件的逻辑和页面，然后导出。最后去到main.tsx里面导入关键库react和reactDom还有编写的组件App.tsx。在App.tsx中，最重要的就是funcation和export两个部分 ，function里面分为了 return里面编写html。传入组件给index.html中的div为id是root的组件。最后总结：react项目的流程就是 在index.html。第一个关注的文件index.html。最后就是App.tsx。
react-native 学习笔记1---创建与运行项目
三七二十一的博客
04-06 2100
学习这件事就是一件不停的踩坑、填坑的过程。最近开始学习react-native，从创建项目开始，本以为有前辈们的提醒，可以少踩坑，如履平地的往前走，但是有些坑如果不去踩一下人生是不完整的。。。接下来我也记录下自己踩过的坑吧首先是搭建环境，这个官方文档已经说的很详细了，pass其次是构建项目，此处按照命令行一步步走是没错的react-native init yourapp // 这里需要注意：直接用...
react-native移动端开发笔记1
08-08
React Native 是一个由Facebook开发的开源框架，它允许开发者使用JavaScript和React库来构建原生的移动...接下来，深入学习React Native的API和最佳实践，不断实践和探索，你将能熟练地构建出高质量的原生移动应用。
如何创建一个 react 项目及如何运行？
zhaojiaxing123的博客
12-19 1056
如何创建一个 react 项目及如何运行？
初探React环境搭建与运行
梦幻通灵
12-17 3220
脚手架和手动引入两种方式运行react
如何运行react创项目
datouniao1的博客
06-10 2062
最近在看一个项目，前端是react写的代码，平时作为后端的我，以为写点html代码就是前端的了 但是我们知道最近比较火的是react为了跟上时代的步伐，我也想去布置一个react项目 其实也不难： 这个是安装网上的步骤，自己一点一点的搭建起来的 还有： 这两个是一样的效果但是也是有区别的 我们看到的是端口不同 但是启动的逻辑是不同的： 这个是我搭建的目录结构 public 和build是完全一样的内容 我们用npm start 启动时public 也可以启动静态的服务 ..
手动创建一个React项目
Cao_Mary的博客
04-05 435
手动创建一个React项目1.创建一个DOM容器2.添加两个script标签，导入文件react.js和react-dom.js3. 通过react.js创建虚拟DOM4.通过react-dom.js渲染虚拟DOM完整代码 需求：给一个div绑定带内容的div 1.创建一个DOM容器 <div id="app"></div> 2.添加两个script标签，导入文件react.js和react-dom.js <script src="https://unpkg.com
一、react基础知识及安装运行
xiaodouxuan11的博客
06-01 1119
react基础知识及安装运行
创建并运行一个React项目
weixin_51621120的博客
05-23 371
create-react-app [项目名]cd [项目名]
如何建立运行React项目
孙朝阳的博客
04-26 2746
我是搞Android的，刚接触React，怎么建立项目都不会，即便看着教程。 几经折腾终于成功建立一个React项目：1.运行webstrorm创建一个空项目2.在其命令窗口Terminal依次输入以下四条命令即可：npm install -g create-react-app create-react-app my-app cd my-app/ npm start
手动创建react项目(初学react第一天)
qq_45081546的博客
07-23 163
启动项目（首次启动需要输入 y 确认）
React18：创建React项目（手动）
七七的博客
12-02 742
常规的React项目需要使用npm（或yarn）作为包管理器来对项目进行管理。并且React官方为了方便我们的开发，为我们提供react-scripts包。包中提供了项目开发中的大部分依赖，大大的简化了项目的开发。
React学习笔记与实践案例
这使得函数组件具有了更好的可重用性和清晰度，特别是对于副作用（如数据获取、订阅或手动更改React元素）管理。 ### 3. React工具和实践 #### 3.1 创建React应用（create-react-app） create-react-app是Facebook...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值