使用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了 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |