function toggleClass(el, className) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    var classes = el.className.split(' ');
    var existingIndex = classes.indexOf(className);
  
    if (existingIndex >= 0)
      classes.splice(existingIndex, 1);
    else
      classes.push(className);
  
    el.className = classes.join(' ');
  }
}

var el = document.querySelector('.block');

toggleClass(el, 'active');
function toggleClass(el, className) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    var classes = el.className.split(' ');
    var existingIndex = classes.indexOf(className);
  
    if (existingIndex >= 0)
      classes.splice(existingIndex, 1);
    else
      classes.push(className);
  
    el.className = classes.join(' ');
  }
}

var el = document.querySelector('.block');

toggleClass(el, 'active');
$('.block').toggleClass('active');

НИНАДА

Instagram

Netflix

WhatsApp Web

Dropbox

Web

Airbnb

 

  1. Atlassian
  2. Cloudflare
  3. BBC
  4. Flipboard
  5. Paypal
  6. Salesforce
  7. Tesla

Библиотека — набор готовых функций или классов, упрощающих разработку приложений или функционала.

Фреймворк — совокупность библиотек или своей отдельной логики, для построения полноценных приложений.

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

function App() {
  return (
    <div>
      <h1>Hello, Magas!</h1>
      <span>Это приложение на ReactJS</span>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
 
import React from 'react';
import { Text, View } from 'react-native';

const H1 = {
    fontSize: "24px",
    fontWeight: "bold"
};

function App() {
  return (
    <View>
      <Text style={H1}>Hello, Magas!</Text>
      <Text>Это приложение на React Native</Text>
    </View>
  );
}

export default App;

https://habr.com/ru/company/nixsolutions/blog/324562/

Статическая типизация

Статическая типизация

Настройка элементов на каждую ОС

Статическая типизация

Настройка элементов на каждую ОС

React Native не подходит для сложных анимаций

Кроссплатформенность

Кроссплатформенность

Повторное использование кода

Кроссплатформенность

Повторное использование кода

"Native" значит нэйтив

Кроссплатформенность

Повторное использование кода

"Native" значит нэйтив

Сообщество и готовые решения

Кроссплатформенность

Повторное использование кода

"Native" значит нэйтив

Сообщество и готовые решения

Не надо учить Java, Swift, Objective-C и т.д.. Только

Кроссплатформенность

Повторное использование кода

"Native" значит нэйтив

Сообщество и готовые решения

Не надо учить Java, Swift, Objective-C и т.д.. Только

Время сборки (Hot Reload)

 Java & Swift

React Native

import 'package:flutter/material.dart';

void main() => runApp(new HelloWorldApp());

class HelloWorldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Material(
        child: new Center(
          child: new Text("Hello world!"),
        ),
      ),
    );
  }
}

Flutter

import React from 'react';
import { Text, View } from 'react-native';

function App() {
  return (
    <View>
      <Text>Hello, Magas!</Text>
    </View>
  );
}

export default App;

React Native

Made with Slides.com