САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

React подготовка к работе



Чтобы использовать React на производстве, нужен NPM и Node.js

Чтобы получить общее представление о том, что такое React, вы можете написать код React непосредственно в HTML.

Но для того, чтобы использовать React в производстве, вам нужно установить NPM и Node.JS.


React непосредственно в HTML

Самый быстрый способ начать обучение React, чтобы писать React непосредственно на HTML файлы.

Начните с включения трех скриптов, первые два позволяют нам писать код React в ваших Java скрипты, а третий, Babel, позволяет нам писать синтаксис JSX и ES6 в старых браузерах.

Вы узнаете об этом больше React JSX глава.

Пример

Включите три скрипта в свой HTML файл:

<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <body>
  
    <div id="mydiv"></div>

    <script type="text/babel">
      class Hello extends React.Component {
        render() {
          return <h1>Hello World!</h1>
        }
      }
    </script>

  </body>
</html>

Попробуйте сами »

Этот способ использования React может быть приемлемым для целей тестирования, но для производства вам нужно будет настроить React окружающую среду.


Настройка окружающей среды React

Если у вас есть NPM и Node.js, вы можете создать приложение React, предварительно установив create-react-app.

Если вы уже создали create-react-app, вы можете пропустить этот раздел.

Установить create-react-app с помощью следующей команды в вашем терминале:

C:\Users\Your Name>npm install -g create-react-app

Тогда вы можете создать приложение React, давайте создадим его под названием myfirstreact.

Выполните эту команду, чтобы создать приложение React с именем myfirstreact:

C:\Users\Your Name>npx create-react-app myfirstreact

Создать create-react-app настроит все, что нужно, чтобы запустить приложение React.


Запустите приложение React

Теперь вы готовы запустить свое первое реальное React приложение!

Выполните эту команду, чтобы перейти к следующему шагу myfirstreact директории:

C:\Users\Your Name>cd myfirstreact

Выполните эту команду для запуска приложения React myfirstreact:

C:\Users\Your Name\myfirstreact>npm start

Новое окно браузера появится вместе с вашим недавно созданным приложением React! Если нет, откройте браузер и введите текст localhost:3000 в адресной строке.

Результат:



Изменить приложение React

Пока все хорошо, но как я могу изменить содержание?

Смотреть в директорию myfirstreact, и вы найдете папку src. Внутри папки src, есть такой файл называется App.js, откройте его и он будет выглядеть так:

/myfirstreact/src/App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Попробуйте изменить содержимое HTML и сохраните файл.

Обратите внимание, что изменения видны сразу после сохранения файла, вам не нужно перезагружать браузер!

Пример

Замените все содержимое внутри устройства <div className="App"> в элементе <h1>.

Смотрите изменения в браузере, когда вы нажимаете кнопку "Сохранить".

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello World!</h1>
      </div>
    );
  }
}

export default App;

Обратите внимание, что мы удалили импорт, который нам не нужен (logo.svg и App.css).

Результат:


Что дальше?

Теперь у вас есть среда React на вашем компьютере, и вы готовы узнать больше о React.

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

Если вы хотите выполнить те же действия на своем компьютере, начните с удаления папки src, чтобы она содержала только два файла: index.js и index.html, вы также должны удалить все ненужные строки кода внутри двух файлов, чтобы они выглядели как файлы в инструменте Show React ниже:

Пример

Нажмите на кнопку "Выполнить пример", чтобы увидеть результат.

index.js:

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

const myfirstelement = <h1>Hello React!</h1>

ReactDOM.render(myfirstelement, document.getElementById('root'));

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Выполнить пример »