React.js 14 Інструменти та ресурси для веб-розробників

The популярність React.js був стрімко зростає з тих пір, як Facebook вперше випустив бібліотеку ще в 2013 році п'ятий найбільш часто знятий проект з відкритим кодом на Github, і оголошення про роботу розробників React також сильно піднімаються. Реакція полегшений фреймворк JavaScript для створення інтерфейсів користувача - найбільш помітними прикладами є Facebook і Instagram.

Реакція пропонує альтернатива для MVC фреймворків, такі як Angular або Backbone, з a більш простою структурою і зосередитися на оптимізації продуктивності. Оскільки React обов'язково визначатиме ландшафт веб-розробки в найближчі роки, у цій статті ми хотіли б надати вам a інструментарій для розробників щоб допомогти вам ступити в область розвитку React.

Офіційні документи React.js від Facebook

Facebook надає розробникам докладну документацію на Основні поняття React. Крім документів, ви також можете знайти тут великий підручник як побудувати інтерактивну гру Tic-Tac-Toe з React і a дискусійний форум для розробників React. Як Документи з відкритим кодом, ви навіть можете редагувати їх, якщо хочете.

React.js Github repo

У Repo Github repo ви можете перевірте вихідний код React всякий раз, коли вам це потрібно. Якщо ви хочете бути в курсі поточного стану розробки, ви також можете подивитися на питань, віхи, і останніх запитів на потяг. Якщо ви застрягли, це також може бути гарною ідеєю для вивчення Посібник із зйомки проблем трохи.

Hello World стартовий код

Якщо ви хочете швидко спробувати реагувати, ви можете почати з цього “Привіт Світ” інтерактивна демонстрація на Codepen. Це включає всі необхідні активи і стартовий код так само. Як Babel також включений, ви можете використовувати як ECMAScript 6, так і синтаксис JSX. Просто розщедрийте цю ручку, і ви можете піти вперед, не маючи налаштування всього оточення самостійно.

Реалізуйте стартовий комплект

The Реалізуйте стартовий комплект є ізоморфний шаблон веб-додатків побудований з Node.js, Express, GraphQL, React, і невеликі інструменти веб-розробки, такі як Webpack, Babel, і Browsersync. Він надає вам той же інтерфейс стека Facebook використовує і дозволяє стрибати Повноцінний розвиток реагування без зайвих зусиль.

ReactCSS

ReactCSS дозволяє додайте вбудовані стилі CSS у JavaScript. ReactCSS постачається з підтримкою React, Redux, React Native (фреймворк для створення власних мобільних додатків, що використовують React), автоматичне виправлення, наведення, псевдоелементи та медіазапити. Ви можете швидко встановіть його за допомогою npm.

Реалізація інтеграції JSFiddle (з і без JSX)

Це велике онлайн майданчик якщо ви хочете місце, де ви можете почати практикувати реагування. Його розміщено на JSFiddle, і має дві версії: один з JSX і один без JSX, вибирайте будь-який, з яким вам більше подобається.

Реагуйте генератор напрямних стилів

Ви можете швидко генерувати стильний посібник для вашого проекту React за допомогою цієї простої у використанні Реагуйте генератор напрямних стилів. Ви тільки повинні додайте трохи документації до ваших файлів, а генератор піклується про решту. Інструмент постачається з детальним файлом readme.

Налаштовувані компоненти реагують

Belle є Реагуйте бібліотеку компонентів що вас змушує набір компонентів React Ви можете використовувати у своєму проекті, наприклад, “Кнопка”, “Картка”, “Spinner”, “Переключити”, “Рейтинг”, компоненти різних форм та інші. Компоненти працюють як на мобільному, так і на робочому столі, і вони є настроюється так само.

Belle є не єдина бібліотека компонентів React там, ви можете знайти інші великі на Github, наприклад Реагуйте віджети або Elemental.

Реагування середовища розробки користувальницького інтерфейсу книг зі змінами

Якщо ви не хочете використовувати чужу бібліотеку компонентів, але хочете побудувати свій власний, варто спробувати Реалізуйте книгу яка є Середовище розробки інтерфейсу для компонентів React. Книга оповідань дозволяє інтерактивно розвивати компоненти. Вона має розробити документацію, і ви можете приступити до розробки в Концентратор Storybook.

React-Bootstrap

React-Bootstrap інтегрує React з популярним Фронтенд рамки Bootstrap 3. Його розробники в основному перебудовували компоненти Bootstrap з React.js. Це призводить до a чистіша база коду з меншим повторенням і a більш висока продуктивність.

Зауважимо, що в міру активної розробки репо в майбутньому зміниться API. Для сучасний стан розвитку, перевірте дорожню карту проекту.

Реалізуйте інструменти розробника для Chrome

Реагуйте DevTools для Chrome є розширенням інструментів розробника Chrome і дозволяє вам перевіряти ієрархію компонентів. Це було створено Facebook з метою допомогти спільноті розробників у створенні нових програм React. Можна просто додайте його як розширення Chrome у веб-переглядачі. Ви можете переглядати що належать вихідному коду також на Github.

Реалізуйте інструменти розробника для Firefox

Це Версія Firefox того ж Реалізуйте засоби розробника, створені Facebook. Просто додайте його як додаток до вашого браузера Firefox, і одразу почніть перевіряти дерево ієрархії вашої програми React.

Пакет React.js для Atom

Можна додати Реагуйте на підтримку редактора коду Atom з цим пакетом реагування Atom. Він поставляється з підсвічування синтаксису, автозаповнення, фрагменти коду, перетворення HTML на JSX, і деякі інші корисні функції, які можуть значно полегшити розвиток реагування.

React.js Fundamentals - безкоштовний онлайн курс

Є багато відмінних і досить недорогі курси, де ви можете навчитися реагувати на розвиток, проте ви можете зареєструвати це Основи React.js онлайн курс для абсолютно безкоштовно. Він складається з 12 уроків, починається з основи реагування, і має a хороший навчальний план що охоплює всі важливі речі.