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

前端之家收集整理的这篇文章主要介绍了使用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了

原文链接:https://www.f2er.com/react/306952.html

猜你在找的React相关文章