{"id":28566978,"url":"https://github.com/pschina/react","last_synced_at":"2025-06-10T15:40:47.543Z","repository":{"id":36608136,"uuid":"133897048","full_name":"PsChina/React","owner":"PsChina","description":"一个入门 React 的学习笔记","archived":false,"fork":false,"pushed_at":"2023-03-02T09:01:16.000Z","size":3768,"stargazers_count":35,"open_issues_count":44,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-03-02T13:21:08.316Z","etag":null,"topics":["react","react-router","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PsChina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-18T03:16:30.000Z","updated_at":"2023-03-02T13:21:08.316Z","dependencies_parsed_at":"2023-01-17T03:15:45.252Z","dependency_job_id":null,"html_url":"https://github.com/PsChina/React","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PsChina%2FReact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PsChina%2FReact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PsChina%2FReact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PsChina%2FReact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PsChina","download_url":"https://codeload.github.com/PsChina/React/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PsChina%2FReact/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259104303,"owners_count":22805851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router","redux"],"created_at":"2025-06-10T15:40:15.280Z","updated_at":"2025-06-10T15:40:47.503Z","avatar_url":"https://github.com/PsChina.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React\n这个仓库用于记录我的react使用笔记，以及和大家分享。\n\n1. [react 语法](https://github.com/PsChina/React/tree/master/demos#目录)\n1. [react 路由](https://github.com/PsChina/React/tree/master/react-router#目录)\n1. [redux](https://github.com/PsChina/React/tree/master/redux#目录)\n1. [react 环境搭建](https://github.com/PsChina/React/tree/master/demos/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA)\n1. [react 自定义组件实例](/components)\n1. [react-hook](/react-hook)\n\n## react环境搭建\n如果不想这么麻烦可以使用[脚手架](https://create-react-app.dev/docs/getting-started)。\n\n## 前言\n\nreact不像jquery一样能通过src直接使用它需要一系列的辅助工具的支持，我们在学习react之前需要初步了解 nodejs [webpack](https://github.com/PsChina/Vue/tree/master/webpack) 以及 babel。\n\n另外还需要掌握 [es6](https://github.com/PsChina/Vue/tree/master/es6) jsx 函数式编程 等知识。\n\n## 1、\n安装[nodejs](https://nodejs.org/en/)。\n\n## 2、\n\n新建项目文件夹 例如这个仓库下的 demos/环境搭建。\n\n## 3、\n\n安装 react、react-dom 包。\n\n```bash\nnpm i react react-dom -S\n```\n\n## 4、\n新建react项目入口文件 app.js 。\n\n新建项目主页 index.html 。\n\n新建 webpack 配置文件 webpack.config.js 。\n\napp.js\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nclass App extends React.Component{\n    constructor(){\n        super()\n    }\n    render(){\n        return (\n            \u003cdiv\u003eHello World!\u003c/div\u003e\n        )\n    }\n}\n\nReactDOM.render(\u003cApp/\u003e,document.getElementById('root'))\n```\n在 html 中需要一个元素来作为 react dom 树的根节点，注意最好不要使用 body 。 [原因](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375)。\n\nindex.html\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nwebpack.config.js\n```js\n\nvar HtmlWebpackPlugin = require('html-webpack-plugin')\nvar path = require('path')\n\nmodule.exports = {\n    entry: './app.js',\n    output: {\n        path: path.resolve(__dirname, 'build'),\n        filename: 'bundle.js'\n    },\n    plugins: [\n        new HtmlWebpackPlugin({\n            template: './index.html'\n        })\n    ],\n    module: {\n        rules: [\n            { test: /\\.jsx?$/, use: [ {\n                loader: 'babel-loader',\n                options: {\n                    presets: ['@babel/env', '@babel/react'],\n                }\n            } ] },\n            { test: /\\.css$/, use: ['style-loader', 'css-loader'] },\n            { test: /\\.html$/, use: ['html-loader'] },\n            { test: /\\.(png|jpe?g|gif|svg|mp4|webm|ogg|mp3|wav|flac|aac|woff2?|eot|ttf|otf)$/, use: [ { \n                loader: 'url-loader', \n                options: {\n                    limit: 10000\n                } \n            } ]}\n        ]\n    },\n    devServer: {\n        contentBase: __dirname,\n        port: 8080,\n        open: 'http://localhost:8080'\n    }\n}\n```\n### 注意\nwebpack.config.js 中增加了 bable env react html-laoder style-loader css-laoder url-loader 等。\n\n所以我们需要把这些依赖下来下来。\n\n__下载 es6 转 es5、jsx 转 js 的工具:__\n\n```bash\nnpm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D\n```\n\n__下载将 css 转 js 的工具:__\n\n```bash\nnpm i css-loader style-loader -D\n```\n\n__下载将 html 引入 webpack 的工具:__\n\n```bash\nnpm i html-loader -D\n```\n\n__下载装载文件的工具:__\n\n```bash\nnpm i url-loader -D\n```\n\n__下载装载 html 的工具:__ (将bundle.js自动加入html。)\n\n```bash\nnpm i html-webpack-plugin -D\n```\n\n__下载启动本地服务的工具:__\n\n```bash\nsudo npm i webpack webpack-dev-server -g\nnpm i webpack webpack-dev-server -D\n```\n\n__下载 webpack :__\n\n```bash\nnpm i webpack -D\n```\n\n如果电脑内已经全局和本地安装了 webpack-cli 那么不必运行以下两行。\n\n```bash\nsudo npm i webpack-cli -g\n```\n\n```bash\nnpm i webpack-cli\n```\n\n到这里依赖就已经装完了。\n\n下载完别忘了 npm init 。\n\n运行一下。\n\n```bash\nwebpack-dev-server --mode development\n```\n\n\n## 5、\n其他配置:\n\n### sass\n```\nnpm i sass-loader node-sass -D\n```\n\nwebpack.config.js\n```js\n\nvar HtmlWebpackPlugin = require('html-webpack-plugin')\nvar path = requre('path')\n\nmodule.exports = {\n    // ...\n    module: {\n        rules: [\n            // ...\n            { test: /\\.css$/, use: ['style-loader', 'css-loader'] },\n            { test: /\\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }\n            // ...\n        ]\n    },\n    // ...\n}\n```\n新建 app.scss。\n```scss\n$green : green;\n.green {\n    color: $green;\n}\n```\n\napp.js\n```js\nimport './app.scss' // 在app.js 引入sass\n```\n\n### 压缩 js css\n\n```js\nvar HtmlWebpackPlugin = require('html-webpack-plugin')\nvar UglifyJsPlugin = require('uglifyjs-webpack-plugin');\n\nmodule.exports = {\n    // ...\n    plugins: [\n        new HtmlWebpackPlugin({\n            template: './index.html',\n            minify: {\n                removeComments: true,//清除HTML注释\n                collapseWhitespace: true,//压缩HTML\n                removeEmptyAttributes: true,//删除所有空格作属性值 \u003cinput id=\"\" /\u003e ==\u003e \u003cinput /\u003e\n                removeScriptTypeAttributes: true,//删除\u003cscript\u003e的type=\"text/javascript\"\n                removeStyleLinkTypeAttributes: true,//删除\u003cstyle\u003e和\u003clink\u003e的type=\"text/css\"\n                minifyJS: true,//压缩页面JS\n                minifyCSS: true//压缩页面CSS\n            }\n        }),\n        new UglifyJsPlugin() // 压缩js\n    ],\n    // ...\n}\n```\n### 抽离公共 js 单独抽取 css 等等\n\n请查看 [webpack plugin](https://github.com/PsChina/Vue/blob/master/webpack/s-Day7%203-webpack-plugin.md)\n\n\n### scripts\n\n如果觉得每次运行项目都需要输入 webpack-dev-server --mode development 太麻烦的话可以在 package.json 中的 scripts 字段下添加 cmd 命令。\n\npackage.json\n```json\n{\n  \"scripts\": {\n    \"dev\": \"webpack-dev-server --mode development\"\n  },\n}\n```\n就可以通过 `npm run dev` 来运行项目啦。\n\n## react 项目 alias 配置\n\nalias 别名 指的是在项目开发的过程中对某一个资源引用路径取别名。\n\n为什么我们要取别名？\n\n因为使用相对路径比较费脑子，且容易出错，为避免浪费宝贵的时间在这种没有技术含量的事情上建议使用别名来代替相对路径。\n\n例如: 我们将 `src` 取名为 `@src` 以下写法将会变得简单\n\n```\n|-src // 代码源文件\n| |- components // 组件 \n| |  |\n| |  | - charts // 图表\n| |  |     |\n| |  |     | - EagleEyePieChart // 目标组件\n```\n\n不用 alias 的话，在不用的文件中引用这个组件会有不同的相对路径，也就是有不同数目的 `../` 的相互拼接，这导致一个问题就是当你的项目结构发生改变的时候这该死的相对路径的会很烦人。\n```js\nimport PieCharts from '../../components/charts/EagleEyePieChart';\n```\n\n使用 alias 的话，我们在任何文件中引用这个组件写法都是和下面的代码一模一样。是不是很方便。\n```js\nimport PieCharts from '@src/components/charts/EagleEyePieChart';\n```\n\n下面来介绍下如何在 React 项目中配置 alias\n\n1. 如果你的 react 项目是用 create-react-app 生成的那么你需要 打开 react 项目的配置项 命令是 `npm run eject` 参考[打开 webpack 配置项](https://github.com/PsChina/React/tree/master/React%20%E8%84%9A%E6%89%8B%E6%9E%B6%20create-react-app%20%E7%9A%84%E4%BD%BF%E7%94%A8#%E4%BA%94%E6%89%93%E5%BC%80-webpack-%E9%85%8D%E7%BD%AE%E9%A1%B9).\n\n1. 接下来找到 `webpack.config.js` 这个文件\n\n1. 找到 `resolve` 下的 `alias` 在 `resolve.alias` 中新增你要取别名的文件夹路径。\n\n    ```js\n        resolve: {\n        //...\n        alias: {\n            //...\n            \"@src\":paths.appSrc,\n        },\n        // ...\n        }\n    ```\n\n1. 如果你的项目是 typescript 项目请找到 `tsconfig.json` 添加以下设置:\n\n    ```json\n    {\n    \"compilerOptions\": {\n        \"baseUrl\": \".\",\n        \"paths\": {\n        \"@src/*\":[\"./src/*\"]\n        }\n    }\n    }\n    ```\n\n### 学习 react 语法\n\n进一步学习 [react 语法](https://github.com/PsChina/React/tree/master/demos#目录)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpschina%2Freact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpschina%2Freact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpschina%2Freact/lists"}