ReactJS особливості

Вказівка стилів

render() {
    const divStyle = {
      textAlign: 'center'
    }

    return (
      <div style={divStyle}>
        <h1 style={{color: 'blue', fontSize: '20px'}}>Hello world!</h1>
      </div>
    );
  }

Створення компонента

import React, { Component } from 'react';

// function car() {
//   return (
//     <div>This is car component</div>
//   )
// }

// const car = () => {
//   return (
//     <div>This is car component</div>
//   )
// }

// const car = () => (
//   <div>
//     This is car component
//     <strong>test</strong>
//   </div>
// )

// export default car;


import Car from './Car/Car';
import './App.css';

class App extends Component {
  render() {
	  const divStyle = {
		  textAlign: 'center'
	  }

	  return (
          <div className="App" style={divStyle}>
            <h1>Hello world!</h1>

            <Car />
          </div>
	  );
  }
}

export default App;

Вивід нащадка

{ props.children }

Варіанти виведення тегів

return (
      <div className="App">
        <h1>Hello world!</h1>
      </div>
    );

    // return React.createElement(
    //   'div',
    //   {
    //     className: 'App'
    //   },
    //   React.createElement(
    //     'h1',
    //     null,
    //     'Hello world!'
    //   )
    // ) 

Radium – це набір інструментів для керування вбудованими стилями елементів React. Це дає вам потужні можливості стилізації без CSS

npm install radium

Отримання ключа першого елемента масиву

const key = Object.keys(this.state.answerState)[0]

Провести дебаг конкретного місця в коді

debugger

Змінна з текстом та іншими змінними

const htmlFor = `${inputType}-${Math.random()}`

Запис до локального стейджу

localStorage.setItem('token', data.idToken)

Читання з локального стейджу

const token = localStorage.getItem('token')

Видалення з локального стейджу

localStorage.removeItem('token')