欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react之脚手架安装

程序员文章站 2022-07-02 23:21:57
...

环境要求

  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

react之脚手架安装

项目结构

react之脚手架安装

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;

持续更新。