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'));
