入门React到React Native APP

原创
2019/07/11 14:43
阅读数 141

入门级 (Mac)

一、React开发工程化(使用 Webpack 4 和 Babel 7 从头开始创建 React 应用程序)

  • 配置 Webpack

  • 配置 React 和 Babel

  • 配置 webpack-dev-server

  • 配置 CSS

配置 Webpack

1.创建一个新项目并进入:

mkdir react_project && cd react_project

2.创建 package.json 文件

npm init -y

3.安装 webpack 和 webpack-cli 作为 dev 依赖项

npm i webpack@4 webpack-cli@3 -D
  • i:install

  • -D:- save-dev

注:在 webpack 3 中,webpack 和它的 CLI 都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。所以安装时,最好是 webpack 和 webpack-cli 同时安装

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 选项为 trueimportLoaders 选项表示在 css-loader 之前应用多少个加载器。例如,sass-loader 必须先于 css-loader 出现。localIdentName 允许配置生成的标识:

  • [name]:css 文件名称

  • [local]:类/id 的名称

  • [hash:base64]:随机生成的 hash,它在每个组件的 CSS 中都是唯一的

 

 

参考:一 https://imweb.io/topic/5b8699a96a0f1b02454de3c0

react Hooks 文章: https://segmentfault.com/a/1190000017182184

SSR文章:https://segmentfault.com/a/1190000016722457

二、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"

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部