особенность React курс



Дорога к изучению React
Обновлено: октябрь 2018 г. 🔥] Более 33 000 студентов изучали React по программе" Дорога к изучению React ". Курс объединяет все… www.educative.io





Основы JavaScript перед изучением React
После обширного обучения React (более 33 000 студентов), будь то онлайн для более широкой аудитории или на сайте для компаний… www. Educative.io



Несмотря на популярность React, настройка приложения для начала была сложной задачей. Чтобы бороться с этим, в Facebook появился create-react-app, который скрывал сложности и предоставлял конечному пользователю работающее приложение. Сегодня найдите время, чтобы понять всю сложность приложения easy response!

Самостоятельная настройка может показаться не очень практичным, и вам не следует этого делать во многих ситуациях. Однако может быть важно понять, что происходит внутри. В случае, если вам когда-нибудь не понравится шаблон create-react-app, создайте свой собственный шаблон и начинайте с него каждый проект реагирования.

Убедитесь, что вы установили:

  1. NodeJS
  2. npm
  3. Терминал
  4. текстовый редактор

Библиотеки, которые нужно настроить с нуля:

Мы будем использовать webpack и babel для настройки реакции, и я не хочу, чтобы вы запутались.

  1. Babel - это компилятор для JavaScript следующего поколения . Он компилирует новый JavaScript (ES6 / 7/8) в старый стандарт ES5, чтобы он работал в старых и новых браузерах.
  2. Webpack - это сборщик модулей. Мы будем использовать мульти-директорию и мультифайловый подход, чтобы упростить управление проектом. Webpack объединит все наши файлы в один, предлагая лучшую производительность и более простое управление зависимостями.

Настройка вращается вокруг этих инструментов, поэтому мы подробно рассмотрим настройку.

Приступим, запускаем мощный терминал!

mkdir react-from-scratchcd react-from-scratchnpm init -y

Это создает каталог react-from-scratch и инициализирует проект узла, флаг -y используется для пропуска всех вопросов с ответами по умолчанию.

Теперь, когда у нас есть каталог для хранения нашего проекта, приступим к установке.

npm установить React-DOM

View raw install-react.sh, размещенный с

от GitHub

Это установит react и react-dom.

В папке node_modules будут храниться все модули и их зависимости.

package.json содержит информацию об имени, зависимостях и других скриптах.

package-lock.json используется для обеспечения целостности зависимостей, на моем компьютере не работает нормально.

Что такоеreact и react-dom?

react - это библиотека, которая определяет компоненты представления, компоненты React.

react-dom - это библиотека, которая создает представление. react-dom эквивалентен веб-модели DOM. Он создает и отображает веб-страницу.

Разделение позволило использовать React на нескольких платформах с изменением только библиотеки рендеринга вместо react-dom. Рендеринг React Native для iOS и Android. ReactVR предназначен для устройств виртуальной реальности.

Инициализация сервера разработки Webpack

Теперь у нас есть способ создания и рендеринга компонентов React. Мы еще не отправили эти компоненты в браузер, чтобы показать их. Это то, для чего используется веб-сервер.

npm установить webpack webpack-dev-server webpack-cli - save-dev

Просмотреть сырые webpack-dev-server.sh, размещенные с

от GitHub

Флаг --save-dev сохраняет их как зависимости разработки. Они не будут частью финальной сборки, развернутой на сервере, они будут использоваться в процессе разработки. webpack-cli требуется для запуска проекта с терминала.

webpack необходимо установить, потому что webpack-dev-server зависит от этого. Этот dev-сервер перезагрузит наше приложение в реальном времени.

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

В корневом каталоге, который я назвал react-from-scratch, создайте новый файл index.html. Это будет основной файл, обслуживаемый браузером.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReactJS Sample Project</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
  • Компоненты реакции войдут в div с идентификатором root.
  • Скрипт bundle.js будет создан с использованием веб-пакета, который будет содержать весь наш код реакции, включая библиотеку реакции и средство визуализации, в надлежащем формате.

Создайте файл index.js со следующим кодом

import React from 'react';
import {render} from 'react-dom';
render(
  React.createElement("div", null, "Hello World"),
  document.getElementById("root")
);

React должен быть импортирован для приложения React. Метод render импортируется из react-dom с помощью деструктуризации.

render принимает два аргумента: первый - это компонент, а второй - местоположение.

React.CreateElement - это React API верхнего уровня. Он создает элементы, без использования JSX.

Поскольку без JSX это не очень практично, позже мы заменим его </App> компонентом.

import React from 'react'
import { render } from 'react-dom'
import App from './containers/App'
render(<App />, document.getElementById('root'))

document.getElementById("root") - это наше местонахождение на index.html.

Настройка сервера разработки Webpack

Мы установили webpack, но еще не использовали его.

Вернувшись в терминал,

webpack-dev-server правильно скомпилирует наш код и сервер на localhost:8080, чем не сможет найти ./src. Это потому, что webpack ожидает index.js в ./src/. Либо вы можете переместить index.js в src, либо изменить файл package.json, либо настроить файл входа в файле конфигурации webpack. Последний вариант является наиболее предпочтительным, и мы будем использовать его, не двигаясь.

mkdir webpackcd webpacktouch webpack.dev.config.js

Создайте каталог webpack с файлом webpack.dev.config.js.

Установите точку входа в webpack.dev.config.js

var webpack = require('webpack');
var path = require('path');
module.exports = {
	entry: [
		path.join(__dirname, '../index.js')
	]
}

Он использует webpack в качестве зависимости и устанавливает точку входа на index.js

Нам нужно загрузить модули, поэтому измените webpack.dev.config.js на

var webpack = require('webpack');
var path = require('path');
var parentDir = path.join(__dirname, '../');
module.exports = {
    entry: [
        path.join(parentDir, 'index.js')
    ],
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },{
                test: /\.less$/,
                loaders: ["style-loader", "css-loder", "less-loader"]
            }
        ]
    },
    output: {
        path: parentDir + '/dist',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: parentDir,
        historyApiFallback: true
    }
}

Он содержит набор правил:

Точка входа

index.js - это отправная точка для всех скриптов.

Пакеты

  • babel-loader для загрузки файлов jsx.
  • less-loader для загрузки меньшего количества файлов
  • less-loader требует less как одноранговую зависимость.

Установите все зависимости и одноранговые зависимости с помощью:

npm install --save-dev style-loader css-loader less-loader less

Вывод

Объединенный файл называется bundle.js и содержится в каталоге dist.

Сервер разработки

Текущий каталог используется как базовый каталог и.

Настройка babel

Нам нужен babel для преобразования кода ES6 в ES5.

Установите babel и вспомогательные библиотеки с помощью

npm install --save-dev babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-register

Настройте приложение React для использования babel в package.json.

"babel": {
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-object-rest-spread"]
}

Он также использует плагин для поддержки оператора rest / spread.

Внесите изменения в index.js, используйте компонент App вместо создания элементов вручную.

Это наш новый index.js

import React from 'react'
import { render } from 'react-dom'
import App from './containers/App'
render(<App />, document.getElementById('root'))

Создайте файл ./containers/App.js для обслуживания приложения

mkdir containerscd containerstouch App.js

Теперь заполните App.js базовым кодом React.

import React, {Component} from 'react';
class App extends Component {
    render () {
        return <p>Hello from the App!</p>
    }
}
export default App

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

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"
}

npm run dev запустит webpack-dev-сервер из узловых модулей с файлом конфигурации из ./webpack/webpack.dev.config.js.

Вот что я получаю

npm run dev

Если вы получили предупреждение, добавьте режим в конфигурационный файл webpack, чтобы удалить его.

Проверьте закомментированный код mode: 'production', выше. Другие режимы - 'develpment' и 'none'.

Порт по умолчанию - 8080.

Настройте конфигурацию по своему усмотрению и наслаждайтесь настройкой.

Избранные курсы React JS

React 16 - Полное руководство (включая React Router 4 и Redux)

4,7 / 5 звезд || 33,5 часа видео || 61597 студентов

Изучите React или погрузитесь в него глубже. Изучите теорию, решайте задания, практикуйтесь в демонстрационных проектах и ​​создайте одно большое приложение, которое улучшается на протяжении всего курса: The Burger Builder! Подробнее



React 16 - Полное руководство (включая React Router 4 и Redux)
Погрузитесь и изучите React с нуля! Изучите Reactjs, Redux, React Routing, Animations, основы Next.js и многое другое! thebestdevlist.link



Заключительные примечания:

Если этот пост был полезен, пожалуйста, нажмите несколько раз кнопку хлопка 👏 ниже, чтобы выразить свою поддержку! ⬇⬇

Эта история опубликована в The Startup, крупнейшем предпринимательском издании Medium, за которым следят +405 714 человек.

Подпишитесь, чтобы получать наши главные новости здесь.