Запуск Hello world приложения на ReactJS стал легче

ReactJS, как мне кажется, самый простой фреймворк и самый элегантный из ныне существующих в JS. И все потому, что в нем нет своего синтаксиса, а есть просто javascript в html. Плюс элементарное создание новых тэгов-компонент делает его очень мощным.

Например, создадим функциональную компоненту (еще можно с помощью классов):

const Page = (p_) => {
    return (
        <div>
            {p_.title}

            {<div>DOM элемент</div>}

            {(() => {
                return (
                    <div>Еще один элемент</div>
                )
            })()}
        </div>
    );
};

export default Page;

*В reactJS окружении использование синтаксиса ES6 уже давно считается нормой.

Мы просто создаем функцию, возвращающую один DOM элемент (DOM элемент в JSX синтаксисе тоже является javascript объектом).

Так вот, прелесть reactJS в следующем: чтобы наполнить html динамикой, мы просто пишем фигурные скобки, а внутрь этих скобок добавляем любой, абсолютно любой javascript объект, будь то строка, DOM элемент или самовызывающаяся функция, возвращающая объект.

ReactJS — это просто javascript внутри HTML.

Пример использования написанной выше компоненты:

import Page from 'app/blocks/page/page';

const App = (p_) => {
    return (
        <div>
            <Page
                title="Hello world"
            />
        </div>
    );
};

export default App;

Такое простое переиспользование компонент в виде собственных тэгов — это второй огромный плюс reactJS.

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



Но недавно появился новый официальный npm модуль, позволяющий запустить приложение за 30 секунд:

npm install -g create-react-app
create-react-app hello-world

Далее переходим в папку нового приложения и запускаем разработческий сервер:

cd ./hello-world
npm start

Открывается localhost:3000.

Из коробки уже есть поддержка es6, импорты css файлов, сборка, обновление страницы (в том числе js!) без перезагрузки в браузере.

Готово! Можно приступить к изучению reactJS и написанию своего Hello world приложения.

P.S. Ссылка на официальный источник: facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html