# SGG-REACT 脚手架学习笔记 (基于React16)

# 不懂就问、不会就学、错了就改

# 创建react应用

# react 脚手架

XXX脚手架：用来帮助程序员快速创建一个基于XXX库的模板项目
- 包含所有需要的配置（语法检查，jsx，devServer...）
- 下载好了所有相关的以来
- 可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库：create-react-app
项目整体技术架构：react+webpack+es6+eslint
使用脚手架开发的项目特点：模块化，组件化，工程化

# 创建项目并启动

全局安装：npm install -g create-react-app
切换到想创项目的目录，使用命令：create-react-app hello-react
进入项目文件夹： cd hello-react
启动项目: npm start

# react 脚手架项目结构

node_modules ---- 依赖的包
public ---- 静态资源文件夹
- favicon.icon --- 网站页签图标
- index.html --- 主页面（承装各个组件）SPA（单页面应用）主页面
- logo192.png --- logo图
- logo512.png --- logo图
- manifest.json --- 应用加壳的配置文件
- robots.txt --- 爬虫协议文件
src ---- 源码文件夹
- App.css --- App组件样式
- App.js --- App 组件
- App.test.js --- 用于给App做测试
- index.css --- 样式
- index.js --- 入口文件
- logo.svg --- logo图
- reportWebVitals.js --- 页面性能分析文件（需要web-vitals库的支持）
- setupTests.js --- 应用整体测试

相对应的代码

public--- index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- 指定网站的图标 %PUBLIC_URL% 代表public文件夹的路径-->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 
    <!--开启理想视口 移动端网页的适配  -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 用于配置浏览器页签的颜色+地址栏的颜色（仅支持安卓手机浏览器）兼容性不是很好 -->
    <meta name="theme-color" content="#000000" />
    <!-- 描述网站信息 搜索引擎 -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 用于指定网页添加到手机主屏幕后的图标 （兼容性不好） -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 应用加壳时的配置文件 -->
    <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>

src --- index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// ReactDOM.render(<App/>,document.getElementById('root'))
// <React.StrictMode> 检查代码中不合理的地方
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)
reportWebVitals();

说点废话：项目启动后，首先来到src下的index.js，经过一系列的引入，(react中webpack配置)找到了public下面的index.html里面id为root的节点

# react 实例 TodoList

1,拆分组件，实现静态组件，注意：className,style的写法
2，动态初始化列表，如何确定将数据放在哪个组件的state中？
- 某个组件使用：放在其自身的state中
- 某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
3，关于父子组件通信:
- 【父组件】给【子组件】传递数据：通过props传递
- 【子组件】给【父组件】传递数据：通过props传递，需要父组件提前给子组件传递一个函数
4，注意defaultChecked和checked的区别，类似的还有：defaultValue和value
5，状态在哪里，操作状态的方法就写在哪里

# 代码地址 (opens new window)

# SGG-REACT 脚手架 学习笔记 (基于React16)

# 不懂就问、不会就学、错了就改

# 创建react应用

# react 脚手架

# 创建项目并启动

# react 脚手架项目结构

# react 实例 TodoList

# 代码地址 (opens new window)

# React ajax

# SGG-REACT 脚手架学习笔记 (基于React16)