{"id":18730185,"url":"https://github.com/lucaslz2020/react-examples","last_synced_at":"2026-04-30T22:38:00.754Z","repository":{"id":70157036,"uuid":"98005428","full_name":"lucaslz2020/react-examples","owner":"lucaslz2020","description":"react examples","archived":false,"fork":false,"pushed_at":"2017-07-23T15:31:23.000Z","size":112,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-19T21:12:57.595Z","etag":null,"topics":["react","react-router","redux","redux-thunk"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucaslz2020.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-22T03:55:56.000Z","updated_at":"2017-07-22T04:52:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"7da26b60-931f-47d9-9a5e-70db55bf9af8","html_url":"https://github.com/lucaslz2020/react-examples","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/lucaslz2020/react-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaslz2020%2Freact-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaslz2020%2Freact-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaslz2020%2Freact-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaslz2020%2Freact-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucaslz2020","download_url":"https://codeload.github.com/lucaslz2020/react-examples/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaslz2020%2Freact-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32479448,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","redux-thunk"],"created_at":"2024-11-07T14:38:00.176Z","updated_at":"2026-04-30T22:37:54.846Z","avatar_url":"https://github.com/lucaslz2020.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-examples\n\n## Environment\n- node v7.9.0\n- npm  v5.3.0\n\n### react react-dom\n安装 `react` `react-dom`。\n```\nnpm i react react-dom\n```\n### Babel\n使用Babel编译ES2016JSX。\n\n#### Require Hook\n`Require Hook` 在测试环境下编译Node.js\n 优势：是编译与运行合二为一。性能消耗较大。因此在生成环境需要编译后再运行。\n 原理：在require方法上加一个钩子。每次require加载JavaScript时会先用Babel进行编译，\n仅仅用于开发环境。\n```\nnpm i babel-register --save-dev\n```\n### ES2015 React 预设\n安装预设。也只是用于开发环境。\n```\nnpm i babel-preset-es2015 babel-preset-react --save-dev\n```\n添加预设配置文件.babelrc，激活ES2015、React\n\n### 在Node.js中运行react\n```\nnpm start\n```\n\n### webpack\n使用webpack打包编译\nES2015 JSX语法游览器不能完全支持。所以需要webpack进行编译。\nwebpack只是打包，需要通过babel-loader实现编译。\n\n#### 安装webpack babel-loader\n\n\n# 错误集\n## 需要使用具体的loaders。\n```\nERROR in Entry module not found: Error: Can't resolve 'babel' in '/Users/luzhao/git_react_native/react-examples'\nBREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.\n                 You need to specify 'babel-loader' instead of 'babel',\n                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed\n```\n把webpack下面的loader修改成具体的loaders: babel-loader\n\n### 在浏览器中运行react\n```\nnpm run build\n```\n编译后直接用浏览器打开`index.html`。\n\n## 设置开发编环境\n```\nnpm i babel-preset-react-hmre webpack-dev-middleware webpack-hot-middleware --save-dev\nnpm i express --save-dev\n```\n\n### react-hmre\n- 热替换\n- 错误捕捉\n\n1. 热替换\n    如果没有这个热替换，代码有变化就无法正确的重新载入react模块。\n2. 错误捕捉\n    可以将错误堆栈信息的红色警告页面输出到浏览器.\n    stateless function放在顶层，热替换会错误。也就没有了错误捕捉。\n    \n### 总结\n    使用开发服务器跟热替换需要Babel Webpack Express。\n    Babel在ES2015、React预设的基础上新增react-hmre预设\n    webpack 入口文件、输出配置以及插件使用。\n    Express 则使用中间件。\n    \n## 加入eslint\n安装eslint\n```\nnpm i -g eslint\n```\n为项目配置eslint\n```\nnpm i eslint --save-dev\neslint --init\n? How would you like to configure ESLint? Use a popular style guide\n? Which style guide do you want to follow? Google\n? What format do you want your config file to be in? YAML\n```\n然后就会自动安装配置依赖。\n\n```\n  4:1  error  Parsing error: The keyword 'import' is reserved\n```\n需要使用`import`插件\n```\nnpm i eslint-plugin-import --save-dev\n```\n\n```\nnpm i eslint eslint-loader babel-eslint eslint-plugin-react eslint-plugin-import eslint-config-google --save-dev\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucaslz2020%2Freact-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucaslz2020%2Freact-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucaslz2020%2Freact-examples/lists"}