<p><a href="https://github.com/aoda-zhang"><img src="https://img.shields.io/badge/-github-%23333?style=for-the-badge&#x26;logo=github&#x26;logoColor=white&#x26;link=https://github.com/aoda-zhang" alt="Github"></a>
<a href="https://twitter.com/aoda2826"><img src="https://img.shields.io/badge/-Twitter-1DA1F2?style=for-the-badge&#x26;logo=twitter&#x26;logoColor=white&#x26;link=https://twitter.com/aoda2826" alt="Twitter"></a>
<a href="https://dev.to/aoda-zhang"><img src="https://img.shields.io/badge/-Dev.to-ffffff?style=for-the-badge&#x26;logo=dev.to&#x26;logoColor=0A0A0A" alt="Dev"></a>
<a href="https://stackoverflow.com/users/15841174/aoda"><img src="https://img.shields.io/badge/-stackoverflow-%23333?style=for-the-badge&#x26;logo=stackoverflow&#x26;logoColor=white" alt="stackoverflow"></a>
<a href="https://www.linkedin.com/in/aodazhang"><img src="https://img.shields.io/badge/-LinkedIn-0077B5?style=for-the-badge&#x26;logo=linkedin&#x26;logoColor=white&#x26;link=https://www.linkedin.com/in/aodazhang" alt="Linkedin"></a>
<a href="mailto:aodazhang666@gmail.com"><img src="https://img.shields.io/badge/-Email-%23333?style=for-the-badge&#x26;logo=gmail&#x26;logoColor=white" alt="Email"></a></p>
<h2>Skills</h2>
<p><strong>Stack</strong> : JavaScript, TypeScript, HTML, CSS ( Less,Scss ) , React,React-Native , Node.js ( Express,Nest ) , Next ,Vite</p>
<p><strong>Ability</strong> : Web &#x26; App develope, API Design ,Docker ,Technical Writing, Databases (MySQL,MongoDB), Version Control (Git), Testing (Unit, Component)</p>
<h2>Experience</h2>
<h3>Full-stack Software Engineer</h3>
<p>Manulife         August 2022 - now</p>
<p>As a member of the GWAM team, mainly responsible for maintaining and developing the fund trading platform in Southeast Asia.</p>
<ul>
<li>
<p>Responsible for the front-end and back-end system design and code development of important modules.</p>
</li>
<li>
<p>Responsible for monthly regression testing of invertor.</p>
</li>
<li>
<p>Summarize and write detailed business documents and present them to the marking team.</p>
</li>
<li>
<p>Support prod issue repair by emergency team.</p>
</li>
</ul>
<h3>Senior Frontend Software Engineer</h3>
<p>Newegg         June 2021 - August 2022</p>
<p>As a member of MKPL, mainly responsible for maintaining and developing Newegg’s merchant backend web site and mobile app (Newegg Seller) .</p>
<ul>
<li>
<p>Based on qiankun, responsible for completing the micro-front-end architecture transformation of the old business.</p>
</li>
<li>
<p>Lead the front-end engineering work of the react technology stack project team, including technology selection, directory structure formulation, development specifications, git submission specifications, UI interaction specifications, multi-language file specifications, etc.</p>
</li>
<li>
<p>Promote the development of monthly technical meetings of the front-end team.</p>
</li>
<li>
<p>Assist colleagues in other front-end technology stacks to carry out react-related work.</p>
</li>
<li>
<p>Lead react native optimization of mobile terminal development and testing process.</p>
</li>
</ul>
<h3>Frontend Software Engineer</h3>
<p>HuCai         September 2017 - April 2021</p>
<p>As a member of the technical department of HuCai, Responsible for maintaining and developing all programs of HuCai.</p>
<ul>
<li>
<p>Responsible for the front-end development and optimization of the company's PC and mobile terminals.</p>
</li>
<li>
<p>Communicate relevant product details with the product manager and optimize some business logic.</p>
</li>
<li>
<p>Analyze and provide optimal front-end solutions based on product requirements.</p>
</li>
<li>
<p>Serve as a front-end mentor and lead interns to complete part of the development work.</p>
</li>
</ul>


<h2>What is scss?</h2>
<p>As we all know, page style is controlled by CSS, scss is an extension of CSS and provides a more powerful future, such as functions, etc. Later we will use the function future.</p>
<h2>What is responsiveness</h2>
<p>Most of the time, our pages only run on one device, web, mobile or desktop, but what do we do if we want to run on two devices at the same time? Responsiveness means writing code to match different platforms</p>
<h2>What expectations do we have for CSS to meet our needs for developing responsive pages?</h2>
<p>Now , we have learned scss and responsive, let me think about what we want ?</p>
<ul>
<li>It should include all devices</li>
<li>It can render different contents on different devices by passing parameters</li>
</ul>
<p>let us get started!!</p>
<h2>1.first, create a scss file, for example , the name is responsive.scss, that will include our responsive function</h2>
<pre><code class="language-tsx">/* different media size */
$s: 375px;
$m: 768px;
$l: 1024px;
$xl: 1280px;

/* responsive function */

@mixin responsive($width-list) {
  @each $width in $width-list {
    @if $width == $s {
      // 320 ~ 767 mobile
      @media only screen and (max-width: ($m - 1px)) {
        @content;
      }
    } @else if $width == $m {
      // 768 ~ 1023 tablet ipad
      @media only screen and (min-width: $m) and (max-width: ($l - 1px)) {
        @content;
      }
    } @else if $width == $l {
      //  1024 - 1279 desktop
      @media only screen and (min-width: $l) and (max-width: ($xl - 1px)) {
        @content;
      }
    } @else {
      // > 1280 PC
      @media only screen and (min-width: $xl) {
        @content;
      }
    }
  }
}
</code></pre>
<h2>2. import this above scss file into your specific scss file</h2>
<h2>3. Use the scss responsive function to render different style</h2>
<p>For example, there has two div box, boxA,boxB, it should arrange vertically on mobile and horizontally on desktop.</p>
<pre><code class="language-tsx">// in react jsx file
import style from "./index.scss";
&#x3C;div className={style.box}>
  &#x3C;div className={style.boxA}>&#x3C;/div>
  &#x3C;div className={style.boxB}>&#x3C;/div>
&#x3C;/div>;
</code></pre>
<pre><code class="language-tsx">// index.scss
@import "./responsive.scss";
.box {
  display: flex;
  @include responsive(($s, $m)) {
    flex-direction: column;
  }
}
</code></pre>
<p>That is it, that is how to use scss to develop responsive pages .</p>


Most of the time, our pages only run on one device, web, mobile or desktop, but what do we do if we want to run on two devices at the same time? Responsiveness means writing code to match different platforms

How to use scss to develop responsive pages

<p>I know how you felt when you first saw this title, trust me, i know what were you thinking?</p>
<p>Are you joking? Use function?</p>
<p>That's too easy, right? const addition= () => {}
And then use it, just make it?</p>
<p>But, but, for beginners, I believe there will be some problems that you will meet</p>
<p><strong>Now,there is a requirement. Every time the number is clicked, the number will increase by 1.</strong></p>
<h2>Bad use case ❌</h2>
<h3>1.The addNum will not take effect, and also has this error message</h3>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/da4pgm9rync97l2l55c3.jpg" alt="Image description"></p>
<pre><code class="language-tsx">import React, { PureComponent } from "react";

export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      // Use addNum method directly
      &#x3C;div onClick={this.addNum}>
        &#x3C;div>add&#x3C;/div>
        &#x3C;div>{this.state.num}&#x3C;/div>
      &#x3C;/div>
    );
  }
}
</code></pre>
<h3>2.The page will crash when use this method</h3>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpy2gw34ju3d5tbbby5m.jpg" alt="Image description"></p>
<pre><code class="language-tsx">import React, { PureComponent } from "react";
export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      // Use addNum method directly
      &#x3C;div onClick={this.addNum()}>
        &#x3C;div>add&#x3C;/div>
        &#x3C;div>{this.state.num}&#x3C;/div>
      &#x3C;/div>
    );
  }
}
</code></pre>
<h2>Good use case ✔</h2>
<h3>1.Use arrow function calls</h3>
<pre><code class="language-tsx">import React, { PureComponent } from "react";

export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      &#x3C;div
        onClick={() => {
          this.addNum();
        }}
      >
        &#x3C;div>add&#x3C;/div>
        &#x3C;div>{this.state.num}&#x3C;/div>
      &#x3C;/div>
    );
  }
}
</code></pre>
<h3>2.Declare addNum method using arrow function</h3>
<pre><code class="language-tsx">import React, { PureComponent } from "react";
export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum = () => {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  };

  render() {
    return (
      &#x3C;div onClick={this.addNum}>
        &#x3C;div>add&#x3C;/div>
        &#x3C;div>{this.state.num}&#x3C;/div>
      &#x3C;/div>
    );
  }
}
</code></pre>
<h3>3.Bind this</h3>
<pre><code class="language-tsx">import React, { PureComponent } from "react";
export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
    this.addNum = this.addNum.bind(this);
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      &#x3C;div onClick={this.addNum}>
        &#x3C;div>add&#x3C;/div>
        &#x3C;div>{this.state.num}&#x3C;/div>
      &#x3C;/div>
    );
  }
}
</code></pre>
<p><strong>Or you can upgrade react version to 16.8, then use hooks 😂
Because we need to consider this pointer problem in class component, i hate this，that is a devil!!!!!</strong></p>
<p><strong>Then you never need to consider this when you use hooks function component ❤</strong></p>


This is no joke, this is a fact, most React beginners will face these methodological issues

How to use function in react class components?

<h1>Hi, I’m Aoda 👋</h1>
<p>🧑‍💻 Javascript Full-stack engineer at Manulife from China-mainland</p>
<p>🌐 Extensive development experience in multinational companies.</p>
<p>💼 6+ years development experience . especially for frontEnd.</p>
