<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Создание каркаса React приложения

Создание каркаса React приложения

Изменения в JavaScript, произошедшие последнее время поистине колоссальны. NodeJS, npm, тысячи пакетов на все случаи жизни, сбивает с толку. Один только React чего стоит - создание каркаса React приложения, как правило, выполняется командой create-react-app, которая тащит за собой десятки зависимостей и весит чуть ли не под 100МБ. Конечно, новичку, который решил решил осваивать разработку на React, а React - это популярная библиотека для построения интерфейсов, все эти излишества не нужны - они запутывают и мешают сконцентрироваться на основном.

Поэтому в данной статье, я хотел бы, показать вам макет React приложения, которое вы можете развернуть у себя на ПК буквально в течении 15 минут и приступить к разработке.

Итак, структура папок следующая (все файлы лежат в отдельной папке react-env-setup):

C:.
│   package.json
│   webpack.config.js

└───src
    │   index.html
    │   index.js
    │
    └───components
            App.js

Файл package.json содержит все, что необходимо для создания React приложения. Для того, чтобы все зависимости перечисленные в нем установились, необходимо выполнить команду:

npm install

Вот содержимое файла package.json:

{
  "name": "react-env-setup",
  "version": "1.0.0",
  "description": "Базовый шаблон для начала работы с React, только то, что нужно и ничего лишнего!",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"                           
  },
  "author": "Kiazim Khutaba",
  "license": "MIT",
  "dependencies": {        
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {  
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }
}

Файл webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',                // точка входа в приложение
    output: {
        path: path.join(__dirname,'/dist'), // папка в которой будут создаваться конечные файлы приложения
        filename: 'react_app.js'            // названием JS файла
    },
    module: {
        rules: [
            {
                test: /\.js$/,             // если файл имеет расширение js, то обрабатываем его
                exclude: /node_modules/,   // но папку node_modules не трогаем, так как там ничего нам преобразовывать не нужно
                use: {
                    loader: 'babel-loader', // необходим для преобразования JS файлов из нового стандарта в старый
                    options: {
                      presets: ['@babel/preset-env','@babel/preset-react']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html' // этот плагин автоматом создаст index.html c подключенным index_bundle
        })
    ]
}

Этот файл содержит настройки для системы сборки Webpack, наиболее важные моменты уточнены комментариями.

Папка 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 приложение</title>
</head>
<body>
    <!-- контейнер, в котором будет размещено React приложение -->
    <div id="app"></div>
</body>
</html>

, а также файл index.js:

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App';



ReactDom.render(<App />, document.getElementById("app"))

В подпапке components содержатся непосредственно сами файлы React компонентов:

// файл App.js

import React from 'react';


class App extends React.Component {
    
    render() {
        return (
            <div>
                <h1>Пример React приложения!!</h1>
            </div>
        );
    }
}

export default App;

Для создания каркаса React приложения просто создайте подобную структуру папок и файлов и скопируйте в них указный мною выше код. Далее в папке, где лежит package.json запустите команду

npm install

она установит необходимые зависимости. А следующей командой запустите

npm start

, которая запустит сервер разработки и откроет браузер. В дальнейшем, когда вы будете вносить изменения в файлы компонентов, например, эти изменения будут отражаться у вас сразу в браузере.

Вот так просто (относительно просто), можно создать окружение для разработки React приложений.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.