老舊專案改造使用react 普通頁面使用react.js和sass

阿新 • • 發佈：2020-12-25

react參考：https://www.cnblogs.com/lyraLee/p/11885487.html
sass參考：https://www.cnblogs.com/wuqilang/p/13371176.html（vscode安裝live sass compiler和live server）

直接在頁面中使用react.js

專案結構
html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset=" 
UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 載入 React。-->
    <!-- 注意: 部署時，將 "development.js" 替換為 "production.min.js"。-->
    <script src="./js/react.development.js" 
 crossorigin></script>
    <script src="./js/react-dom.development.js" crossorigin></script>
    <script src="./js/babel.min.js"></script>
    <!-- 編譯好的style.css -->
    <link rel="stylesheet" href="style.css">
</head> 


<body>
    <div>參看：https://www.cnblogs.com/lyraLee/p/11885487.html</div>
    <div id="like_button_container"></div>

    <div id="root"></div>

    <!-- 載入我們的 React 元件。-->
    <script src="like_button.js"></script>
    <script type="text/babel">
        //有狀態元件
        class MButton extends React.Component {
            constructor(props) {
                super(props)
                this.state = { liked: false }
            }
            render() {
                if (this.state.liked) {
                    return "you liked";
                }
                return (
                    <div>
                        <h5 style={{ color: 'red' }}>Hello, {this.props.name}</h5>
                        {/**<button onClick={this.setState({like:true})}>like</button>**/}
                        <button onClick={() => this.setState({ liked: true })}>Like</button>
                    </div>
                );
            }
        }
        //無狀態元件
        function Welcome(props) {
            return <h5>Hello, {props.name}</h5>;
        }


        //組合
        function PostHeader(props) {
            return <h3 className={'title'}>{props.title}</h3>
        }
        function PostBody(props) {
            return (
                <div>
                    <p className={'content'}>{props.content}</p>
                </div>
            )
        }
        class Post extends React.Component {
            constructor(props) {
                super(props)
                this.state = {}
            }
            render() {
                return (
                    <div>
                        <PostHeader title={this.props.post.title} />
                        <PostBody content={this.props.post.content} />
                    </div>
                )
            }
        }
    </script>
    <script type="text/babel">
        const posts = [
            { id: 1, title: 'post1', content: 'content1' },
            { id: 2, title: 'post2', content: 'content2' },
            { id: 3, title: 'post3', content: 'content3' },
            { id: 4, title: 'post4', content: 'content4' },
            { id: 5, title: 'post5', content: 'content5' },
        ]
        ReactDOM.render(
            (<div>
                <h5>home</h5>
                <MButton name='La❤' />
                <Welcome name='Ali' />
                {/**單個演示**/}
                <Post post={posts[0]} />

                {/**列表演示**/}
                {posts.map(item => {
                    return <Post post={item} key={item.id}/>
                })}

            </div>),
            document.getElementById('root')
        );

    </script>
</body>

</html>

//like_button.js
'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

scss

div{
    .title{
        color:red
    }
    .content{
        color:peru;
    }
}

老舊專案改造使用react 普通頁面使用react.js和sass

技術標籤：js/jquery學習經驗html學習經驗react react參考：https://www.cnblogs.com/lyraLee/p/11885487.html sass參考：https://www.cnblogs.com/wuqilang/p/13371176.html（vscode安裝live sass compiler和l

【javascript】使用react或者vue簡易注入老舊專案

技術標籤：javascript 前言由於有些老舊專案是使用layui或者jquery那種html伺服器渲染那種，所以有時候你需要使用你自己擅長的框架進行修改，否則就只能和它一樣寫layui那玩意。

基於智慧路燈杆的老舊小區改造方案

方案背景：城鎮老舊社群，一般是指建成時間較長、市政配套設施老化問題突出、公共服務缺項較多的住宅社群和小區。老舊社群改造作為新型城鎮化的重要內容，不僅事關民生福祉，也是推動城市治理體系建設的重要驅動力。

用腳手架 create-react-app 搭建 react 專案及各種元件庫的安裝

配置及安裝方式： 1.搭建react：npxcreate-react-appmy-app（my-app自己起的檔名，如果一直安裝失敗，試著清一下快取：npmcacheclean--force）

React 跨頁面保留前一頁狀態的一種實現方法

功能需求：React單頁應用的時候，使用者開啟A頁面，然後操作了A頁面相關功能，比如在table裡面進行了篩選，選中了幾個選項。然後點選檢視詳情跳轉到B頁面，這時候A頁面選中的幾個選項往往會丟失，這時候需要怎樣做才

關於Webpack5 搭建 React 多頁面應用介紹

react-multi-page-app 是一個基於 webpack5 搭建的 react 多頁面應用。為什麼搭建多頁面應用：

論與Vue近似等價的React專案架構與配置（React專案優化更多/附帶模板）

技術標籤：Webreactjsvuewebpackreact-app 前言之前在 Vue 建立新專案（使用 vue-cli 4 腳手架）後，介紹過更多的優化方案：

搭建react專案，react+antd按需載入和less配置

全域性安裝create-react-app npm install -g create-react-app 建立專案 yarn create react-app react-antd-demo

生成web_分分鐘生成一個全棧 Web 專案（Go，Angular/React/Vue）

技術標籤：生成web 關注公眾號 “轉角遇到GitHub” ，每天推薦給你優秀開源專案

react 獲取頁面寬度_【譯】用 React 和 D3 建立圖表

技術標籤：react 獲取頁面寬度本文翻譯自：https://dzone.com/articles/charts-with-modern-react-and-d3

react 多頁面跳轉_使用React-Router實現前端路由鑑權

技術標籤：react 多頁面跳轉 React-Router是React生態裡面很重要的一環，現在React的單頁應用的路由基本都是前端自己管理的，而不像以前是後端路由，React管理路由的庫常用的就是就是React-Router。本文想寫一下

react實現頁面水印效果的全過程

目錄前言1.使用示例2.實現過程3.元件程式碼總結前言 1.為什麼選用svg 而不是cavans？

React vscode 建立 react 專案流程

一、安裝node 請在官網下載安裝：https://nodejs.org/zh-cn/ vscode 中點選 (ctrl + `) 調出終端

在react中使用highlight.js將頁面上的程式碼高亮的方法

通過 highlight. 庫實現對文章正文 HTML 中的程式碼元素自動新增語法高亮，highlight.js官方文件

如何在vue專案中嵌入jsp頁面的方法(2種)

今日一個專案中一塊功能模組是其他系統使用jsp已經開發好的頁面，想著直接將其嵌入到當前的vue專案中節約開發成本；但是發現並非想象的那麼簡單

Android Studio 3.1.3升級至3.6.1後舊專案的相容操作方法

因為gradle大幅升級至5,as gradleplugin升級至3.6,導致一些舊的專案基本重新編譯時會出現各種錯誤,經過各種嘗試後,得出一個付出成本最低,又能相容舊專案的解決方法:

Django學習筆記：第十天專案AXF-02使用者頁面

使用者啟用，認證 -- 途徑　　-- 郵件　　-- 簡訊　　-- 人工稽核 -- 郵件　　-- 傳送郵件

tailwindcss+react實現css in js

css in js的好處多多，這裡就不多說了，直奔主題。這裡使用tailwindcss+react實現了在react元件內完成html+js+css的開發。tailwindcss是在class內編寫原子化css程式碼，使得元件內的css程式碼較少，且不會與其它css衝

更新到androidstudio4.0.1後舊專案報錯

CONFIGURE SUCCESSFUL in 0s java.lang.NullPointerException in ToolingStreamApiUtils.writeFiles(ToolingStreamApiUtils.java:143)

Vue專案中重新整理當前頁面的方法

Vue專案中重新整理當前頁面的方法 JS 原生重新整理頁面方法：window.location.reload()

老舊專案改造使用react 普通頁面使用react.js和sass

直接在頁面中使用react.js

相關推薦