NTIHS-club-110A5.md

tags
網頁設計社

網頁設計社 課前預習 DAY5 (110上)

[TOC]

講師:

• xiao xigua#8787

網頁前端框架 React

:::warning :loudspeaker: 以下都是會教的東西，那大家也可以先上網查，先預習，這樣對於之後教學時，可以更快的了解講師在講什麼。 :::

前端框架

React, Vue, Angular是前端三大框架
框架主要是簡化開發步驟加快開發速度的一個工具
那由於我只會React那就教Reactㄅ
亞州地區較為流行Vue但是我偏不要

前端三大框架範例

Vue

<template>
  <div id="app">
    Hello {{name}}
  </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {
            name: "Taylor"
        }
    }
};
</script>

<style>
</style>

如果有寫錯可以跟我講我很久沒寫ㄌ

React

function component example

function App(props) {
    return (
        <div>
            Hello {props.name}
        </div>
    );
}

ReactDOM.render(
  <App name="Taylor" />,
  document.getElementById('hello-example')
);

class component example

class App extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <App name="Taylor" />,
  document.getElementById('hello-example')
);

Angular

我不會也沒碰過所以就沒寫example搂呵呵

為什麼要用框架

• 更有邏輯的開發
• 增加開發效率
• 好維護
• 提升效能

以下用React 作範例

React 寫的話

Example 1

<iframe src="https://codesandbox.io/embed/great-wilson-fpmzw?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="great-wilson-fpmzw" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>

Example 2

<iframe src="https://codesandbox.io/embed/react-example-qqlis?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="react-example" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>

原生JavaScript寫的話

Example 1

<iframe src="https://codesandbox.io/embed/pedantic-voice-tvibq?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="pedantic-voice-tvibq" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>

Example 2

<iframe src="https://codesandbox.io/embed/laughing-butterfly-f6okz?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="laughing-butterfly-f6okz" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe> ---

以上範例可以發現使用框架會更直白

上課使用editor(編輯器)

codesandbox