×
  • 反应– 的 Complete Guide (incl. 反应Router 4 & Redux)

  • 05 – Understanding 反应Folder Structure

    课程清单

    在里面 last lesson we have created a project 夹, and as I mention make sure that npm 开始 this process whenever you are working on your code. So, now let us walk through 反应Folder Structure, 的 number of files and 夹 we have in 的 project.


    根目录文件

    So lets now walk through all 的 file and 夹 we have on 的 root level. We got couple of configuration files, 的 lock files can basically be ignored 的y are just locking in 的 versions of dependencies we are using.
    我们项目的一般依赖性在 package.json 文件,您可以看到我们具有三个依赖项:

    package.json
    
      {
      "name": "burger-builder",
      "version": "0.1.0",
      "private": true,
      "dependencies": {         // Three main dependencies
        "react": "^16.9.0",
        "react-dom": "^16.9.0",
        "react-scripts": "3.1.1"
      }
      ...
    }
    

    And this all created by create-react-app and all 的 dependencies are which I have mention in lesson 3 ( First 反应App )

    在里面 package.json 有几个定义的脚本

    package.json
    
      {
       ...
       "scripts": {
        "开始": "react-scripts 开始",
        "建立": "react-scripts 建立",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      }
      ...
    }
    

    you can run this scripts with npm run /*script_name*/.
    开始: 的 exception is 开始 which you can also run with npm 开始. As you can see it npm 开始 use 的 反应script package with 开始 command 的re. This command happens to 开始 的 development server watch all our code, optimize 的 code, do all this thing.
    建立: once you are ready for deploying your app tou can run npm run 建立 to optimize it you more, but not launch 的 development server. Instade of it it stores 的 optimize code in a 夹 because right now you wont see your compiled code any where 的re, every things happen in memory. will come back for deployment of application later in 的 course.


    节点模块

    node_modules 夹 holds all 的 dependencies and sub dependencies of our project. Thats 的 reason you can see 的 more amount of 夹 and files in node modules. we only have react, react-dom, react-scripts but react scripts has a lot of other dependencies. all that little 建立 tools which compile code and so on.

    注意: 你应该 决不 将任何内容编辑到nodemodule文件夹中。如果在项目文件夹中运行npm install,则会自动生成它。

    公用文件夹

    公用文件夹更有趣。最终是Web服务器提供的根文件夹,尽管它只包含我们可以编辑的文件,脚本文件被添加到 src 夹。

    在里面 上市 文件夹,我们有一个导入文件 index.html 这是一个普通的HTML页面,它仍然是单个页面,在这里我们永远不会在此项目中添加html页面。
    因此,在此最后一页中,脚本文件将由构建工作流注入。这就是为什么您看不到任何导入脚本的原因。
    您可以编辑此文件,但我们绝不会在中编写任何html代码:

    上市 / index.html
    
    ...
    <div id="root"></div>
    ...
    

    在div上,我们稍后将安装我们的react应用程序,我们当然将工作和React。
    其他 的n that if you want to link some 的CSS and meta tags you can do that in HTML 文件。

    manifest.json

    上市 / manifest.json
    
    {
     "short_name": "反应App",
     "name": "Create 反应App Sample",
     "icons": [
       {
         "src": "favicon.ico",
         "sizes": "64x64 32x32 24x24 16x16",
         "type": "image/x-icon"
       },
       {
         "src": "商标192.png",
         "type": "image/png",
         "sizes": "192x192"
       },
       {
         "src": "商标512.png",
         "type": "image/png",
         "sizes": "512x512"
       }
     ],
     "开始_url": ".",
     "display": "standalone",
     "的me_color": "#000000",
     "background_color": "#ffffff"
    }
    

    manifest.json file is 的re because create-react-app gives us a progressive web app out of 的 box. A very basic one atleast and gives us his manifest.json file where we can define some meta data about our application.


    src

    index.js

    在一个 src 文件夹中,我们有几个要处理的文件,这实际上是我们的react应用程序。对我们来说最重要的是 index.js file gets access to document.getElementById('root') element of our DOM in our index.html 文件。 So 的 element with 的 id="root" is which ofcourse we see in 的 index.html 文件。

    src / index.js
    
      import 反应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();
    

    And 的re as u can see it renders our react application with 的 ReactDOM.render() method.
    的re is a refrence of some <App /> object or element which we imported from an app 文件。

    注意: 的 file extension i.e. .js is automatically added by our 建立 workflow.

    App.js

    src / App.js
    
    import 反应from 'react';
    import 商标 from './logo.svg';
    import './App.css';
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="商标" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a className="App-link" href="//reactjs.org" target="_blank" >
              Learn React
            </a>
          </header>
        </div>
      );
    }
    export 默认 App;
    

    在这里,我们看到了这个开始项目中的第一个也是唯一的React组件。

    App.css&& index.css

    它也产生了 App.css 这基本上定义了我们在我们中的一些样式 App.js 文件。虽然我会说这些不限于 App.js 文件。这些是一些全球风格。

    我们有一个 index.css 这也适用于全局样式,应该用于一些常规设置。

    serviceWorker.js

    serviceWorker.js 文件用于注册服务人员,该服务人员也会自动生成与我们开箱即用的此渐进式Web应用程序相关的内容。基本上,它将预缓存脚本文件。我们不需要在此文件中配置任何内容。

    App.test.js

    App.test.js 文件,那么我们将在本课程的后面部分进行测试。基本上,我们可以为应用程序中的示例组件的不同单元创建单元测试用例。

    反应introduction
    反应package
    反应Folder Structure
  • 启用通知    不用了,谢谢