【每日知识】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 文件中

【每日知识】React学习笔记

猜你喜欢