Поиск

Найдено 3 статьи по слову "react"

Не получается собрать React Native приложение под Android после обновления до x64

  1. Запускаем Android Studio.
  2. Ждем индексацию.
  3. Ставим выделение на Gradle Scripts.
  4. Выбираем в меню Refactor -> Migrate to AndroidX…
  5. Жмем кнопку Migrate.
  6. Сохраняем бекап-архив где-нибудь.
  7. Ждем выполнение операции миграции.
  8. Жмем Do Refactor.
  9. Ожидаем окончания.
  10. Пробуем собрать привычным способом.
react native

Ошибка при компиляции React Native приложения - clang: error: linker command failed with exit code 1 (use -v to see invocation)

Идем в Targets -> Цель для Tests

Меняем значение Host Application на основное целевое приложение.

Например

Приложение называется AwesomeApp. Цель соответственно, тоже называется AwesomeApp.

Идем в цель AwesomeAppTests, на вкладке General выбираем Host Application как AwesomeApp.

xcode

Как подружить Django и React

Подготовка

<span>1.</span> Создание нового проекта Django

$ django-admin startproject app
$ cd app
$ virtualenv -p python3.6 venv
$ source venv/bin/activate
$ pip install django
$ python manage.py migrate

<span>2.</span> Создание React-приложения

$ mkdir frontend
$ cd frontend
$ npm init -y

Дружим

<span>3.</span> Измените содержимое ключа scripts в файле frontend/package.json

"scripts": {
  "build": "webpack --config webpack.config.js --progress --colors",
  "watch": "webpack --config webpack.config.js --watch --mode development"
},

<span>4.</span> Установите необходимые библиотеки

$ npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react webpack webpack-bundle-tracker webpack-cli clean-webpack-plugin @babel/core @babel/preset-env @babel/preset-react
$ npm install --save react react-dom

<span>5.</span> Создайте файл frontend/webpack.config.js

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  context: __dirname,

  entry: './src/index',

  output: {
      path: path.resolve('./build/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new CleanWebpackPlugin(),
    new BundleTracker({filename: './webpack-stats.json'}),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

<span>6.</span> Создайте файл frontend/.babelrc со следующим содержимым

{
    "presets": ["@babel/preset-env", "@babel/react"]
}

<span>7.</span> Создайте индексный файл для реакта frontend/src/index.js

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


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="world" />;
ReactDOM.render(
  element,
  document.getElementById('react')
);

<span>8.</span> Установить модуль django-webpack-loader в Django

pip install django-webpack-loader

<span>9.</span> Добавить его в INSTALLED_APPS и настроить

INSTALLED_APPS = (
    # ...
    'webpack_loader',
)

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'build/',  # это префикс для урла - /media/build/
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),  # путь до файла webpack-stats.json
    }
}

<span>10.</span> Создать индексный файл в темплейтах Django

{% load render_bundle from webpack_loader %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
    </head>
    <body>
        <div id="react"></div>
        {% render_bundle 'main' %}
    </body>
</html>

Разработка

Запустить React

cd frontend && npm run watch

И запустить Django

source venv/bin/activate && python manage.py runserver

Внести изменения, сохранить файлы в реакте, перейти на необходимую страницу и перезагрузить (хот-релоада нет).

<hr />

Источник, переведенный и дополненный (исправлены ошибки): https://medium.com/uva-mobile-devhub/set-up-react-in-your-django-project-with-webpack-4fe1f8455396

django react