reactJS学习日记——IDEA上的react项目创建

已于 2023-04-07 17:38:00 修改
阅读量1.4k 收藏 1
点赞数 1
文章标签： react.js javascript intellij idea reactjs
于 2022-07-10 02:24:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rinw20/article/details/125701486
版权
IDEA创建react项目的流程，此文仅以学生角度记录一些操作步骤以及遇到过的问题，以供将来查阅。
摘要由CSDN通过智能技术生成

 参考文档：react官方教学文档：學習指南：React 介紹 – React

总的来说react就是高效的的JavaScript函数库，是用小巧而独立的component来建立复杂的UI。主要是从component、prop和state三个角度来完成程序的编写。
编写react的IDE选择：IntelliJ IDEA

       创建项目：

              方法一：使用IDE直接创建react的项目即可

创建好项目后如何进行编写:

找到项目文件下的./src/App.js
该文件为项目的默认main文件（类似于index.html）
通过编写function App(){

        组件内容

最低0.47元/天 解锁文章
RHong20
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react classname多个_淘系前端：基于 React 打造高自由度的 IDE 布局系统
weixin_39950057的博客
12-06 191
戳蓝字「前端技术优选」关注我们哦！文末福利：开发者藏经阁NO.1背景介绍IDE 的 Layout 系统需要整合不同的功能视图模块，向用户提供一个完整易用的最终集成开发环境。业界现有 IDE 产品的实现基本上都是只提供一个最终的成品 IDE，视图本身具有一定的拓展性，但是不需要具备可强自定义的能力，所以只需要预定义好一套视图系统，其他视图模块开发时按照约定的规范来进行贡献即可。KAI...
使用IDEA创建一个简单的React项目
qq_43609574的博客
07-25 3014
创建一个简单的React项目版本说明项目创建与运行结合element-react添加简单的点击计数组件点击运行 版本说明 IDEA 2020.3.2 react 17.0.2 element-react 1.4.34 项目创建与运行 以管理员的身份打开命令提示符，切换到想要存放react项目的空文件夹下 安装create-react-app npm install -g create-react-app 创建项目 create-react-app demo-react01 创建完成后项目文件结构
Idea React 模板插件
01-18
在Idea上进行安装的React模板插件. 可以使Idea自动支持React, 包括自动显示React语法.
react搭建——在intelliJIDEA中react的搭建
Darren洋的博客
04-17 1657
查找了搭建的教程，方式不唯一，但过程照样遇到了一些问题，又重新查问题重新解决。以下是我自己结合了自身实际开发情况以及综合了好几篇教程后成功运行的react的步骤。让IDEA能帮你在线下载的依赖全交给它来干。
React开发环境搭建
weixin_43487532的博客
06-01 795
react玩耍前要先安装node.js环境直接进入官网进行下载 其实就是下载react的基础项目模版 3.创建项目目录 由于已经下载了脚手架，就可以直接创建基础项目了 进入项目目录，输入 后续会自动操作，打开浏览器，看到这个界面表示环境搭建完毕
react(一)环境搭建和利用IDEA建立简单react项目
zhaikaiyun的博客
04-02 5996
安装node 官网https://nodejs.org/en/download/下载最新的稳定版本，下载安装完以后在cmd界面输入node -v 可以直接查看版本，安装node时会自带一个npm的包管理工具，在命令行通过 npm -v查看。 国内使用npm很慢，可以使用淘宝的镜像来代替原有的，在命令行输入：npm config set registry https://registry....
使用IDEA创建的一个简单的react项目
07-25
在本文中，我们将深入探讨如何使用IntelliJ IDEA（IDEA）创建一个简单的React项目，并在其中添加一个点击计数组件。React是一个流行的JavaScript库，用于构建用户界面，特别是单页应用程序。它采用组件化的方式来...
react-projects:YouTube教程上的ReactJS项目
03-17
这个名为"react-projects:YouTube教程上的ReactJS项目"的压缩包文件包含了一系列基于ReactJS的项目，这些项目源自YouTube教程，旨在帮助学习者实践和理解React的基本概念和高级特性。 首先，我们来看一下描述中提到...
reactjs-training-sample:React Sample项目，由create-react-app引导
03-12
reactjs训练样本Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中...
react pro——————————
04-14
react pro——————————
reactide：Reactide是第一个专用于React Web应用程序开发的IDE
02-03
Reactide是第一个用于React Web应用程序开发的专用IDE。 Reactide是一个跨平台的桌面应用程序，提供了一个模拟器，用于实时重新加载和快速的React组件原型制作。 React带来了一套集成的开发工具，以简化React开发。 在浏览器，IDE和服务器之间切换的日子已经过去。 Reactide正在积极开发中。 请遵循此回购以获取贡献准则和我们的发展路线图。 正确编码 Reactide运行集成的Node服务器和自定义浏览器模拟器。 随着项目的发展，开发人员可以直接在开发环境中通过实时重新加载来持续跟踪更改，而无需不断切换到浏览器。 Reactide还提供了与Create React App的集成，以实现更快的项目样板配置。 模拟器和组件树都可用于所有React应用程序。 状态流可视化。 在复杂的React应用程序中管理状态是开发React应用程序的最大难题。 Reactide提供了一个可视化的组件树，该树根据工作目录中的组件动态加载和更改，同时提供有关每个组件的道具和状态的信息。 通过浏览项目体系结构的实时表示，开发人员可以快速识别并查明即使是最复杂的应用程序的父子
2021-10-05在intelliJIDEA中react的搭建
JJ_juanbao的博客
10-06 3337
领导给了我之前的项目让我看看，前端开发用的是react框架，对于我这没接触过框架的确实有点吃力，但还是得先把准备工作就绪——在intelliJ IDEA中搭建react。 查找了搭建的教程，方式不唯一，但过程照样遇到了一些问题，又重新查问题重新解决。以下是我自己结合了自身实际开发情况以及综合了好几篇教程后成功运行的react的步骤。 （今年7月毕业的本科生，计科专业，女，9.1入职，前端开发，以后就在这里记录一些学习总结了，比手动记笔记快得多????） 1-首先，你得有IDEA 2-直接建项目吧，让
idea创建react项目
weixin_45095695的博客
04-19 889
注意：这里默认安装的Add to PATH其实已经帮你配置好了环境了，网上一大堆自己手动去配置环境不需要的。注意：如果启动失败，报环境变量类型的错误，重启电脑即可，idea集成插件有时候就是不好使，需要重启。打开官网下载链接:https://nodejs.org/en/download/注意记得配置插件，将你前面安装的Node.js配置到idea的插件里。3、Ideal配置react开发环境。1、下载安装Node.js。安装node.js插件。4、新建react工程。
IntelliJIDEA的搭建React项目详细教程
weixin_45428910的博客
05-28 745
IntelliJIDEA的搭建React项目详细教程
准备一套React环境
tangfuling1991的博客
09-25 1077
准备一套React环境
react项目+antd组件-demo:hello-world
我都博客
06-01 1311
通过本文叙述的方式建立一个前端react项目demo，用于调整组件的大小、位置、颜色，验证组件的用法等，提高开发效率。
基于 React 打造高自由度的 IDE 布局系统
前端劝退师
07-22 1025
NO.1背景介绍IDE 的 Layout 系统需要整合不同的功能视图模块，向用户提供一个完整易用的最终集成开发环境。业界现有 IDE 产品的实现基本上都是只提供一个最终的成品 IDE，视...
IntelliJ IDEA使用create-react-app创建react脚手架时控制台无响应的解决办法
沐雨橙风ιε的博客
06-03 238
IntelliJ IDEA使用create-react-app创建react脚手架时控制台无响应的解决办法
react在线文件_在线IDE开发入门之从零实现一个在线代码编辑器
weixin_39689687的博客
11-10 538
前言3年前在AWS re:Invent 大会上AWS 宣布推出 Cloud9, 用于在云端编写、运行和调试代码，它可以直接运行在浏览器中，也就是传说中的 Web IDE。3年后的今天随着国内云计算的发展, 各大云计算服务厂商都在部署自己的WEB IDE, 而且已经有非常成熟的落地方案, 对于这一块的技术原理和实现, 也非常值得我们去学习和剖析.目前比较成熟的WEB IDE方案有CodeSandbo...
react项目如何创建
最新发布
07-27
要创建一个 React 项目，您可以按照以下步骤进行操作： 1. 确保您已安装 Node.js。您可以在终端中运行 `node -v` 来检查是否已经安装。 2. 打开终端，并使用 `create-react-app` 命令来创建一个新的 React 项目。运行以下命令： ```shell npx create-react-app my-app ``` 这将创建一个名为 `my-app` 的新文件夹，并在其中初始化一个新的 React 项目。 3. 进入项目文件夹，运行以下命令以启动开发服务器： ```shell cd my-app npm start ``` 这将启动一个本地开发服务器，并在浏览器中打开一个新的标签页，显示您的 React 应用程序。 现在，您已经成功创建了一个基本的 React 项目。您可以根据需要编辑 `src` 文件夹中的代码，并在浏览器中实时查看更改。Happy coding！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值