webstorm快速配置react

最新推荐文章于 2020-12-30 06:58:53 发布
最新推荐文章于 2020-12-30 06:58:53 发布
阅读量1.6k 收藏
点赞数
分类专栏： 软件配置/操作 webstorm 文章标签： react 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roadloser/article/details/89382696
版权
本文介绍了如何在WebStorm中快速配置React环境，包括将JavaScript版本设置为React JSX，创建React工程时的命名规范，以及提供了一些参考链接和官方配置指南。
摘要由CSDN通过智能技术生成

以下都是废话，建议看菜鸟教程


也推荐这一个链接，它是React几种基本配置方案，你可以根据需求选择合适的配置


默认你装了node.js和npm还有ws2018.2.4。

首先在设置（setting）里搜索lang（语言与框架）找到并JavaScript，版本改成react jsx

ps：顺便给个官网配置react的链接，谷歌打开翻译吧 链接

在这里插入图片描述

然后创建react工程，文件名只能是字母或者中划线‘-’

ps：反正不支持中文和下划线
在这里插入图片描述
等待安装完成就能用了

↓顺便，我是在这几个链接里面参考的↓
参考1
参考2
菜鸟教程

roadloser
关注
专栏目录
React Native —— webstorm搭建React Native开发环境
且听风吟的博客
04-25 628
1、下载安装node.js 安装之前检查是否已有node.js环境： cmd 命令下输入node -v, 出现版本号，说明已经成功安装了node.js环境 ，如下图所示： 2、安装 react native 脚手架工具 如果之前全局安装过旧的react-native-cli命令行工具，先使用npm uninstall -g react-native-cli 命令卸载掉，再进行全局安装它，以避免产生一些冲突问题。 安装成功后会有提示 验证： 3、安装 Webstorm 官网下载 Webstorm 安装包：
react 之环境搭建（使用webstorm）
fanym18的博客
05-08 2801
使用webstorm搭建react（五步） 步骤一： webStorm中配置node.js。 （参考上一篇文章 ） 步骤二：管理员权限打开webstorm。 （很重要） 步骤三：安装react官方脚手架。 在terminal终端输入npm install -g create-react-app，一个webstorm安装依次即可。 步骤四：新建react项目。 打开file–new–project...
WebStorm 运行Rect Native 项目
weixin_30577801的博客
03-03 262
今天教大家如何直接使用WebStorm这个IDE直接完成编码+运行项目工作.这样就可以不用打开Xcode了. 1.首先点击WebStorm右上方的下拉箭头弹出的Edit Configurations.... 2.然后会进入一个配置页面.点击左上方的+.在弹出的列表中选中npm.如图. 3.在右边的配置框中,先选择Command为help.接着点击下方的+号.再点击Run Extern...
设置webstorm支持react的的方法
xuanpl的博客
04-11 4954
WebStorm是一个功能强大的前端编辑器，今天在使用了React框架之后使用WebStorm打开，发现它不支持React的语法检测，满屏都是红的报错。 看到顶部黄条提示选择 JSX，于是打开 文件/设置/语言和框架/JavaScript ，选择JavaScript language version中的 JSX Harmony ，确定就可以了。 然后语法检测就支持r
Reacjs_Live_Template:用于 WebStorm 的 React 片段
06-01
用于 WebStorm 的 Reactjs 实时模板 对我键入的内容进行排序。
webStorm编辑器ReactNative配置-附件资源
03-05
webStorm编辑器ReactNative配置-附件资源
webstorm安装eslint插件_WebStorm + React 项目，配置 ESLint
weixin_39945816的博客
12-30 1319
ESLint 简介ESLint是一个开源的JavaScript代码检查工具，其作者是大名鼎鼎的“红宝书”《JavaScript高级程序设计》作者 Nicholas C. Zakas。Nicholas C. Zakas 在他的多部著作中都有涉及到JavaScript的代码风格问题，而eslint正是用来统一JavaScript代码风格的工具。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，...
webstorm 创建react组件_react+webpack+webstorm开发环境搭建
weixin_39621819的博客
12-21 341
需要安装的软件node.jsnpm包管理以上两个包的下载地址如下：由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm更换npm库的源由于国内的网络原因，推荐只用阿里的npm源地址构建项目使用webstorm新建一个空白项目打开控制台，在控制台里输入npm init 命令来初始化一个package.json文件，这个文件是一个类似于pom.xml的文件，用来描述需要的依赖库。在控制...
webstorm的下载以及React环境搭建
weixin_34258782的博客
07-21 402
前言：本文我们将讨论ubuntu中webstorm的安装以及基本React环境搭建 一、安装JDK 下载webstorm之前我们要确定已经下载了jdk，这是必须的否则会在之后的操作提示你无法打开wenstorm。因为你没有安装或是版本太低。其实jdk的安装很简单 首先输入一下代码检查一下jdk版本。 java -version 好的，一般...
ReactNative系列之十三WebStorm的JSX语法配置及自动补全设置
yeputi_WK的博客
04-22 7910
1、开发ReactNative常用工具，WebStorm、Sublime、Atom。 2、配置WebStorm的ReactNative语法 a)下载 git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate.git b)导入WebStrom file -> import settings -> Re
WebStorm、WebPack、ES6、React、JSX
我爱苏小北
07-19 1364
花了很多时间，真的是弄的自己很懵，趁现在整理一下，方便以后查看，也分享给跟我一样懵的人。很多内容是我个人的理解，可能讲究起来有些描述不是很准确，但是我这样的初学者，得先大概了解了、会用了再去深究深层次的东西。 webstorm 首先是一个工具，给我们写代码的，可以直接新建一个project，然后新建文件html、css、js等文件，然后写代码，然后运行。 运行html、css、js程...
React学习一——webstorm环境搭建和React基础语法
weixin_43896829的博客
08-12 2633
React 一、环境搭建 Node.js+WebStorm+react.js Node.js 在rTool上搜索node.js,下载安装包 打开安装，除了路径，一路next (1) 修改环境变量 计算机->属性->高级系统设置->环境变量->系统变量->path编辑->将安装路径加入其中 (2) 测试 此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号： (3) 配置npm在安装全局模块时的路径和缓存ca
关于React Native 报Export declarations are not supported by current JavaScript version错误的解决问题...
weixin_34253539的博客
08-16 295
设置.js文件默认以jsx的语法打开 在没有进行设置的情况下，每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示： 当然我们点击转换后就可以了，但是每次都会提示，所以还是来一个一劳永逸的方法把它给去掉吧： 然后Apply/OK即可。 设置.js文件中支持react-native语法高亮 首先会发现在js文件中有不少的警告，...
Webstorm填坑系列
zw52yany的博客
10-12 752
本人是前端小菜鸟，经常被webstorm玩的要死要死的，下面指出一些例子： （1）react的文件tsx，在webstorm没有配置的情况下，会报错，然后webstorm就提示把它转成javascript，好我上当了，点了，页面果然不报错了，然后yarn install的时候又出现这种错： 原来是它自发编译成了js，就放在原来.tsx文件下面，坑爹吧，又不符合react语法了。 结果只能把
收藏设置webstorm字体及配色
xu0511522的博客
02-07 4838
设置地址：http://jingyan.baidu.com/article/22a299b539bcb19e19376a93.html
webstom设置和monokia配色方案
weixin_34056162的博客
06-19 924
首先，最后配色结果如下： 本次配色参考几个文档： http://frontenddev.org/article/webstorm-portal-1-subject-and-match-colors.html http://www.cnblogs.com/dc10101/archive/2013/01/03/2842590.html   现备份如下： 1、引子 以前介绍过 Su...
webstorm react
最新发布
02-21
6. 自动格式化：WebStorm可以根据你的配置自动格式化React代码，使其符合统一的编码风格。 7. 版本控制集成：WebStorm与常见的版本控制系统（如Git）集成，可以方便地管理React项目的代码版本。 总之，WebStorm提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值