接上篇,创建完成以后,你的目录结构应该是如下的:

├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

接下来讲一下每个文件的详细,因为篇幅有点长,所以善用浏览器的搜索功能

README.md

自述文件,你可以用 markdown 来编辑


node_modules

此项目的第三方的模块包


package.json

文件内容如下

{
  "name": "react-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

简单的口胡一下就是包含了各种模块和你的项目信息
你也可以自己手动写 package.json 文件
此文件中的

      "name": "react-demo",
      "version": "0.1.0",

字段是必须的,代表着项目名和版本号,

"private": true,

代表这是一个私有项目

"dependencies": {}

这里面含有你这个项目的依赖之类的

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

指定了一些缩写,比如你运行 npm start ,npm build之类执行的命令

"eslintConfig": {}

ESLint ,简单来说就是代码风格检查器...讲起来有点水先不讲....

 "browserslist": []

就是浏览器的兼容情况,Github, 里面讲的挺清楚的我就不翻译搬运过来水文了...
当然这个文件还有其他的写法,不过就先不讲


.gitignore

这个应该都不用我说了都应该知道大概,Git相关


public

这个文件夹里有三个文件,分别是 favicon.ico , index.html , manifest.json
第一个大概是不用讲的,主要讲一下第二个,第三个是PWA(Progressive web apps)的相关,所以略过,现在暂时不讲
打开 index.html ,里面的文件内容应该是如下(已去掉注释)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

这段就是引用PWA(Progressive web apps)的相关的文件,可以删掉,也可以留着,暂不讲

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>

关注<div id="root"></div> 这段#1 后面会讲


  ── src
      ├── App.css
      ├── App.js
      ├── App.test.js
      ├── index.css
      ├── index.js
      ├── logo.svg
      └── serviceWorker.js

App.css,index.css,logo.svg,App.test.js略过 因为方便理解因此不会按字母顺序讲解

打开index.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'));
serviceWorker.unregister();

import React from 'react';
import ReactDOM from 'react-dom';

代表我们引入了react这个包,如果我们安装了新的包并且要使用那也需要引入

import './index.css';

引入了一个名为index.css的文件

import App from './App';

引入了一个目录中的App.js(js会自动补全)

ReactDOM.render(<App />, document.getElementById('root'));

ReactDOM 将一个组建挂载到了一个dom节点上,当然在这个项目里是挂载到另一个目录里的index文件里,这是因为webpack,自己配是天坑,所以暂时不讲...

import * as serviceWorker from './serviceWorker';

可以删掉, pwa ,如果要删除记得也将后面的serviceWorker.unregister();删除

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;

咕咕咕,坑还没填完

既然来了,那就试着讨论一下吧~,现在还没有评论噢

发表评论