1.通过node环境创建react工程插件
npm install -g create-react-app
2.指定目录创建React工程
create-react-app <工程名>
3.进入目录启动项目
cd <工程根目录>
yarn start
4.创建第一个组件

创建welcome.js

import React, {Component} from 'react';

class Welcome extends Component {
    render() {
        return <h1> Hello, World! </h1>
    }
}
export default Welcome

并将新组件引入到主页面中

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Welcome from './Welcome';

function App() {
  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>
        <Welcome/> {/* 引入新组件 */}
      </header>
    </div>
  );
}
export default App;

刷新页面

启动成功

5.打包
yarn build
其他
1.目录介绍
  • README.md :对项目的说明。
  • package.json: 这个文件是webpack配置和项目包管理文件,项目中依赖的第三方包(包的版本)和一些常用命令配置都在这个里边进行配置。
  • package-lock.json:这个文件用一句话来解释,就是锁定安装时的版本号,并且需要上传到git,以保证其他人再npm install 时大家的依赖能保证一致。
  • gitignore : 这个是git的忽略上传的配置文件,比如一会要介绍的node_modules文件夹,就需要配置不上传。
  • node_modules :项目的依赖包。
  • public :公共文件,里边有公用模板和图标等一些东西。
  • src : 主要代码编写文件。

public文件夹介绍

  • favicon.ico : 这个是网站或者说项目的图标,一般在浏览器标签页的左上角显示。
  • index.html : 首页的模板文件,我们可以试着改动一下,就能看到结果。
  • mainifest.json:移动端配置文件。

src文件夹介绍

  • index.js : 这个就是项目的入口文件。
  • index.css :这个是index.js里的CSS文件。
  • app.js : 这个文件相当于一个方法模块,也是一个简单的模块化编程。
  • serviceWorker.js: 这个是用于写移动端开发的,PWA必须用到这个文件,有了这个文件,就相当于有了离线浏览的功能。