文章目录

一、使用create-react-app创建react应用

1. react脚手架

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

2. 创建项目并启动

先装脚手架

1.npm install -g create-react-app

然后运行

2. create-react-app 你的项目名

cd 进去

npm run start

在这里插入图片描述

他会创建一个很纯粹的React项目
引用到的就是

"dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1"
}

没有其他依赖，所以如果要自己加一些库（UI组件什么的）就自己弄了

3. react脚手架项目结构

public ---- 静态资源文件夹
	favicon.icon ------ 网站页签图标
	index.html -------- 主页面
	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
		---- 组件单元测试的文件(需要jest-dom库的支持)

4. 功能界面的组件化编码流程（通用）

  1. 拆分组件: 拆分界面,抽取组件
  2. 实现静态组件: 使用组件实现静态页面效果
  3. 实现动态组件
    ①动态显示初始化数据
    ②数据类型
    ③数据名称
    ④保存在哪个组件
    ⑤交互(从绑定事件监听开始)

二、脚手架版 Hello React

1. 注意事项

  1. 为了区分组件和普通js文件，可以把定义组件的js文件后缀改成jsx
  2. 一个组件一个文件夹
  3. 引入js文件或者jsx文件时，可以不写后缀名
  4. 组件文件夹中的文件可以都命名为index，例如index.jsx/index.css，引入的时无需切进到该文件

2. 文件目录

在这里插入图片描述

3. 代码

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
)

App.js

import React, { Component } from "react";
import Hello from "./components/Hello/Hello";
import Welcome from "./components/Welcome/Welcome";
export default class App extends Component {
  render() {
    return (
      <div>
        <Hello></Hello>
        <Welcome></Welcome>
      </div>
    );
  }
}

Hello.jsx

import React, { Component } from "react";
import "./Hello.css";
export default class Hello extends Component {
  render() {
    return (
      <div>
        <h1 className="title">Hello React</h1>
      </div>
    );
  }
}

Hello.css

.title {
  background-color: pink;
}

Welcome.jsx

import React, { Component } from "react";
import "./Welcome.css";

export default class Welcome extends Component {
  render() {
    return <h2 className="demo">Welcome</h2>;
  }
}

Welcome.css

.demo {
  background-color: skyblue;
}

4. 页面

在这里插入图片描述

三、 VSCode【插件】生成代码模板

这里安利一款Vscode插件，它可以通过快捷键来快速生成代码模块，提高了编程效率。
在这里插入图片描述
例如：

  1. rcc+回车 （react class component）快速生成类组件
    在这里插入图片描述
    在这里插入图片描述
  2. rfc（react function component）快速生成函数组件
    在这里插入图片描述
    在这里插入图片描述
  3. 其他快捷键
    在这里插入图片描述
# react.js # javascript # 前端 # vue.js # webpack
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区