[Daily knowledge] React study notes

1. React Features

1. Declarative programming

2. Component development

3. Multi-platform adaptation

2. React development dependencies

1. React: Contains the core code necessary for react

2. react-dom: React renders the core code required on different platforms

3.babel: convert jsx into react code tool

babel：babel.js

Currently it is a widely used front-end editor and converter

jsx is a syntax extension of JavaScript, which is called JavaScript XML in many places

It is used to describe our UI interface

3. Detailed explanation of React project structure

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 (记录真实版本的依赖)

After we create the scaffolding, we need to delete all the files in the src folder

1. Create an index.js file, which needs to write the following code

// 第一步:
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 文件中

[Daily knowledge] React study notes

Guess you like