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

├── 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">
              logo
              <p>
                Edit src/App.js and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              
            </header>
          </div>
        );
      }
    }
    
    export default App;


咕咕咕,坑还没填完(沉迷明日方舟中

既然来了,那就试着讨论一下吧~,现在已有一条评论哒,不如试着加入讨论?

  1. repostone
    repostone 发表于2019-05-30 回复

    非技术的路过。

发表评论