【每日知识】React学习笔记

一.React特点

1.声明式编程

2.组件化开发

3.多平台适配

二.React开发依赖

1.React:包含react所必须的核心代码

2.react-dom：react渲染在不同平台所需的核心代码

3.babel：将jsx转换成react代码工具

babel：babel.js 

目前是前端使用广泛的编辑器，转换器

 jsx是JavaScript的语法扩展extension，在很多地方被称为JavaScript的XML

它用来描述我们UI界面

三.React 项目结构 详细讲解

1. node_modules: 所有依赖的总集合包,和vue的是一样的
 
2. public {
   favicon.ico:图标 
 
   index.html:每个项目的入口,单页面复应用
 
   manifest.json: 和web app配置相关
 
   logo192.png:图片而已
 
   robots.txt:设置爬虫规则的
} 
 
3. src { // 写的所有的源代码文件的
   
   App.css: 当前的App组件的 css 样式
 
   App.js:App组件的代码文件(函数式组件)
 
   App.test.js: 对App写一些测试用例的
 
   index.css: 写全局样式的
 
   index.js: 整个应用程序的入口js文件
 
   logo.svg: 项目刚启动时看到的当前页面旋转的那个SVG图片
 
   reportWebVitals.js 默认帮我们写好的注册PWA相关代码
 
   setupTests.js:测试初始化文件
}
 
4. .gitignore(这个文件的主要工作是:忽略一些不需要提交到代码仓库的文件就在这里写,不需要共享的文件写在这里)
 
5. package.json(关于我们整个项目管理配置的一个文件)
 
6. README.md 说明文档
 
7. yarn.lock (记录真实版本的依赖) 

当我们创建好脚手架后，需要把src文件夹中的所有文件删掉

1.创建index.js文件，里面需要写以下代码

// 第一步:
import React from 'react';
//第二步:
import ReactDOM from "react-dom"
 
// 导入你封装的 js 文件
 
import { sum } from "./utils"
console.log(sum(10, 20));
 
// 第三步
 
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    }
  }
  render() {
    return (
      <div>
        <h2>当前计数</h2>
        <button>+</button>
        <button>-</button>
      </div>
    )
  }
}
 
// 第三步:
// ReactDOM.render(需要挂载的组件名称, 这个地方会找到你的pubic 里面的 index.html中的 <div id="root"></div> 文件)
ReactDOM.render(<App/>, document.querySelector('#root'))
 
这种写到 index.js 中是不规范的,所以 要重新写一个 App.js 文件 把 第三步 抽取到 App.js 文件中