入門React到React Native APP

時間  2019-11-11
標籤 入門 react native app 欄目 React 简体版
原文   原文鏈接

入門級 （Mac）

1、React開發工程化（使用 Webpack 4 和 Babel 7 從頭開始建立 React 應用程序）

  • 配置 Webpackcss

  • 配置 React 和 Babelhtml

  • 配置 webpack-dev-servernode

  • 配置 CSSreact

配置 Webpack

1.建立一個新項目並進入：webpack

mkdir react_project && cd react_project

2.建立 package.json 文件ios

npm init -y

3.安裝 webpack 和 webpack-cli 做爲 dev 依賴項git

npm i webpack@4 webpack-cli@3 -D

  • i：installgithub

  • -D：- save-devweb

注：在 webpack 3 中，webpack 和它的 CLI 都是在同一個包中，但在第4版中，他們已經將二者分開來更好地管理它們。因此安裝時，最好是 webpack 和 webpack-cli 同時安裝npm

4.更新 package.json 文件

{
  "name": "react_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  }
}

 

 

配置 React 和 Babel

1.安裝 react 和 react-dom 做爲依賴

npm i react@16 react-dom@16 -S

  • -S： -- save 

2.安裝 babel-loader，@babel/core，@babel/preset-env，@babel/preset-react 做爲 dev 依賴項 

npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime -D

  • babel-loader：使用 Babel 轉換 JavaScript依賴關係的 Webpack 加載器

  • @babel/core：即 babel-core，將 ES6 代碼轉換爲 ES5

  • @babel/preset-env：即 babel-preset-env，根據您要支持的瀏覽器，決定使用哪些 transformations / plugins 和 polyfills，例如爲舊瀏覽器提供現代瀏覽器的新特性

  • @babel/preset-react：即 babel-preset-react，針對全部 React 插件的 Babel 預設，例如將 JSX 轉換爲函數

  • @babel/plugin-transform-runtime會爲代碼建立一個沙盒環境，爲core-js這裏內建的實例提供假名，你能夠無縫的使用這些新特性，而不須要使用require polyfill。

**注：babel 7 使用了 @babel 命名空間來區分官方包，所以之前的官方包 babel-xxx 改爲了 @babel/xxx

3.建立 webpack.config.js 和 .babelrc 文件，並配置 babel-loader 及 babel 選項

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

 

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
        "@babel/plugin-transform-runtime"
  ]
}

4.在 src 目錄下建立 index.js 文件渲染組件

import React from 'react';
import ReactDOM from 'react-dom';

const Index = () => {
  return <div>Hello React!</div>;
};

ReactDOM.render(<Index />, document.getElementById('index'));

5.在 src 目錄下建立 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React、Webpack4 and Babel 7</title>
</head>
<body>
  <section id="index"></section>
</body>
</html>

6.安裝 html-webpack-plugin 做爲 dev 依賴項，並配置 webpack.config.js

npm i html-webpack-plugin -D
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    })
  ]
};

這個插件會將 js 代碼經過 <script> 注入到 HTML 文件中

7.執行 npm run start，生成 dist

 

配置 webpack-dev-server

1.安裝 webpack-dev-server 做爲 dev 依賴項

npm i webpack-dev-server -D

2.更新 package.json 的 start 腳本

{
  "name": "react_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  }
}

 3.執行 npm run start，瀏覽器自動打開 localhost:8080 頁面

 

配置 CSS

1.安裝 css-loader 和 style-loader 做爲 dev 依賴項

npm i css-loader style-loader -D

2.配置 webpack.config.js 處理 css

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    })
  ]
};

注：加載器的順序很重要。首先，咱們須要 css-loader 解析 css 文件（將相似 @import 和 url（...）的方法實現 require 的功能），而後使用 style-loader 將樣式添加到 DOM。默認狀況下，webpack 使用從右邊(數組中的最後一個元素)到左邊(數組中的第一個元素)執行加載器。

3.使用 CSS 模塊化

CSS 模塊化將類名的做用域能夠僅針對相關組件

...
module.exports = {
  module: {
    rules: [
      ...
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]_[local]_[hash:base64]',
              sourceMap: true,
              minimize: true
            }
          }
        ]
      }
    ]
  },
  ...
};

要啓用 CSS 模塊化，咱們須要設置 css-loader 的 module 選項爲 true。importLoaders 選項表示在 css-loader 以前應用多少個加載器。例如，sass-loader 必須先於 css-loader 出現。localIdentName 容許配置生成的標識：

  • [name]：css 文件名稱

  • [local]：類/id 的名稱

  • [hash:base64]：隨機生成的 hash，它在每一個組件的 CSS 中都是惟一的

 

 

參考：一 https://imweb.io/topic/5b8699a96a0f1b02454de3c0

 

2、React Native

搭建開發環境 （https://reactnative.cn/docs/getting-started.html）

因爲一直遇到 Error building: 'React/RCTBridgeDelegate.h' file not found;  （參考：https://github.com/getsentry/sentry-react-native/issues/395）

最後降級方案：react-native init MyApp --version 0.44.3

react-native run-ios --simulator "iPhone 8 Plus"

 

問題1：報錯EACCES: permission denied, open 'Users/你的用戶名/.babel.json'

sudo chown 你的用戶名 ~/.babel.json

參考：https://www.jianshu.com/p/fa0c19a31656

問題2：遇到

Watchman error: query failed: synchronization failed: Permission denied. Make sure watchman is running for this project. See https://facebook.github.io/watchman/docs/troubleshooting.html.
Error: ;Watchman error: query failed: synchronization failed: Permission denied.

 sudo chmod 777 Awesome

方法來自 https://stackoverflow.com/questions/37370949/react-native-failed-to-build-dependencygraph-watchman-error

問題3: 沒法在ios模擬器顯示app

可能項目權限問題：項目右擊->顯示簡介->共享與權限：+上你當前用戶

直接用Xcode導入項目文件夾，而後點啓動按鈕（左上角相似播放按鈕）

或試試： sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

再 sudo react-native run-ios --simulator "iPhone 6s"

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程