使用npm创建react webpack 我的第一次react-app

这是我第一次使用react创建webapp，其中不免还是遇到了好多坑，现在来和大家分享一下这其中遇到的一些坑。。。。

首先npm这个东西我就不说了，相信网上其他的详细教程应该也不会太少，那么在创建我们的webapp之前，我们先来做一些准备工作，一下的几样东西我们先准备好。。。。

$npminstallbabel-g
$npminstallwebpack-g
$npminstallwebpack-dev-server-g

这些全局包是我们在后面的创建app时必备的，所以我们要先准备好。。。。

那么接下来我们就要来生产webapp了，首先我们初始化npm，生产package.json文件

$mkdirreactApp
$cdreactApp/
$npminit
name:(reactApp)react-test
version:(1.0.0)
description:react-text
entrypoint:(index.js)
testcommand:
gitrepository:
keywords:
author:
license:(ISC)
Abouttowriteto/Users/tianqixin/www/reactApp/package.json:
{
"name":"runoob-react-test","version":"1.0.0","description":"菜鸟教程react测试","main":"index.js","scripts":{
"test":"echo\"Error:notestspecified\"&&exit1"
},"author":"","license":"ISC"}
 
Isthisok?(yes)

OK，现在我们的本地应用包已经创建好了，因为在这个项目中我们是要使用rect，所以我们需要先安装他，--save命令用于将包添加至package.json文件。。。。。

$npminstallreact--save
$npminstallreact-dom--save

同时我们也要安装一下babel插件，这些插件的目的是为了解析jsx，至于什么是jsx我们后面再说，，，，

$npminstallbabel-core--save
$npminstallbabel-loader--save
$npminstallbabel-preset-react--save
$npminstallbabel-preset-es2015--save

好了，一些必要的插件我们已经安装成功了，那么接下来我们就可以创建文件了。。。。

$touchindex.html
$touchApp.jsx
$touchmain.js
$touchwebpack.config.js

打开webpack.config.js，我们来配置一下文件，

varconfig={
//此处指明路口文件位置
entry:'.main.js',//配置打包结果，
//path配置定义了输出的文件位置
//filename则定义了打包结果文件的名称
output:{
path:'./',filename:'index.js',},//设置本地服务器端口号为9001，此端口可以自己设定，但记住不能与其他服务端口重复
devServer:{
inline:true,port:9001
},//定义了对模块的处理逻辑，这里可以用loaders定义一系列的加载器，以及一些正则，
//当需要加载的文件匹配test的正则时，会调用后面的loader对文件进行处理，
//所以这就是webpack骚的可怕的地方。。。。。
module:{
loaders:[{
test:/\.jsx?$/,exclude:/node_modules/,loader:'babel',query:{
presets:['es2015','react']
}
}]
}
};
 
module.exports=config;

然后打开package.json文件，修改其中scripts的内容，修改内容如下

{
"name":"runoob-react-test","scripts":{
	"start":"webpack-dev-server--hot"
},"license":"ISC","dependencies":{
"react":"^0.14.7","react-dom":"^0.14.7"
}}

修改完成之后，我们就可以使用npm start来启动服务了。

--hot命令会在文件变化后重新载入，这样我们就不需要在代码修改之后重新刷新浏览器就能看到变化了。。。

接下来才算是正式地开始写我们的webapp，那么第一步我们要做的就是入口文件的内容啦

在主界面设置我们的应用根元素，同时引入index.js脚本文件。

<!DOCTYPEhtml><html>
 
<head>
<Metacharset="UTF-8">
<title>ReactApp</title>
</head>
 
<body>
<divid="app"></div>
<scriptsrc="index.js"></script>
</body></html>

然后配置我们的App.jsx和main.js文件，这是我们的react组件。这个组件的任务就是输出Hello World!!!

App.jsx内容

importReactfrom'react';
 
classAppextendsReact.Component{
render(){
return(
<div>
HelloWorld!!!<br/>
</div>
);
}
}
exportdefaultApp;

main.js内容

importReactfrom'react';
 
importReactDOMfrom'react-dom';
 
importAppfrom'./App.jsx';
 
ReactDOM.render(<App/>,document.getElementById('app'))

那么我们要注意的一点是，如果想要组件可以在任何的应用中使用，需要在创建后使用export将其导出，然后在我们需要这个组件的时候，使用import来将其导入。。。

好啦，昨晚了以上的所有步骤，那么接下来我们就运行服务

$npmstart

这样我们就可以访问 http://localhost:9001 来看一下我们这个简单的webapp了

使用npm创建react webpack 我的第一次react-app

猜你在找的React相关文章