react之脚手架安装

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/Ruffaim/article/details/81990521

环境要求

1. nodejs
2. git

脚手架选择

这里选择推荐的官方出品的脚手架,在github上有52kstar，
react脚手架 create-react-app地址

在git中使用npm全局安装create-react-app脚手架

npm install -g create-react-app

查看帮助

 create-react-app -h

  Usage: create-react-app <project-directory> [options]

  Options:

    -V, --version                            output the version number
    --verbose                                print additional logs
    --info                                   print environment debug info
    --scripts-version <alternative-package>  use a non-standard version of react-scripts
    --use-npm
    -h, --help                               output usage information

    Only <project-directory> is required.

    A custom --scripts-version can be one of:
      - a specific npm version: 0.8.2
      - a custom fork published on npm: my-react-scripts
      - a .tgz archive: https://mysite.com/my-react-scripts-0.8.2.tgz
      - a .tar.gz archive: https://mysite.com/my-react-scripts-0.8.2.tar.gz
    It is not needed unless you specifically want to use a fork.

    If you have any problems, do not hesitate to file an issue:
      https://github.com/facebookincubator/create-react-app/issues/new

---

使用脚手架初始化项目

//新建一个myapp文件夹
mkdir
//用脚手架构建一个react app
create-react-app myapp
//完成初始化之后cd到项目根目录启动
npm start

项目结构

index.js

//引入依赖
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//引入主模版
import App from './App';
//引入注册缓存和热更新服务 这一段注释可以在registerServiceWorker中看到
import registerServiceWorker from './registerServiceWorker';

//ReactDOM系统将App主模版渲染到绑定ID为root的元素上面
ReactDOM.render(<App />, document.getElementById('root'));
//注册服务
registerServiceWorker();

App.js

//引入依赖
import React, { Component } from 'react';
import logo from './logo.svg';
//公共样式
import './App.css';

//继承于Component的构造函数并渲染返回一个模版
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to My React App</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

//导出
export default App;

持续更新。