使用react 脚手架创建项目

一直都是学的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

进入安装过程

20190306102136431.png

安装成功

20190306102709890.png

运行项目

先进入项目目录
然后npm start

cd react-project
npm start

运行界面，默认端口是3000

20190306105001621.png

目录结构

.
├── 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.js

2 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(<App />, 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-PWA
serviceWorker.unregister();

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

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

打包

输入打包命令 npm run build

20190306111249784.png

在根目录多了一个打包文件夹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服务即可运行打包后的项目