react实战项目开发(1) 搭建react开发环境初始化项目（Create-react-app）

前言

Create React App

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

执行命令后新建项目：study-react

可以看下项目基本目录：

工程目录介绍

【node_modules】

【package.json】

{

  "name": "study-react", // 项目名称

  "version": "0.1.0", // 当前版本(默认是0.1.0)

  "private": true, // 项目是否私有

  "dependencies": { // 项目依赖哪些模块

    "react": "^16.8.6",

    "react-dom": "^16.8.6",

    "react-scripts": "2.1.8"

  },

  "scripts": { // 项目的脚本命令,我们执行 npm run start 等于执行 react-scripts start

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": "react-app" // 使用 JavaScript、JSON 或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。可以配置一个独立的 .eslintrc.* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们。

  },

  "browserslist": [ // 这代表这个项目的浏览器兼容情况

    ">0.2%",

    "not dead",

    "not ie <= 11",

    "not op_mini all"

  ]

}

【public目录】

favicon.ico：页面左上角的图标

index.html：入口的HTML页面

manifest: PWA相关，做离线使用(这里不展开讲解)

【src目录】

整个项目的入口文件：index.js(主要用于把入口组件挂载到HTML上)

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App'; // 自定义的组件

// 当项目部署到https协议的服务上，第一次访问需要网络，一旦加载完成后如果此时断网，还是可以访问刚刚的页面

import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root')); // 将组件App 挂载HTML的 root元素下，这样界面就可以显示App组件的内容了

serviceWorker.unregister();

App.js：App组件的定义文件

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

  render() {

    // jsx 相关内容

    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; // 提供对外的引用

App.test.js： 组件单元测试文件

App.css：组件样式文件

小结

通过本文我们学习了

• 初始化react环境
• 初始化项目文件的介绍