本文共 2224 字，大约阅读时间需要 7 分钟。

一直都是学的vue ，项目开发也是用的vue，那么多大公司都用的react，想具体了解一下react的优势。初步查看了react的文档，简单的搭了个初始化的demo。

安装全局的create-react-app 脚手架

前提是已经安装好node，在node 环境中，使用npm 来安装

在命令终端输入：npm install -g create-react-app

创建react 项目

找到对应的项目目录

使用脚手架命令创建react 项目 命令： create-react-app 项目名

create-react-app react-project

进入安装过程

安装成功

运行项目

先进入项目目录

然后npm start

cd react-projectnpm start

运行界面，默认端口是3000

目录结构

.├── README.md├── package-lock.json├── package.json├── public│   ├── favicon.ico│   ├── index.html│   └── manifest.json└── src    ├── App.css    ├── App.js    ├── App.test.js    ├── index.css    ├── index.js    ├── logo.svg    └── serviceWorker.js2 directories, 13 files

public：里面包含了我们项目中的启动页面，react比较适合单页面项目应用开发。

• favico.ico: 这是用来表示：快捷方式 小图标。详情可以访问文章
• index.html: 初始页面。
• manifest.json: wepack打包优化相关，本人没有研究过。

src：里面包含项目文件

• index.js 项目初始执行的js。内部进行页面元素的渲染操作。

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';ReactDOM.render(
   , 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: http://bit.ly/CRA-PWAserviceWorker.unregister();

• App.js 初始加载的组件。

import React, {
    Component } from 'react';import logo from './logo.svg';import './App.css';class App extends Component {
     render() {
       return (      
   
        
    
          
               
     
            Edit src/App.js and save to reload.          
          
                 Learn React                  
    
      
   
    );  }}export default App;

打包

输入打包命令 npm run build

在根目录多了一个打包文件夹build

.├── asset-manifest.json├── favicon.ico├── index.html├── manifest.json├── precache-manifest.bbc9a7961c70e7c57a7db0ad66643fe1.js├── service-worker.js└── static    ├── css    │   ├── main.ab202988.chunk.css    │   └── main.ab202988.chunk.css.map    ├── js    │   ├── 2.a539ea9d.chunk.js    │   ├── 2.a539ea9d.chunk.js.map    │   ├── main.668a09ff.chunk.js    │   ├── main.668a09ff.chunk.js.map    │   ├── runtime~main.fdfcfda2.js    │   └── runtime~main.fdfcfda2.js.map    └── media        └── logo.5d5d9eef.svg

进入到build 目录

启动node http-server服务即可运行打包后的项目

转载地址：http://lkhbb.baihongyu.com/