你所知道的一些事情,你可能不知道的一些事情
Create react App是搭建React项目的快速方法。这样我们可以重点放在代码上,而不是构建工具上。
这个神奇的命令可以通过以下三种方式之一调用:
npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app
Facebook保证其所有基础组件(webpack,babel,ESLint,Jest等)可以无缝地协同工作。
开箱即用,将设置以下脚本:
npm start: 在开发模式下运行该应用程序,然后打开 http://localhost:3000 在浏览器中查看它。
npm run build: 将用于生产的应用程序构建到build文件夹,该版本已精简并准备部署。
npm test: 以交互方式运行测试观察程序。它运行与自上次提交以来更改的文件相关的测试。
前面的命令可以用一个特定的模板定制:
npx create-react-app my-app --template [template-name]
npm init react-app my-app --template [template-name]
yarn create react-app my-app --template [template-name]
如果你想从TypeScript的React项目开始,只需使用模板 cra-template-typescript。默认模板为 cra-template。
如果您想利用社区资源,请访问此网站,当前有170个模板。
一个依赖关系是三个Create React App哲学中的第一个。你可以在以下 package.json 中找到此构建依赖项吗?
{
"name": "my-react-app",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
在 package.json 中,有三个依赖项,没有 devDependencies,这个依赖在哪里?
它是react-scripts!
根据NPM依赖项定义,构建依赖项,即react-scripts,应该是一个devDependency。然儿,它与 react 和react-dom 一起在依赖项部分中。
实际上,react-scripts 是 devDependency。由于某些实际原因,Facebook自从react-scripts 1.0.8起就将其作为依赖项。
Create React App为开发和生产构建都设置了合理的配置。开发人员可以专注于编写代码,可以不进行任何配置。
下面是开箱即用的源代码目录树。我们实际上找到了一个配置文件 .gitignore,它用于github的源代码版本控制。
my-react-app/
node_modules/
public/
favicon.ico
index.html
logo192.png
logo512.png
manifest.json
robots.txt
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
.gitignore
package-lock.json
package.json
README.md
Jest是Create React App的默认测试运行程序。默认情况下,Jest在__tests__ 文件夹,.test.js 文件或 .spec.js 文件的 .js 文件中运行所有测试用例。
这是来自Create React App的 App.test.js。该测试用例使用相对路径:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
如果将App更改为使用绝对路径,如下所示,此测试用例将中断:
import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
可以通过添加 modulePaths 选项来修复它:
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --modulePaths=src",
"eject": "react-scripts eject"
},
}
如果您使用react-app-rewired,还可以通过配置config-overrides.js来修复它:
module.exports = {
jest: config => {
config.moduleNameMapper = {
'^@(.*)$': '<rootDir>/src$1'
};
return config;
},
};
你是否遇到以下错误?
Fetch api cannot load http://myhost.com:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
当API使用与Web服务器不同的主机或端口时,此错误将阻止您的应用程序运行。
通过在 package.json 中添加代理配置,Create React App提供了解决此问题的方法:
{
“proxy”: “http://myhost.com:4000",
}
此代理选项支持HTTP,HTTPS和WebSocket连接。
如果有多个API服务器怎么办?
替代解决方案需要安装 http-proxy-middlewar:
npm install --save http-proxy-middleware
另外,在根目录中创建并配置 src/setProxy.js。以下是 src/setProxy.js 的示例。对 /api1/x 的调用将转发到 http://myhost1:4000/api1/x,而对 /api2/y 的调用将转发到 http://myhost2:5000/api1/y。
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api1',
proxy({
target: 'http://myhost1:4000',
changeOrigin: true,
})
);
app.use(
'/api2',
proxy({
target: 'http://myhost2:5000',
changeOrigin: true,
})
);
};
开箱即用,可以在 package.json 中看到以下浏览器列表。
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
此配置控制Babel如何将JavaScript转换为与指定的浏览器兼容,以进行生产和开发。查看https://browserl.ist以获取有...。
对于Create React App的默认浏览器列表配置,生产代码的目标是92%的浏览器
对于Create React App的默认浏览器列表配置,开发代码的目标是26%的浏览器
Create React App隐藏了很多细节和复杂性。生成最终bundle包后,您是否有兴趣分析其空间使用情况?
source-map-explorer 使您能够通过源映射分析和调试空间使用情况。安装source-map-explorer:
npm install --save source-map-explorer
添加分析脚本:
{
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "react-scriptsd build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
}
生成并运行分析命令:
npm run build
npm run analyze
然后,bundle的使用情况将显示在默认浏览器中
本文首发于微信公众号《前端外文精选》
如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。
受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。
一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。
Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件
React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。
React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大
这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state
react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)
React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!