React

Dodane przez tdudkowski - ndz., 09/22/2019 - 23:38

React - start

Facebook 2013. Utworzenie środowiska deweloperskiego w kilku krokach:

Ten artykuł to notatki sporządzone przy okazji kursu React od podstaw. Teoria i praktyka autorstwa Bartka Borowczyka. Który to kurs serdecznie polecam, jak zresztą wszystkie kursy robione przez Bartka - więcej: Websamuraj - Kursy online z programowania i tworzenia stron.

Czego potrzebujemy?

Dodatkowe narzędzia

W dokumentacji jest napisane, że Reacta można użyć na trzy sposoby:

  • narzędzia online: Codepen, CodeSandbox, Glitch
  • Dodać do pliku w postaci CDN-ów
  • Stworzyć w środowisku deweloperskim React App

Dodawanie do plików

  • Przykładowy plik do obejrzenia
  • CDN - są tam dwie biblioteki React (React i React DOM) oraz Babel; z linków małpę i numer wersji można usunąć wtedy dociągnie się najnowsza

Jeżeli otworzymy przykładowy plik w przeglądarce i widzimy Hello World, a w konsoli obiekt React, to znaczy że wszystko jest w porządku.

Koniecznie trzeba podać typ skryptu w przypadku kompilatora Babel, w każdym innym można pominąć.

<script type="text/babel">

Błąd: "Cross origin requests are only supported for HTTP." wynika z otwarcia pliku jako //file; trzeba użyć localhosta.

Tak wygląda plik HTML z dodanymi CDN-ami React.

<body>
  <div id="root">
    <!-- kontener na aplikację react  -->
  </div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel" src="App.js"></script>
</body>

Moduł React

class App extends React.Component {

    state = {
        state_element: state_value
    }

    handleEvent = () => {
        this.setState({
            state_element: this.state.state_element
        })
    }

    render() {
        return (
            <>
                {/* komentarz w nawiasach */}
                <button disabled={this.state.order ? false : true} onClick={this.handleEvent}>-</button>
                <span> {this.state.state_element} </span>
                <button disabled={this.state.storage === this.state.order ? true : false} onClick={this.handleEvent}>+</button>
            </>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

Powyżej są wersje deweloperskie; wersja produkcyjna jest tu: CDN Links.

React App

Jest to bardziej zaawansowana metoda. Bardziej wymagająca, ale daje więcej możliwości. Przede wszystkim umożliwia stworzenie aplikacji z dołączonymi dowolnymi bibliotekami. W całości po ściągnięciu i rozpakowaniu takie środowisko zajmuje około 150 MB. Po skończeniu pracy eksportuje się wersję produkcyjną, która jest zminimalizowana i zoptymalizowana.

React App | ReactDOMServer

"Optimal file structure for React applications" | "A general and flexible project structure that works for all projects in any ecosystem"

Poniższe polecenia są z manuala. Pierwsze tworzy środowisko, drugim wchodzimy do katalogu, trzecim uruchamiamy serwer.

npx create-react-app my-app
cd my-app
npm start
  • Jeżeli na końcu polecenia jest kropka to tworzy aplikację w bieżącym katalogu.
  • Polecenie uruchamiające musi być wydane w katalogu aplikacji. Domyślny adres serwera to [ http://localhost:3000/ ] Zatrzymanie serwera Ctrl+C.
  • W katalogu aplikacji cztery katalogi:

W efekcie powstaje następująca hierarchia katalogów:

 

  • /.git - repozytorium git
  • /node_modules - katalog z domyślnymi i doinstalowanymi modułami
  • /public - pliki dla serwera, do wyświetlenia na stronie, nie jest pakietowane
  • package.json - konfiguracja, zależności, co jest zainstalowane i wersje pakietów
  • /src - tutaj pracujemy
    • index.js - główny plik aplikacji, wszystkie importy i połączenia, generuje stronę
    • index.css - CSS
    • /components - można utworzyć osobny katalog dla komponentów, dla większego porządku
      • App.js - plik komponentu
      • App.css

Przykładowy plik index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

Przykładowy plik App.js:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App" >
        <p>no elo </p>
      </div>
    )
  }
}

export default App;

Instalowanie dodatkowej paczki:

npm install nazwa_biblioteki

Żeby biblioteka działała trzeba ją importować, moduły importuje się wskazując ścieżkę:

import nazwa from 'nazwa_biblioteki';
import nazwa_komponentu './Komponent';

Nazwy określa się przy imporcie i można je zmieniać z domyślnych, ale nazwy pobieranych muszą się zgadzać. Jeżeli App ma końcówkę .js można ją pominąć, wszystkie inne trzeba wpisać. Na końcu musi być polecenie eksportu, żeby inne moduły i główna strona mogły korzystać z zawartości pliku. Nazwa pliku powinna być zgodna z nazwą klasy, którą zawiera.

Składniki:

  • serwer
  • Babel - tłumaczy na starszą wersję.
  • Webpack pakietuje (bandluje) pliki. Dynamicznie utworzony /static/js/bundle.js - cały js wynikowy.
  • Eslint poprawność kodu, wskazywanie błędów składni.

CSS

Inline

<p style={{border: '1px solid #999', fontSize: 20}}>treść</p>

Zamiast tak wpisanych można umieścić zdefiniowany przez const (przed render) obiekt. To daje możliwość zrobienia warunków.

const style_p = {border: '1px solid #999', fontSize: 20}

<p style={warunki ? style_p : inne_style }>treść</p>

Najczęściej style importuje się z arkuszy podając ścieżkę względną. Stylowaniu podlegają także importowane komponenty. Wszystkie są globalne, tzn podlegają bandlowaniu podczas kompilacji.

import '../sciezka/wzgledna/arkusz.css';

Bootstrap, instalacja:

npm install bootstrap

Import, najlepiej w pliku App.js, wtedy wszędzie można używać klas bootstrapowych.

import 'ścieżka/dostępu/bootstrap.min.css';

SASS

npm install node-sass

React Router

Instalacja. Dla aplikacji webowych w katalogu aplikacji:

npm install react-router-dom

Dla React Native

npm install react-router-native

Diagnostyka

npm audit
npm audit fix

Komponenty

  • BrowserRouter (też BrowserRouter as Router)
  • Link i NavLink
  • Route
  • Switch
  • Redirect

Import poszczególnych komponentów wygląda tak:

import { BrowserRouter, NavLink, Route, Switch } from "react-router-dom";

Style CSS. Link i NavLink przypisują automatycznie styl active dla aktywnego elementu. NavLink ma dodatkowe możliwości: można użyć styli wpisanych na poniższe dwa sposoby:

activeClassName="home_selected"
activeStyle={{ backgroundColor: "gray" }}

Moduły

Składnia CommonJS (używane m in przez Node.js)

const users = require('sciezka/nazwa_pliku');
module.exports = () => {/* _ */};

Składnia ES6

import users from 'sciezka/nazwa_pliku';
export default () => {/* _ */};

Hooks

"Using Custom React Hooks to Simplify Forms" | "React Hooks - A deeper dive featuring useContext and useReducer" | Collection of React Hooks | "A somewhat tricky hook usage" | "Why Isn’t X a Hook?" | "The Definitive React Hooks Cheatsheet" | "React Hooks broke my tests, now what? — Part 1"

TODO

C.D.N.

funkcja strzałkowa metody tablicy join przerabia na stringa, tworzy druga nieniszcząca concat zwraca nowa tablice z połączenia operator spread map

Odnośniki

React sites

Tutoriale

Biblioteki

Bootstrap

Narzędzia

Gatsby.js

Next.js

React Router

Redux

React Native

Artykuły

Node.js

Deno

MongoDB

npm

Dział artykułu