I mainly use the back-end Java language and am also interested in the front-end react. As a novice, I failed to learn the front-end of the system. Therefore, this article can only record some scattered steps of the react process for reference.
React reactjs.org/docs/gettin…
0. Create -react-app Creates a project
For example, create-react-app accdemotest npm&yarn& reactJS and create-react-app can install and set up my first HelloWord project according to nPM&yarn & Reactjs
1. The configuration is displayed
After the create-react-app project is created, the default configuration is less. Use YARN eject or NPM run eject to eject the configuration. After the configuration is successfully executed, the config and scripts folders are added.
npm run eject
Copy the code2. Add a routing module
yarn add react-router-dom
Website document address: https://reactrouter.com/web/guides/quick-start
3. Modify the WebPack configuration so that the imported module supports SRC
When importing a component, you need to set the SRC parameter to webpack.config.js if you want to specify the SRC directory in the project. Otherwise, an error will be reported.
## Add to webpack.config.js'src': path.resolve(__dirname,'.. /src'),
Copy the code
Note: If you do not add the configuration, the compilation will report an error, as followsAdd configuration after editing no longer have a problem.
4. How do I change the default react access port 3000
After yarn Start is started, the default access port number is 3000. If you want to change the port number, use the configuration attribute in start.js to change the port number. If start.js is not found, use NPM run eject to pop up the configuration first and then operate again.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
5. The difference between export and export default
Both export and export default can be used to export constants, functions, files, modules, etc. ## In a file or module, there can be more than export and import, export default has only one ## Export by export, when importing, add {}, Export default is not required
For example, there is no export default:
import React, { Component } from 'react';
export class Welcome extends Component {
render() {
return <h1>hello, {this.props.name}</h1>; }}Copy the codeWritten above, there is no default, when introduced into the import Welcome the from ‘SRC/components/Welcome. Js’ complains, can only be written as:
import {Welcome} from 'src/components/Welcome.js'
Copy the codeFor example, export default is used to write:
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>hello, {this.props.name}</h1>; }}export default Welcome
Copy the codeThe above method and through the export default exposure, when introduced into the import Welcome the from ‘SRC/components/Welcome. Js, compilation is normal, and can literally change when introducing name, as follows, Change the component’s name to something like Welcometest.
import { Component } from 'react';
import Welcometest from 'src/components/Welcome.js'
class App extends Component {
render() {
return (
<div>
<Welcometest name="john"/> </div> ); }}export default App;
Copy the code6. Use dangerouslySetInnerHTML in React
By default, string content with HTML tags will retain the original tag style and will not be displayed correctly. If you need to use THE HTML tag to render the effect, you can use dangerouslySetInnerHTML, example code is as follows:
import { Component } from 'react';
class App extends Component {
render() {
let htmlStr = "span content test> ";
return( <div> <div>{htmlStr}</div> <div dangerouslySetInnerHTML={{__html:htmlStr}} /> </div> ); }}export default App;
Copy the codeDangerouslySetInnerHTML after the corresponding style display: dangerouslySetInnerHTML
7. The react – native – use uuid
- # # the installation install
NPM install react-native UUID or yarn add react-native UUID
- ##Create a UUID
import uuid from 'react-native-uuid';
uuid.v4(); / / ⇨ 'b777b6-2746-410 - c - 64 ae07 - fe599bbef0f6'
Copy the code8. Package yarn and deploy it to the production environment.
Collect YARN Build and Nginx and deploy front-end code in the production environment as follows:
- # # packaging,
After the package is complete, the build folder will be added to the source directory, which is the packaged deployment folder
yarn build
Copy the code- ## Deploy to nginx
Put it in a directory and then use the nginx proxy to get it out. Example nginx configuration:To restart nginxhttp://ip:8443/Access.
server {
listen 8443;
server_name localhost;
location / {
root /home/testuser/fe/build;
proxy_connect_timeout 30;
proxy_http_version 1.1;
proxy_send_timeout 60;
proxy_read_timeout 60;
try_files $uri $uri/ /index.html = 404; }}Copy the code9. History. push(Jump to another page)
A way to jump to another page, using history.push and passing it as a parameter that can be accessed directly on another page
## redirects the page to pass parameters through ##this.props.history.push({pathname:'/detail',datas:{tmpAuthCode: 'xxxxxxxx', clientType: "dingTalkScanningCode"}}); ## Do not pass parametersthis.props.history.push('/detail'); After going to the jump page, you want to receive the parameter: console.log(this.props.location.datas);
Copy the code10. React: Four ways to solve this pointing problem
- Use bind to bind this after the event
run(){
alert("The first way!)
}
<button onClick={this.run.bind(this</button>Copy the code- The ## constructor internally declares this to point to
constructor(props) {
super(props);
this.state={
/ / data
}
this.run = this.run.bind(this);
}
run(){
alert("the second method！")
}
<button onClick={this.run}>the second method</button>
Copy the code- Declare an event equal to an arrow function
run = ()=> {
alert("The third way!)
}
<button onClick={this.run}> </button>Copy the code- ## Interline define events using arrow functions
run(){
alert("The fourth way!)
}
<button onClick={()=>this.run()> </button>Copy the codeI prefer the third one
11. Fix vscode overwriting old files when clicking on new files
The workbench. Editor. EnablePreview set to false
"workbench.editor.enablePreview": false.Copy the code
12. Lodash Library
Lodash is a set of libraries that encapsulate functions for handling common data types such as strings, arrays, and objects. Website address: https://www.lodashjs.com/
Example: turn a string into an array and check if there is any in the data
.indexOf(.split(localStorage.roleIds, ‘,’), record.id+” ) == -1
13.Js automatic login example (plain javascript)
<! DOCTYPE html> <html> <body> <form action="http://116.11.11.114:8180/hpflow/Home/Login" id="frm" method="post" style="display: none;">
First name:<br>
<input type="text" name="account" value="user">
<br>
Last name:<br>
<input type="text" name="pwd" value="123456">
<br><br>
<input id="submit" type="submit" value="Submit">
</form>
</body>
<script>
document.getElementById("submit").click();
</script>
</html>
Copy the code14. Sample writing of function components
Achieved a button authority control component, through the introduction of a unique button code, through the back-end program to control the authorization of the button, the front end through the interface query whether the current user has the authority of the button, to display or not display.
import React, { Fragment } from "react";
import api from "src/api";
import axios from 'axios';
import { message } from 'antd';
import { useEffect, useState } from 'react';
/*** * passes a buttonUniqueCode argument to determine whether to display the childRen of the component, mainly used for permission button control */
export const AuthShow = props => {
const [show, setShow] = useState(false);
// Get button permission data and set it to the show variable
const getButtonAuthData = () => {
api.sysButton.checkCurrentUserButtonAuthByCode({
data: {
buttonUniqueCode: props.buttonUniqueCode,
},
})
.then(res => res.data)
.then(json => {
if (json.success) {
setShow(json.data);
} else{ message.error(json.message); }}).catch(err => console.error(err));
};
useEffect(() => {
getButtonAuthData();
},[]);
returnshow ! =true ? (
<Fragment></Fragment>
): (
<Fragment>
{props.children}
</Fragment>
)
};
Copy the codeUseEffect () => {getButtonAuthData(); } []); The array of parameters in this position is a dependency of function execution. The empty array is executed only once during rendering. If there is no dependency, it will be executed every time the component is re-renderedCopy the codeUse reference controls where button controls are needed, such as:
<AuthShow buttonUniqueCode='useManageInsert'>
<Button onClick={() => showModal('mail')}>
<Icon type="folder-add"</Button> </AuthShow>Copy the codeOther react knowledge points will be recorded and updated at.....