React学习(二)——react项目目录

一、一个小知识点

node_modules :这个文件夹里面放入的是这个项目依赖的文件，如果没有，请执行yarn install

如果你的项目中没有 yarn.locak 文件，只有 package.json需要运行npm install。

我们来说一个小知识点:

当我们使用 npx create-react-app my-app 命令时都会生成一个 package.json 。create-react-app 这个脚手架创建项目的时候，会判断你的环境中有没有yarn 这个工具。如果有的话，会用 yarn 来安装依赖包生成一个 yarn.locak ，如果没有的话会用 npm来安装。

二、工程目录介绍

yarn.lock 整个项目中所依赖的第三方模块的各种信息

README.md 对项目的说明，里面介绍了整个项目达到什么样子的效果、需要搭建什么样的环境、具备什么样的技能等等

package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

gitignore 这个是git的选择性上传的配置文件，这里的文件都不会上传到GIT中

public 公共文件，里边有公用模板和图标等一些东西

favicon.ico : 这个是网站或者项目的图标，一般在浏览器标签页的左上角显示
index.html : 首页的模板文件，我们可以试着改动一下，就能看到结果。
mainifest.json：移动端配置文件。如果想要了解：传送门
robots.txt：搜索引擎baispider(蜘蛛)在访问一个网站时，会先检查该网站目录是否存在robots.txt文件。这个文件用于指定spider(蜘蛛)在网站抓取的范围，也就是你想让他抓取部分和你不想让他抓取部分的说明文件。

src 源码目录这个目录里边放的是我们开放的源代码

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

三、值得注意的地方

react项目中隐藏了所有的webpack相关的配置文件，如果我们需要在webpack中安装一些自己的loder或者plugin变的很困难；
create-react-app自动生成的webpack中集成了：eslint、url-loader、babel-loader、style-loader、css-loader、HtmlWebpackPlugin等内容；
初始化的react中最常用的 react和react-dom 组件，我们可能还会需要：redux react-redux react-router-dom prop-types 等等。

四、值得注意的两个文件

react项目中

App.js

import React, {
    
     Component } from "react";
class App extends Component {
    
    
  render() {
    
    
    return <div>Hello world!</div>;
  }
}
export default App;

import React, { Component } from "react";:实际上这个等于下面的

import {
    
     Component } from 'react';
import React from 'react';

const {
    
     Comonent } =  React;
const Component = React.Component;

index.js

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

import App from './App';
import Test from './Test';

//JSX语法
ReactDOM.render(<div><App /><Test /></div>, document.getElementById('root'));

import React from 'react';：引入这个的意义就是，引入这个模块之后就可以帮助我们解析JSX语法。

render 决定这个组件显示的的内容。