Skip to content

简介

Facebook 推出,2013 年开源、函数式编程,使用人数最多的前端框架、健全的文档与完善的社区

React 是一个声明式,高效且灵活的用户构建用户界面的 JavaScript 库。
使用 React 可以将一些简短、独立的代码片段组成复杂的 UI 界面,这些代码片段被称作“组件”。

https://zh-hans.reactjs.org/

https://github.com/facebook/react

文档

https://zh-hans.reactjs.org/docs/getting-started.html

开发环境搭建

Create React App 是一个用于学习 React 的舒适环境,也是用 React 创建新的单页应用的最佳方式。

1
2
3
4
npm install -g create-react-app
create-react-app todolist
➜  Desktop cd todolist
➜  todolist git:(master) npm start
1
2
3
npx create-react-app my-app
cd my-app
npm start

Create React App 不会处理后端逻辑或操纵数据库;它只是创建一个前端构建流水线(build pipeline),所以你可以使用它来配合任何你想使用的后端。
它在内部使用 Babel 和 webpack,但你无需了解它们的任何细节。

工程目录简介

package.json: node 包文件,包括项目介绍、依赖的第三方包、还有一些指令可以供我们使用

public 目录

index.html: 首页模板

src 目录

index.js: 所有代码(整个程序)的入口
其中导入了index.css, App.js

index.css: React all in js,可以在 index.js 中引入 index.css(可以直接删除掉)

App.js: 引入了 logo.svg这个动态图片(可以删除这个图片相关) 还引入了App.css,可以删除

入门教程

https://zh-hans.reactjs.org/tutorial/tutorial.html

1
2
3
4
5
6
node --version
v16.7.0
npx --version
8.5.0
yarn --version
1.22.11
1
2
3
4
npx create-react-app my-app
cd my-app
rm -f *
cd ..