使用react如何配置webstorm
1. 安装环境
在一切开始前,请装好Node.js的环境,确保npm命令可以使用。
Mac下请使用 brew install node 安装。
2.WebStorm的配置
在WebStorm上默认打开React编写的js文件代码会报错,这时候需要去设置里面 Languages&Frameworks => javaScript 勾选 JSX Harmony
Mac下 ‘CMD + , ‘打开设置:
在Libraries下勾选如下:
3.创建项目
随便创建一个文件夹,如 React_Demo,用Webstorm打开 File - Open 。然后创建的工程目录大抵是这样的:
在目录下运行 npm init ,会让你填写一些相关信息,可以不填,一路回车键默认就好了,填好后yes就可以了。
目录下就会生成一个 package.json 文件和 node_modules 文件夹,之后一些依赖配置都在里面。
4.使用npm引入react和webpack
之前的做完后依次输入以下命令,来引入react webpack依赖。
安装react 、webpack写入并保存到开发环境中:
npm install react --save-dev npm install webpack --save-dev
在package.json就能看到相关依赖了。
5.配置webpack
在目录下创建webpack.config.js,
var path = require('path'); module.exports = { entry: path.resolve(__dirname, './app/main.js'), output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js', } };
entry相当于指定入口,这里我们指定的是 main.js
main.js
var component = require('./component'); document.body.appendChild(component()); component.js
module.exports = function () { var element = document.createElement('h1'); element.inner万博manbetx平台 = 'hello'; return element; };
上面的代码是简单的react代码,写好之后,那么就要运行了。
6.运行项目
如果之前环境安装正确,现在在目录下运行webpack命令,
成功后会在build目录下生成bundle.js文件,这时候可以创建一个index.万博manbetx平台文件
index.万博manbetx平台
<!DOCTYPE 万博manbetx平台> <万博manbetx平台> <head> </head> <body> <script src="build/bundle.js"> </script> </body> </万博manbetx平台>
这时候点击万博manbetx平台文件右键运行,或者直接选择你有的浏览器就打开就可以了。
可以看下最后生成的代码:
其实就是:
component.js中生成的加上main.js生成的代码。
当demo运行后,下面就是好好去学习react的语法了。
更多React相关技术文章,请访问React答疑栏目进行学习!
以上就是使用react如何配置webstorm的详细内容,更多请关注万博manbetx平台中文网其它相关文章!