Cmd команды linux react js

Обновлено: 07.01.2025

ReactJS был разработан компанией Facebook в 2011 году и очень быстро обрел свою популярность из-за его гибкости и простоты. Что и сделало React востребованным при разработке мобильных и веб-приложений. Его использую такие гиганты как Facebook , Instagram , Netflix , Airbnb и Twitter. Так же используют React и более 90 000 сайтов в сети интернет.

В этой статье вы узнаете, как установить ReactJS на Ubuntu 20.04 и Ubuntu 18.04.

Шаг 1: Установка NPM в Ubuntu

Мы начинаем установку React JS с установки npm – это сокращение от node package manager. Первое node package manager это инструмент командной строки, используемый для взаимодействия с пакетами Javascript, который позволяет пользователям устанавливать, обновлять и управлять инструментами и библиотеками Javascript.

Чтобы установить npm на Ubuntu Linux, войдите на свой сервер как пользователь sudo и вызовите следующую команду:

После завершения установки вы можете проверить версию установленного npm с помощью команды:

Во время установки npm также устанавливается и node.js, вы можете проверить версию с помощью команды:

Шаг 2: Установка утилиты create-react-app

Чтобы установить инструмент, выполните следующую команду npm:

$ sudo npm -g install create-react-app

Эта команда установит Create React App Tool

После установки вы можете проверить версию программы, введя команду в терминале:

Шаг 3: Создайте И Запустите Свое Первое Приложение в React

После того как нам удало установить React, пришло время создать приложение в ReactJS. Скажу честно, дело это довольно простое. Сейчас мы расскажем как создать React приложение под названием setiwik-app. Делается это следующим образом.

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

Создать Приложение React

Если создание приложения прошло успешно, вы получите уведомление ниже с указанием основных команд, которые вы можете запустить, чтобы начать управлять приложением.

Краткое описание приложения React

Чтобы запустить приложение, перейдите в каталог приложений

Затем выполните команду:

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

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

Доступ к приложению ReactJS в браузере

Это показывает, что приложение React по умолчанию запущено и работает.

Вот и все, в этом руководстве мы успешно установили React JS и создали приложение в React.

Сразу скажу, что сайт будет быстрее работать, если заменить Bootstrap на чистый CSS и JS. Эта статья про то, как быстро начать разрабатывать красивые web-приложения, а оптимизация это уже отдельный вопрос, выходящий за пределы этой статьи.

Для начала надо хотя бы немного разбираться в HTML, CSS, JavaScript, XML, DOM, ООП и уметь работать в терминале (командной строке).

В этой статье сделаю выжимку минимально необходимого для работы и сделаем такой таймер:

Установка

Через терминал проверяем, что Node.js и npm успешно установились:

Если при выводе возникнут ошибки – значит что-то прошло не так и надо разбираться, и возможно переустанавливать их. Если же выведется v c цифрами и точками – то всё хорошо.

Установим Create-react-app, чтобы потом можно было быстро создавать каркасы приложений:

Далее создаём каркас приложения на React. Назовём наше приложение new-app. Если хотите создать приложение папке отличной от пользовательской папки – то сначала через терминал перейдите в неё с помощью команды cd. Итак, в терминале достаточно ввести 3 команды:

Терминал должен остаться открытым, без него не будет открываться страница приложения. Если вдруг закрыли – не беда. Достаточно с помощью команды cd перейти в папку приложения и запустить его командой npm start

Теперь установим Bootstrap

Так же советуют установить к нему зависимости jquery и popper.js, но они нужны только для JS-части Bootstrap. Попробовал без них — CSS-часть Bootstrap нормально работает, так что следующие строки в терминале не обязательны:

Далее надо внести изменения в файлы приложения, для этого переходим в папку new-app, где находится приложение в файл src/index.js добавляем строку, она должна быть первой:

Если будете использовать jQuery, popper.js или JS-часть Bootstrap (модальные окна, анимации и т.д), то потребуется под первой строкой добавить ещё 3 строки:

Теперь осталось запустить проект:

JSX, компоненты и свойства

Давайте посмотрим, что нам сгенерировал create-react-app — исходные файлы лежат в каталоге src. Во-первых, посмотрим файл index.js – там несколько строчек импорта. По строчкам понятно, что они делают, так что не буду комментировать.

Самая важная строка в этом файле:

В ней рисуется страница приложения. В исходном HTML-файле находится элемент <div> с В этом <div> выводится компонент App, который рисуется функцией render класса ReactDOM. При этом компонент рисуется в форме, похожей на XML, которая и называется JSX (о котором позже).

JSX очень похож на HTML, при этом есть вставки JS-кода в фигурных скобках <>. И обязательно должен быть один корневой элемент, в данном случае <div>.

Чтобы лучше разобраться – сотрём весь код метода render(), и напишем простейший компонент:

А теперь вернёмся в файл index.js и исправим

После сохранения файлов – в браузере обновится страница. А теперь будем разбираться.

Концептуально, компоненты подобны JavaScript-функциям. Они принимают произвольные данные (называемые props) и возвращают React-элементы, описывающие что должно появиться на экране. Компоненты позволяют разделить UI на независимые, переиспользуемые части и работать с каждой из них отдельно.

Когда React видит, что элемент представляет собой пользовательский компонент, он передает все JSX-атрибуты в этот компонент единым объектом. Такой объект называется props.

В примере параметр name передаётся в компонент как атрибут тега <App> со значением «Мир». Далее в методе render() класса App в качестве результата функции внутри JSX, который фактически является HTML-шаблоном – в фигурных скобках <> указывается this – текущий класс, props – пользовательский объект, name – название параметра объекта.

Конструктор, жизненный цикл и изменение состояния

Помимо параметров, хранящихся в props можно хранить состояние объекта в state.

Сделаем таймер. Для таймера не нужны параметры, поэтому уберём параметры в index.js:

А теперь в файле App.js заменим весь текст между import и export:

После вставки и сохранения этого кода на странице появится и автоматически запустится таймер.

Давайте разбирать этот код. До класса объявили константу, благодаря которой можно регулировать частоту обновления таймера.

Далее внутри класса идёт обязательный конструктор класса, в который передаётся props. Далее стандартная обработка конструктора родительского класса super(props) и определение состояния value через this – текущий объект. Это единственное место, где можно напрямую установить состояние. В остальных местах доступно только чтение, либо установка состояния специальным методом setState(), который используется в следующем методе increment() для увеличения состояния value на единицу.

В приложениях с множеством компонентов очень важно высвобождать ресурсы, занятые компонентами, когда они уничтожаются. Нам необходимо устанавливать таймер каждый раз, когда DOM отрисовывается в первый раз. В React это называется «монтированием/монтажом». Также нам нужно очищать этот таймер, каждый раз когда DOM, созданный компонентом, удаляется. В React это называется «демонтированием/демонтажём».

Для этого и используются методы componentDidMount() и componentWillUnmount(). В документации эти методы носят название «lifecycle hooks». Мы же будем для простоты называть их методами жизненного цикла. Метод componentDidMount() срабатывает после того, как компонент был отрисован в DOM. Это хорошее место, чтобы установить таймер. Очищать таймер будем в методе componentWillUnmount() жизненного цикла.

Обратите внимание, как мы в componentDidMount() сохраняем ID таймера прямо в this используя стрелочную функцию. В то время как this.props самостоятельно устанавливаются React-ом и this.state имеет определенное значение, вы свободно можете добавить дополнительные поля в класс вручную, если вам необходимо хранить что-нибудь, что не используется для визуального вывода. Если вы не используете что-то в render(), оно не должно находиться в состоянии state.

Далее на время выполнения render() в локальной константе value фиксируется значение состояния value. И далее с помощью математической функции floor(), которая округляет число в меньшую сторону, деления(/) и получение остатка от деления(%) получаем части таймера, которые далее выводим в одну строку после слова Таймер. Можно посмотреть результаты нашей работы.

Оформление с помощью Bootstrap

Не удобно, что таймер работает сразу при обновлении страницы. Хотелось бы, чтобы он запускался и останавливался при нажатии на соответствующие кнопки. А ещё хотелось бы, чтобы он был в центре и крупный.

Начнём с оформления. Для этого в файл App.css добавим следующие строки:

Благодаря встроенному в Bootstrap адаптивно-резиновому контейнеру container-fluid, который помогает создать полностью гибкий макет страницы или некоторого блока. Данный контейнер имеет 100% ширину. Сделаем контейнер flex, с направлением выстраивания элементов по вертикали – чтобы он занял всё пространство и его можно было выровнять по центру.

Теперь доработаем метод render() в App.js, чтобы применить стили Bootstrap и добавить пару кнопок. Для этого заменим возвращаемое методом значение на следующее:

В первой строке к корневому <div> добавили 2 класса Bootstrap: container-fluid(о котором писал выше) и align-items-center – который как раз и выравнивает элементы контейнера по центру.

Далее два <div> с классом display-1 – этот класс как раз для показа крупного текста.

Далее на цифры добавил новый тег <kbd> — который обычно используется для подсветки клавиш, которые нужно нажать. В данном случае он отлично подходит для контраста показываемых цифр.

В последней цифре, показывающей части секунды добавлено условное выражение, позволяющее для однозначных цифр (<10) выводить в начале 0, и не выводить его для двухзначных чисел. Это нужно, чтобы цифры каждую секунду не дёргались. Для этого используем тернарный оператор JavaScript: условие? true: false

Далее в отдельном <div> поместил 2 кнопки с классом Display-4 – этот класс подобрал, как наиболее подходящий по размеру, чтобы кнопки соответствовали размеру таймера. Между кнопками вставил символ — неразрывный пробел, чтобы кнопки не сливались.

Можно запустить, но кнопки пока не работают. Научим кнопки работать.

Обработка событий

Для начала добавим в код вывода кнопок вызов соответствующих функций:

Обратите внимание, что в React обработчик события onClick, а не onclick, как в JavaScript и вызываемая функция указывается в фигурных скобках без круглых скобок и с указанием объекта, из которого вызывается метод, в данном случае это this.

Теперь определим указанные методы stopTimer() и resetTimer():

Но этого ещё недостаточно и если оставить так, то при нажатии кнопки будет появляться ошибка, т.к. this при вызове функции будет undefined. Это возникает из-за того, что в JavaScript, методы класса не привязаны по умолчанию. Как правило, если вы ссылаетесь на метод без () после него, например, onClick= , вам необходимо привязать этот метод.

Привяжем методы в конструкторе класса, добавив туда 2 строчки:

Отлично, заработало! Вот только кнопкой остановки можно воспользоваться только 1 раз, и после этого кнопки перестают работать. И это логично, ведь вызвав stopTimer() мы отключили регулярный вызов функций, вызвав clearInterval().

В комментариях посоветовали использовать стрелочные функции. Попробовал, это работает. Так что можно можно не добавлять 2 строки в конструктор, а сами функции заменить следующими стрелочными функциями:

Чтобы решить это – сделаем, чтобы кнопка «Остановить» работала ещё и как «Запустить».

Для начала добавим в конструктор булево состояние stopped, чтобы понимать, в каком режиме работает кнопка:

Теперь полностью заменяем содержимое метода stopTimer():

В начале метода меняем состояние stopped на противоположное через setState().

Далее, если таймер должен быть остановлен (т.е. stopped = true) – то отключаем регулярный вызов функций через clearInterval(), а если таймер должен быть запущен (т.е. stopped = false), то запускаем регулярный вызов функций аналогично методу componentDidMount().

И напоследок меняем название кнопки в зависимости от состояния stopped, вставив вместо «Остановить» следующее:

Теперь у нас получился красивый, удобный таймер.

Вместо заключения или вишенка на торте

Напоследок хотелось бы изменить стандартные заголовок и иконку окна на наши.

Изменить заголовок можно установив document.title в методе componentDidMount(), но мы пойдём дальше и сделаем, чтобы в заголовке страницы отображалось время с точностью до секунд, для этого добавим установку document.title в специальный метод componentDidUpdate():

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

С иконкой всё просто. Достаточно подготовить картинку в формате jpg, bmp, gif, png, закинуть в папку public (а не src, в которой мы в основном работали), назвав, например favicon.jpg и поменять в файле public\index.html строку:

На сегодня это всё, что я хотел рассказать. В следующей статье подробнее расскажу про Bootstrap, которого в этой статье лишь слегка коснулся. Кроме Bootstrap остались ещё важные темы: списки, таблицы, формы и мышление в стиле React.

Terminal in React

A component that renders a terminal

Table of contents

or if you use yarn

This package also depends on react so make sure you've already installed it.

Be careful when copying this example because it uses window object ( 'open-google': () => window.open("https://www.google.com/", "_blank"), ) which is only available on the client-side and it will give you an error if you're doing server side rendering.

Adding commands ✍️

To add your own command, use prop commands which accepts an object. This objects then maps command name -> command function .

Let's take an example. You want to open a website with a command open-google

Adding description of your command 💁🏼‍♂️

Add a description of your command using prop description .

You can have the terminal watch console.log/info function and print out. It does so by default.

You can have the terminal pass out the cmd that was input

Async handling of commands 😎

you can also handle the result with a callback

Minimise, maximise and close the window

Hide the default options

This will hide the option color, show and clear.

You can give your commands options and get them back parsed to the method. Using this method will also give your command a build in help output. With the option -h or --help .

The command API has three parameters arguments , print , and runCommand .

arguments will be an array of the input split on spaces or and object with parameters meeting the options given as well as a _ option with any strings given after the options.
print is a method to write a new line to the terminals output. Any string returned as a result of a command will also be printed.
runCommand is a method to call other commands it takes a string and will attempt to run the command given

Let's take an another example -

We have also developed a plugin system for the <Terminal /> component which helps you develop custom plugins. Here is one example of plugin which creates a fake file system called terminal-in-react-pseudo-file-system-plugin.

Instantiating the plugin

or if the plugin requires config

Awesome! Right? Let us know if you make something interesting 😃

: A client-side only filesystem : used with a filesystem to evaluate js code : used with a filesystem to edit the contents of files more easily

Multiline input 🤹🏼‍♀️

via shift + enter

Check history of your commands 🖱️

using arrow down and up keys

You can define keyboard shortcuts. They have to be grouped by os. The three available are win , darwin , and linux . You can group multiple os by a , for example if the shortcut was for all platforms win,darwin,linux would be fine as a key

But you might want to specific

You can mix and match

The value of the shortcut should be a command to run.

Override the top bar buttons actionHandlers

Use the prop actionHandlers .

The object allows for 3 methods handleClose , handleMaximise , handleMinimise ;

Each one is a function and will pass in the default method as the first param. Any method not passed in will use the default.

prop color to change the color of the text.
prop outputColor to change the color of the output text defaults to color prop.
prop backgroundColor to change the background.
prop barColor to change the color of bar.
prop prompt to change the prompt ( > ) color.
prop showActions to change if the three circles are shown.
prop hideTopBar to hide the top bar altogether.
prop allowTabs to allow multiple tabs.

component props

Props	Type	Default
color	string	'green'
outputColor	string	props.color
backgroundColor	string	'black'
prompt	string	'green'
barColor	string	'black'
description	object	<>
commands	object
msg	string	-
closedTitle	string	OOPS! You closed the window.
closedMessage	string	Click on the icon to reopen.
watchConsoleLogging	bool	false
commandPassThrough	function	null
promptSymbol	string	>
plugins	array	[ < name: '', load: new Plugin(), commands: <>descriptions: <> > ]
startState	string ['open', 'maximised', 'minimised', 'closed']	'open'
showActions	bool	true
hideTopBar	bool	false
allowTabs	bool	true
actionHandlers	object	-

clear - Clears the screen
help - List all the commands
show - Shows a msg if any
echo - Display the input message
edit-line - Edits the last line or a given line using the -l argument

Embed it as a toy on your website
For showcasing
Explain any of your projects using this terminal component
or just play with it

You want a X feature

Sure! Check our todolist or create an issue.

Build errors when using with create-react-app

Eject from create-react-app and use a custom webpack configuration with babili-webpack-plugin . Read more about this here.

4,359 2 2 gold badges 28 28 silver badges 43 43 bronze badges

21 Answers 21

4,553 1 1 gold badge 30 30 silver badges 53 53 bronze badges

You can edit your package.json scripts section to read:

Just a sidenote, for me, making this change breaks hot reloading for some reason.

-- Note: OS === Windows 10 64-Bit

4,660 2 2 gold badges 25 25 silver badges 39 39 bronze badges

You can also create a file called .env in the root of your project, then write

After that, just run "npm start" as you usually do to start your app.

Works both on Linux and Windows, unlike some other answers posted here.

1,595 1 1 gold badge 14 14 silver badges 18 18 bronze badges This was also the only solution that worked for me. Thanks :)

In Case of MAC/UNIX do

Or simple one liner

Or update start script in package.json to

"start": "export HTTPS=true&&PORT=3000 react-scripts start",

3,786 1 1 gold badge 28 28 silver badges 45 45 bronze badges

(Note: the lack of whitespace is intentional.)

Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.

To avoid doing it each time: You can include in the npm start script like so:

35k 12 12 gold badges 169 169 silver badges 126 126 bronze badges Whitespace turned out to be the issue for me. running on MINGW64.

"scripts" in package.json:

(Note: the lack of whitespace is intentional.)

2,853 1 1 gold badge 21 21 silver badges 38 38 bronze badges

467 1 1 gold badge 5 5 silver badges 15 15 bronze badges

Please use this in command prompt

if it's still not working properly because of "your connection is not private" issues (in chrome), this worked for me just fine:

You can also add a hosts file entry and access it by dns name like a production app to get around that issue

might need to Install self-signed CA chain on both server and browser. Difference between self-signed CA and self-signed certificate

1,356 1 1 gold badge 9 9 silver badges 7 7 bronze badges

Create a key and cert.

openssl req -nodes -new -x509 -keyout server.key -out server.cert

Create a file named proxyServer.js

From the terminal run

I`m using Windows 10 and I had the same issue. I realized that you need to:

You can also put this code into your package.json file under the scripts section like this:

Bonus: If you want to change the PORT use this command insted:

Obs.: Pay attention to the blank spaces NOT left in between some characters.

Читайте также: