2.react 基础 - create-react-app 目录结构 及 组件应用

1. react-app 脚手架的 目录结构

　　node_modules　　-d　　　　存放 第三方下载的 依赖的包

　　public　　　　　　-d　　　 资源目录

　　　　favicon.ico　　-　　　　 左上角的图标

　　　　index.html　　 -　　　　 项目首页模板

　　　　manifast.json -　　　　 如果是一个 app 定义 app 的图标 网址 主题颜色等

　　src　　　　　　　 -d　　　 项目所有的源代码

　　　　index.js　　 -　　　　 整个程序的入口 (react 的理念 all in js)

　　　　index.css　　 -　　　　初始化样式

　　　　App.js　　　 -　　　　项目

　　　　App.test.js　 -　　　　自动化测试文件

　　　　App.css　　 -　　　　项目的样式

　　　　logo.svg　　 -　　　　首页 logo

　　　　serviceWorker.js -　　 将网页存储在浏览器内 如果突然断网了 可以继续访问该网页　　(PWD progressive web application 借助写来的 网页 用来做 app)

　　.gitignore　　　　 -　　　　用 git 管理代码 不想 传到 git 上 可以使用

　　package.json　　 -　　　　node 的包文件 和项目介绍 （ 命令行 命令 ） 等

　　README.md　　 -　　　　 项目的说明文件

　　yarn.lock　　　　 -　　　　依赖的安装包 （一般不用动）

2. react 组件

　　组件就是页面上的一部分

　　可以把一个 大的网页 组成 不同的组件

　　index.js 内

　　　　// 不能删除 React 导入 否则会编译失败

　　　　import React from 'react'

　　　　// 用于 挂载 到 DOM 节点上

　　　　import ReactDOM from 'react-dom'

　　　　// 导入 一个 app 组件 从 App.js 文件

　　　　import App from './App'

　　　　// 渲染 暴露出的 App 组件 并 渲染到 id 为 root 的元素内

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

　　App.js

　　　　import React, {Component} from 'react'

　　　　// import {Component} from 'react'

　　　　// 等价于

　　　　// import React from 'react'

　　　　// 和 const Compnent = React.Component

　　　　class App extends Component {

　　　　　　// 等价于 class App extens React.Component {

　　　　　　// 当 App 类 继承了 React.Component 类 时 , App 即为 React 的 组件了

　　　　　　render(){

　　　　　　　　// render 函数 返回什么 就展示 什么内容

　　　　　　　　return (

　　　　　　　　　　// render 内的 return 的 标签为 jsx 语法 必须引入 React 才能解析

　　　　　　　　　　<div> Hello React </div>

　　　　　　　　);

　　　　　　}

　　　　}

　　　　export default App;　　// 暴露 App class 用于 index.js 接受

　　　　// ReactDOM.render 将 App 组件 挂载到 id 为 root 节点下 （index.html 内的 id 为 root 的 div）

　　　　// <App /> 是使用 jsx 语法 所以 一定要引入 React 使用 React 语法

　　　　// render 函数内的 标签 是 jsx 语法

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