新建react项目与运行

最新推荐文章于 2024-03-19 10:04:27 发布
最新推荐文章于 2024-03-19 10:04:27 发布
阅读量562 收藏
点赞数 1
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52796953/article/details/132131669
版权

新建react项目与运行：

提示：主要记录如何新建目录，运行react项目

一、新建react项目

首先确保已经安装好Node（这里对Node的安装不做描述）,可以通过以下命令行，查看Node是否安装，版本是哪个。

在这里插入图片描述
现在正式来新建react项目
打开终端，在你想要新建react项目的文件夹中，输入如下命令行，就可新建react项目

npx create-react-app react项目名称

生成的项目的目录结构如下：
在这里插入图片描述

二、运行react项目：

通过如下命令行，启动react项目：

npm start

在这里插入图片描述

海Yin
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React最终项目
02-22
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babe
创建和运行 Scratch 3.0 项目的界面react组件
02-24
Scratch GUI 是一组 React 组件，包含用于创建和运行 Scratch 3.0 项目的界面 要在 Github Pages 上的浏览​​器中打开当前版本：
react项目的运行流程
最新发布
qq_65537235的博客
03-19 266
初始化好一个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。
create-react-library:用于创建React库的简单项目
03-15
React组件库 注意：这是来自Harvey Delaney的的简化且定制的fork 创建该项目框架是为了帮助人们开始使用以下方法创建自己的React组件库： 可帮助您创建和展示组件 and 支持对组件进行测试 发展 测验 npm run test 建筑 npm run build 故事书 要在本地计算机上运行实时重新加载Storybook服务器，请执行以下操作： npm run storybook 要将Storybook导出为静态文件，请执行以下操作： npm run storybook:build
react-project:React项目
08-05
创建 React 应用程序入门 这个项目是用引导的。 可用脚本 在项目目录中，您可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 lint 错误。 npm test 在交互式观察模式下启动测试运行器。 有关更多信息，请参阅有关的部分。 npm run build 将用于生产的应用程序构建到build文件夹。 它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。 构建被缩小，文件名包括哈希值。 您的应用程序已准备好部署！ 有关更多信息，请参阅有关的部分。 npm run eject 注意：这是一种单向操作。 一旦eject ，就回不去了！ 如果您对构建工具和配置选择不满意，您可以随时eject 。 此命令将从您的项目中删除单个构建依赖项。 相反，它会将所有配置文件和可
react入门实战项目-类印象笔记应用源码
08-11
上个资源记录分享了如何使用React实现一个ToDoList小Demo,通过该Demo,菜鸟们可以学会如何搭建环境，新建项目，添加组件，运行项目，简单的数据处理和交互，如何引入样式文件等内容。本篇，将记录如何使用React实现一个简版的印象笔记App的入门实例，本实例也比较好实现，但内容相对于上个Demo更加丰富，用到了许多新的知识点，都是非常实用，必须掌握的一些内容,本菜鸟自己实践了一遍，收益非常多，可以说对于React的理解又跨越了一步。现在将实现过程记录下来，以后时不时复习复习，也帮一帮同为菜鸟的你。
初探React环境搭建与运行
梦幻通灵
12-17 3033
脚手架和手动引入两种方式运行react
react项目启动加载过程个人笔记(Ant Design Pro)
BHSZZY的博客
01-04 3363
1.项目启动后，会先加载。（PS：菜鸟教程说，manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头；但是Ant Design Pro项目里开始页面并没有在这里指定…）2.项目启动后，会打开。（可以修改默认启动端口，例如修改的启动命令为）3.项目会加载config.js，其中引入了；因为在里配置了，因此父页面就是4.在里配置了，以及，因此会重定向到，此时父页面是，子页面是5.父页面里有{children}，这个就可以让子页面显示出来。6.
react 是怎么运行的？
舜岳的博客
12-21 3265
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 Native 搭建开发环境和创建新项目并运行的详细教程
afufufufu的博客
08-16 4096
React Native 搭建开发环境详细教程
使用脚手架创建及运行react项目
m0_69895544的博客
08-17 5170
转载简书创建react项目文章，稍作修改。
使用IDEA创建的一个简单的react项目
07-25
一个简单的React项目，在IDEA创建的初始React项目基础上添加了一个简单的点击计数组件
react创建，运行及基础使用方式介绍 (JSX语法，类组件，函数组件)
kkddqq1121的博客
03-26 535
react创建，运行及基础使用方式介绍 (JSX语法，类组件，函数组件)
【React系列教程一】React介绍、搭建React环境、运行React项目
qing_小诺的博客
04-12 952
一、React介绍： React 起源于 Facebook 的内部项目，可以开发单页面应用，组件化模块化开发。React通过对DOM的模拟，最大限度地减少与DOM的交互。 二、搭建React开发环境之前的准备工作： 1、必须安装nodejs稳定版本。nodejs官网：https://nodejs.org/en/ 2、安装cnpm，用cnpm替代npm。淘宝npm镜像：http:/...
React项目从开发到上线运行全过程记录笔记
徊忆羽菲
10-16 657
React项目从开发到上线运行全过程笔记一、Linux上安装node二、检测npm包是否可用三、使用 create-react-app 快速构建 React 开发环境四、常用命令解释npm startnpm run buildnpm testnpm run eject五、查看项目目录结构src文件夹分析组件结构六、创建我们自己的组件七、打包为生产版八、将其放在服务器中执行九、将其放到远程服务里面部署十、部署到服务器上后的维护 https://blog.csdn.net/tiangongkaiwu152368
React项目从开发到上线运行全过程
热门推荐
天工开物
07-02 2万+
        随着react的流行，越来越多的前端工程师使用react来进行开发，当时用react时，creact-react-app无疑进入了大家的眼帘，本篇文章主要讲述如何从无到有的使用creact-react-app开发react应用，然后本地调试，直到最后的上线运行。 本篇文章内容结构说明，主要有以下12个部分： 1. 安装nodejs 2.使用nodejs的npm包安装cre...
如何创建一个 react 项目及如何运行？
zhaojiaxing123的博客
12-19 902
如何创建一个 react 项目及如何运行？
一、react基础知识及安装运行
xiaodouxuan11的博客
06-01 1045
react基础知识及安装运行
react项目启动命令
04-01
在React项目中，启动命令通常为： ``` npm start ``` 或者 ``` yarn start ``` 这将启动一个本地服务器，并在浏览器中打开应用程序。如果需要指定端口号，可以使用以下命令： ``` npm start --port 3000 ``` 或者 ``` yarn start --port 3000 ``` 其中，3000是端口号。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值