React JS для начинающих: Установка среды

В этом уроке мы покажем вам, как создать среду для успешной разработки на React. Обратите внимание, что данный урок состоит из множества шагов, но в последующем, это поможет вам ускорить процесс разработки. Для работы нам понадобится NodeJS, если он еще у вас не установлен, перейдите к уроку по установке Node JS.

react установка

React JS для начинающих:

Шаг 1 - Установка глобальных пакетов

Для начала необходимо установить несколько важных пакетов. Нам потребуется плагин Babel, поэтому начнем с него, запустите командную строку и введите следующие команды:

C:\Users\username>npm install -g babel
C:\Users\username>npm install -g babel-cli

Шаг 2 - Создание корневой папки

Корневую папку назовем reactApp и разместим её на рабочем столе. После того, как папка будет создана, мы должны открыть её и создать пустой файл package.json, после чего запустить из командной строки инициализацию npm, следуйте инструкциям ниже:

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop\reactApp>npm init

Шаг 3 - Добавление зависимостей и плагинов

В наших уроках, мы будем использовать webpack bundler, так что давайте установим webpack и webpack-dev-server.

C:\Users\username>npm install webpack --save
C:\Users\username>npm install webpack-dev-server --save

Так как мы будем работать с React JS, нам нужно установить его в первую очередь. Команда --save добавит необходимые пакеты в файл package.json.

C:\Users\username\Desktop\reactApp>npm install react --save
C:\Users\username\Desktop\reactApp>npm install react-dom --save

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

C:\Users\username\Desktop\reactApp>npm install babel-core
C:\Users\username\Desktop\reactApp>npm install babel-loader
C:\Users\username\Desktop\reactApp>npm install babel-preset-react
C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015

Шаг 4 - Создание файлов

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

C:\Users\username\Desktop\reactApp>touch index.html
C:\Users\username\Desktop\reactApp>touch App.jsx
C:\Users\username\Desktop\reactApp>touch main.js
C:\Users\username\Desktop\reactApp>touch webpack.config.js

Шаг 5 - Установка компилятора, сервера и загрузчиков

Откройте файл webpack-config.js и добавьте в него код ниже. Мы инициализируем файл настройки webpack - main.js. Далее задаем местоположение выходного файла и его название. Также устанавливаем сервер для разработки, с портом 8080. Вы можете выбрать любой порт, на свое усмотрение. Настраиваем загрузчики babel для поиска js файлов, с использованием es2015 и настройки react которые мы установили ранее.

webpack.config.js

var config = {
   entry: './main.js',
    
   output: {
      path:'./',
      filename: 'index.js',
   },
    
   devServer: {
      inline: true,
      port: 8080
   },
    
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
                
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

Откройте файл package.json и удалите строку "test" "echo \"Error: no test specified\" && exit 1" внутри объекта "scripts". Мы удаляем эту строку, так как в наших уроках мы не будем заниматься тестированием. Вместо этого добавим команду start:

"start": "webpack-dev-server --hot"

Теперь мы можем использовать команду npm start для запуска сервера. Команда --hot добавит автматическую перезагрузку страниц, после любых изменений в файлах, для того чтобы не обновлять каждый раз браузер, после изменения кода.

Шаг 6 - index.html

Ниже представлена стандартная HTML разметка. Создадим контейнер (div) с идентификатором app в качестве корневого элемента для нашего приложения и добавим файл основного скрипта index.js.

Шаг 7 - app.jsx и main.js

Поздравляю, наступил момент создать ваш первый React компонент. Мы расскажем все о React компонентах в одном из следующих уроков. Давайте выведем стандартный Hello World!!!.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         
Hello World!!!
); } } export default App;

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

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

При использовании нового компонента, в первую очередь его нужно импортировать (import. Если вы хотите использовать данный компонент в других частях приложения, необходимо экспортировать (export) его после создания и импортировать его в файл, в котором вы хотите его использовать.

Шаг 8 - Запуск сервера

Установка завершена и мы можем запустить сервер, выполнив команду:

C:\Users\username\Desktop\reactApp>npm start

Далее на экране появиться ваш порт, нам нужно открыть его в браузере, в нашем случае это http://localhost:7777/. Если вы все сделали правильно, у вас должен получится такой результат:

react привет мир

Перевод статьи: ReactJS - Environment Setup

Тэги: node.jsreact.jsbabelnpm

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.