代码编织梦想

首先:

我是用的软件是WebStorm2023.2.1版本

插件是node-v18.17.0-x64.msi

一 .安装脚手架工具步骤

1.首先在WebStorm 2023.2.1中创建一个React项目;

2.在WebStormWorkplace文件中找到创建的项目,按住shift然后点击右键,在弹出来的选项中选择在此处打开Powershell窗口(s);

3.在弹出来的界面中输入npx;

4.待下一个提示弹出来后输入npx create-react-app 文件名;

5.而后一直等着界面的加载,直到界面弹出happy hocking;(这里脚手架工具就已经安装完成了)

二.开始在软件中开始运行文件

打开WebStorm2023.2.1软件,在软件的终端输入npm-start,这里不是在终端中输入npm start哈,当然,这样的目的是为了能够更直观的知道项目的变化,等待React文件关联浏览器(实际这里已经成功的创建了一个React项目)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_64867440/article/details/132929327

webstorm配置react_aaa333qwe的博客-爱代码爱编程_webstorm配置react

设置.js文件默认以jsx的语法打开 在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示: 当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个一劳永逸的方法把它给去掉吧: 然后Apply/OK即可。 设置.js文件中支持react-native语法高亮 首先会发现在js文件中有不少的警告,类似

使用最新webstorm开发及调试react native项目_码农甲乙丙的博客-爱代码爱编程

React Native允许您使用JavaScript和React为iOS和Android开发原生移动应用程序。它是由Facebook创建的,用于Instagram,Airbnb和现在的JetBrains自己的 You

在webstorm中搭建electron的环境_码农双双的博客-爱代码爱编程

之前要运行electron项目的步骤是 进入项目 electron . 当你恰好也用webstorm的时候 你还可以这样 编辑器的 右上角  这样三角 轻轻一点 你的electron 就运行起来了,方块一点你的项目就停止了 是不是很方便 来来 配置第一步 在bin下面新建一个electron.js的js文件(暂时是空的哦~~~~)

新手使用webstorm创建react项目_kjune的博客-爱代码爱编程_webstorm写react

1、在想要使用react.js之前,电脑上需要安装好node.js。如果没有安装的要先去官网或者其他途径下载安装并配好环境。然后在命令窗口输入以下命令来下载create-react-app脚手架工具包: npm install -g create-react-app   2、安装好之后我们再来安装webstorm工具。 3、安装成功后打开

webstorm 创建react组件_react+webpack+webstorm开发环境搭建-爱代码爱编程

需要安装的软件 node.js npm包管理 以上两个包的下载地址如下: 由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm 更换npm库的源 由于国内的网络原因,推荐只用阿里的npm源地址 构建项目 使用webstorm新建一个空白项目 打开控制台,在控制台里输入npm init 命令来初始化一个package.j

webstorm 创建react组件_WebStorm构建react.js项目-爱代码爱编程

react.js npm.js node.js 1.安装node.js环境 点我进入nodejs官网 2.下载LTS(Long term support)版本,安装 3.在cmd中使用以下命令查看node是否安装成功 node -v //查看node版本 4.在命令行中进入需要构建demo的文件夹 cd D:\workspace//这里演示

webstorm 创建react组件_webstorm的下载以及React环境搭建-爱代码爱编程

前言:本文我们将讨论ubuntu中webstorm的安装以及基本React环境搭建 一、安装JDK 下载webstorm之前我们要确定已经下载了jdk,这是必须的否则会在之后的操作提示你无法打开wenstorm。因为你没有安装或是版本太低。其实jdk的安装很简单 首先输入一下代码检查一下jdk版本。 java -version 好的,一般新安

webstorm安装eslint插件_WebStorm + React 项目,配置 ESLint-爱代码爱编程

ESLint 简介 ESLint是一个开源的JavaScript代码检查工具,其作者是大名鼎鼎的“红宝书”《JavaScript高级程序设计》作者 Nicholas C. Zakas。Nicholas C. Zakas 在他的多部著作中都有涉及到JavaScript的代码风格问题,而eslint正是用来统一JavaScript代码风格的工具。 代码

webstorm常用快捷键和react项目的快捷键-爱代码爱编程

代码标签输入完成后,按Tab,生成代码。 ctrl + a - - 选择全部 ctrl + b - - 跳到变量申明处,快速打开光标处的类或方法 ctrl + c - - 复制 ctrl + d - - 如果选择了文本那么就是向此行的末尾复制,如果没有选中文本那就是将此行向下复制 ctrl + e - - 弹出最近打开文件列表,可以快速选择最近曾经打开的文

webstorm创建react,及其代码结构-爱代码爱编程

webstorm创建react,及其代码结构 webstorm提供了创建各种框架的方式,通过用户点击交互的方式简化了命令行的操作,这篇markdown主要说明一下使用webstorm 2020版本创建react的一些问题和react框架的代码结构。 为了让过程更清晰,先新建一个test目录作为工程目录:E:\test 生成react 在上方导航栏点

如何访问webstorm写的html5,在webstorm上如何运行react项目?-爱代码爱编程

在webstorm上如何运行react项目?下面本篇文章就来给大家介绍一下在webstorm上创建和运行React项目的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 前提: 已经安装好node和webstorm 在webstorm上创建和运行React项目的方法: 1、运行如下命令安装create-react-ap

React+SpringBoot项目部署(idea以及webstorm)-爱代码爱编程

React+SpringBoot项目部署 React+SpringBoot项目部署react打包后端打包部署注意!!! React+SpringBoot项目部署 我是用的是idea以及webstorm进行编程 react打包 react项目创建按照百度使用webstorm创建react app,随便搜就行 创建好自己的项目写好后进行打包