随着react的流行,越来越多的前端工程师使用react来进行开发,当时用react时,creact-react-app无疑进入了大家的眼帘,本篇文章主要讲述如何从无到有的使用creact-react-app开发react应用,然后本地调试,直到最后的上线运行。
本篇文章内容结构说明,主要有以下12个部分:
1. 安装nodejs
2.使用nodejs的npm包安装create-react-app模块
3. 使用creat-react-app模块创建我们的项目
4. 了解控制我们项目运行测试打包的几个命令
5. 通过npm start运行我们的项目
6. 查看生产的项目目录的结构,并了解其作用
7. 开始创建几个我们自己的组件
8. 再次运行我们的项目
9. 开始打包生产环境中需要的代码
10. 将我们的代码部署进入我们的服务器
11. ok,上线了,我们可以让用户正式访问了
12. 维护调试
一、安装node:
我们要用create-react-app来开发react,首先要通过包管理器安装create-react-app,而包管理器一般安装了nodejs后会自带的,所以我们的第一步是在我们的电脑上安装node。
请参考以下nodejs安装教程:
二、检测npm包是否可用:
安装好后,并且也配置进入了环境变量,然后我们来检测下你的npm包是否可用,打开cmd窗口,输入npm -v 进行检测,如下所示,若显示版本号则说明安装成功,环境变量也配置成功,可用开始安装creact-react-app进行react开发了。如果,你输入npm -v后没有弹出版本号,那么可能是你的环境变量没有配置好。请参考下面的如何配置环境变量教程。
三、使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6
执行以下命令创建项目:
$ cnpm install -g create-react-app
$ create-react-app project_name
$ cd project_name/
$ npm start
在浏览器中打开 http://localhost:3000/ ,结果如下图所示:
命令解释:
npm : 表示调用的随node一起安装的npm包
install : 顾名思义,就是安装的意思
-g : 表示全局安装,安装后在系统的任意位置都能使用,这就是全局安装的意思
create-react-app: 这就是我们要安装的模块
提示:安装好后,如果你想卸载,可以直接把install改为uninstal即可,也就是在前面个un就可以表示卸载了。有时候卸载后在安装可能会报写错,此时你直接定位的create-react-app安装目录,然后把这个目录删除一般就能解决了。
四、常用命令解释
安装好后,他给你说了些命令,这些命令大致如下
npm start
命令作用:Starts the development server.
npm run build
命令作用:构建用于生产的静态代码【我们开发完成后,发布时就使用此命令获得我们想要的用于生产的代码放入服务器】
npm test
命令作用:运行测试服务器
npm run eject
命令作用:
复制构建依赖关系,配置文件和脚本进入应用程序目录。(默认依赖关系是隐藏的,如果你执行此了操作,这你的项目就会出现此依赖关系)
注意:此操作是不可逆的,
如何开始你的项目:
cd project_name
npm start
五、查看项目目录结构
然后我们打开项目目录,可以看下其目录结构
大致如下图所示,共有三个文件夹,四个文件
解释如下:
三个文件夹
node_modules //用来盛放你安装的所有node模块的文件夹
public //用来盛放所有公共资源的文件夹,比如html模板,项目图标
src //用来盛放你自己代码的文件夹,默认生成app.js代码也在里面
四个文件
.gitignore // 这个是用来定义那些在提交到远程代码库时要忽略的文件
package.json //用来声明项目的各种模块安装信息,脚本信息等
package-lock.json //用来锁定模块安装版本的,能确保大家安装的模块版本一致
README.md //盛放关于这个项目的说明文件(全英文的,有兴趣可以看看)
src文件夹
然后我们来重点看看src文件夹,因为我们的react组件代码待会也会写在里面。
这里面的文件也不多,就四部分
1、APP相关的js,css文件 //自动给我们创建的一个组件
2、index相关的js,css文件
3、一个logo.svg图标 //默认的一个简单图标文件
4、 一个registerServiceWorker.js文件 //此文件能进行缓存一些资源,一般是用到生产环境的,主要是用来加快访问速度,
大致的分析下组件结构
主要说些比较重要的文件
1. 首先是public目录下盛放着index.html模板,如果开发单页应用,那么所有的代码都会渲染在这里。【index.html文件中也就三部分内容。1.通过meat标签引入的主页一个自适应的viewport声明。2. 通过link标签引入的一个项目基本 m配置文件anifest.json和图标,3. 一个用来让react组件渲染的div标签】
2. 也是在public目录下的manifest.json文件,此文件记录着这个react的APP应用的基本配置信息,他类似于Android的AndroidManifest.xml
3. 然后就是在scr目录下的index.js文件,他不是一个react组件,他是链接react与htnl模板的桥梁,所有的react组件最终都是由他进行渲染到html模板中。然后整个文件中引入了一个系统默认生成的组件APP,有index.js进行渲染。
4. registerServiceWorker.js文件,这个文件是用于生产环境的,它可以缓存些资源,让用户在离线模式下也能访问缓存的内容,以给用户更好的体验,开发环境中没什么用处。。。
5. 最后还有个app.test.js文件,主要是用来组件测试的,有兴趣可以取好好了解下,这里就不多讲这个。
六、创建我们自己的组件
1. 整个项目文件基本分析完了,然后我们就可以创建自己的组件了。
2. 我们在src下新建一个目录:myselfComponent,用来盛放我们新创建的组件
3. 我们分别创建两个组件C1,C2,他们分别各显示一句话即可,
4. 然后我们在index.js里面引入C1,C2组件,
5. 然后在浏览器查看运行效果
项目目录如下:
c1.js代码如下:
import React, { Component } from 'react';
import './c1.css';
class C1 extends Component{
render(){
return(
<div className ="c1">
<h1>你好,我是新学的react中的第一个组件</h1>
</div>
);
}
}
export default C1;
c2.js代码如下:
import React, { Component } from 'react';
import './c2.css';
class C2 extends Component{
render(){
return(
<div className="C2">
<h1>66666666666这是组件2</h1>
</div>
);
}
}
export default C2;
index.js代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import C1 from './myselfComponent/c1.js';
import C2 from './myselfComponent/c2.js';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<div>
<C1/>
<App />
<C2/>
</div>
,
document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
浏览结果如图所示:
再复杂点
上面中,我们是把所有组件全部引入了index.js文件中,然后统一渲染的。但是在实际开发中组件间必然存在嵌套关系,就是一个组件里面嵌套着另一个组件,
现在我们就来在写个组件C3,然后把他嵌套进APP组件中。
c3.js代码如下所示:
import React, { Component } from 'react';
class C3 extends Component{
render(){
return(
<div className="c3">
<h1> hello 我是嵌套的组件</h1>
</div>
);
}
}
export default C3;
APP.js代码如下所示:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import './myselfComponent/c3.js'
import C3 from './myselfComponent/c3.js';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
哈哈哈哈 <code>src/App.js</code> and save to reload.
</p>
<C3/>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
浏览器浏览结果如图所示
七、打包为生产版
ok,基本上还是很简单的,然后我们的项目开发演示完成了,现在我们来开始进行生成生产环境的代码(所谓生产环境就是值用来发布到服务器里面的代码,是根据我们开发环境的代码生成)
执行命令:
num run build
执行此命令后,他会在我们的项目目录下创建一个build文件夹,里面存放的就是生产环境需要的代码了
八、将其放在服务器中执行
生成环境中的代码生成后就要开发发布了,也就是放到我们的服务器上,供用户访问使用
这部就比较简单了,直接将build里面的所有文件复制到服务器的根目录下即可,如下(这里我是直接复制到我本地搭建的apach服务器的根目录里面的)
在看浏览器里面的运行结果
九、将其放到远程服务里面部署
刚刚演示的是本地服务器,现在我再将其放到远程服务器里面进行部署
如果你不知道如何将文件上传到远程服务器,请参考这一篇文章
怎么把H5上传到服务器
在浏览器中访问,ok,一切正常
注意:如果你不想将文件复制到根目录,那么你需要修改inde.html文件中对js和css文件的路径,不然无法正常访问。
十、部署到服务器上后的维护
当我们项目上线后可能还要开发新功能,也可能项目运行期间会出bug,此时该怎么办呢?
1. 当要开发新功能时,我们直接在本地开发好,然后打包生产文件,最后直接放到远程服务器里面就可以了
2. 当出问题后,我们可以直接在浏览器里面访问,然后在线的打开控制台调试,并修改运行中的html代码,当改好后,再在本地修改即可。当然如果bug很复杂的话,那就需要认真思考了,不过要相信没有解决不了的bug
再总结下:流程如下
1. 安装nodejs
2.使用nodejs的npm包安装create-react-app模块
3. 使用creat-react-app模块创建我们的项目
4. 了解控制我们项目运行测试打包的几个命令
5. 通过npm start运行我们的项目
6. 查看生产的项目目录的结构,并了解其作用
7. 开始创建几个我们自己的组件
8. 再次运行我们的项目
9. 开始打包生产环境中需要的代码
10. 将我们的代码部署进入我们的服务器
11. ok,上线了,我们可以让用户正式访问了
12. 维护调试
到此,这篇文章就算完了,简单的讲了下,如何从无到有的搭建react开发环境,创建react项目,开发自己的项目,最后部署自己的项目,然后在运营期间的维护等。