React系列(二) - react基础知识 React系列(三) - DOM操作 React系列(四) - react生命周期

背景

入行至今，主要技术栈是vue。从零开始，记录自己学习react的点滴，从基础到react全家桶(react-router、redux等)

准备工作

// 全局安装create-react-app
npm i -g create-react-app

// 查看当前版本
create-react-app --version

创建项目

// 普通react项目 (create-react-app 项目名)
create-react-app my-app

// 创建ts版本(create-react-app 项目名 --template typescript)
create-react-app my-app --template typescript

// 项目运行
npm run start // 或者npm start

目录结构

/*
public - 公共资源
src - 项目源代码
.gitignore - 用来忽略指定文件或文件夹
package.json - 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
README.md - 备注
*/

packgae.json详解

/*
name - 项目名称
version - 版本号
dependencies - 项目运行时所需要的模块
devDependencies - 项目开发时所需要的模块
scripts - 指定了运行脚本命令的npm命令行缩写
eslintConfig - 配置eslint的规则
browserslist - 根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器
*/

简单介绍JSX语法

React中使用JSX代替JavaScript。React中一个js文件

定义一个HTML变量，可以直接渲染

import React from 'react';

class Todo extends React.Component {
    render() {
        const element = <h1>Hello World</h1>
        return (
            <div>{element}</div>
        )
    }
}

export default Todo;