Zaczynamy z Babel i JSX

keemor~30 października 2018 /Javascript/React

Poprzednim razem stworzyliśmy pierwszy kod w React i uruchomiliśmy go w statycznym pliku page.html.

Teraz dodamy obsługę JSX przy pomocy kompilatora Babel 7 oraz uruchomimy lokalny serwer deweloperski webpack-dev-server.

Instalacja Babel

Babel to kompilator, który umożliwia pisanie kodu wykorzystując EcmaScript 6/7/8 nie martwiąc się, które przeglądarki natywnie wpierają poszczególne wersje i funkcje. Możemy pisać kod używając nawet eksperymentalnych funkcji, a na koniec powiedzieć, że skompilowany kod ma działać w IE11.

npm i --save-dev @babel/core @babel/preset-env babel-loader

W pliku webpack.config.js dodajemy sekcję module:

 
module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }

Wszystkie pliki .js z wyłączeniem katalogu node_modules.

Instalacja JSX dla Babel

JSX (JavaScript eXtension) to rozszerzenie JS, które pozwala na pisanie kodu wyglądającego podobnie do XML. JSX podobnie jak XML posiada tagi, atrybuty i dzieci.

npm i --save-dev @babel/preset-react

Tworzymy plik .babelrc:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Te wtyczki będą zaaplikowane przez babel-loader.

Teraz możemy zamienić kod w src/index.js z Javascript na notację JSX.

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

class HelloMessage extends React.Component {
    render() {
        return <div>Hello {this.props.name}</div>;
    }
}

ReactDOM.render(<HelloMessage name="React with JSX!" />, document.getElementById('main'));

Po przebudowaniu:

npm run build

Strona page.html powinna pokazać React with JSX!

Instalacja webpack-dev-server

webpack-dev-server to serwer www, który możemy używać do rozwijania aplikacji lokalnie.
W przyszłości zastąpimy go serwerem napisanym w oparciu o Express.

npm i --save-dev webpack-dev-server

Tworzymy katalog dev z plikiem index.html:

<!doctype html>
<html>

<head>
    <title>Hello</title>
</head>

<body>
    <div id="main"></div>
    <script src="bundle.js"></script>
</body>

</html>

W pliku webpack.config.js dodajemy sekcję server:

devServer: {
    contentBase: path.resolve(__dirname, 'dev')
}

Ostatnim krokiem jest dopisanie w package.json w sekcji scripts:

"start": "webpack-dev-server --mode=development"

Po instalacjach z tego wpisu package.json wygląda tak:

{
    "name": "projekt1",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack --mode=production",
        "start": "webpack-dev-server --mode=development",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.1.2",
        "@babel/preset-env": "^7.1.0",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.4",
        "react": "^16.6.0",
        "react-dom": "^16.6.0",
        "webpack": "^4.22.0",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.10"
    }
}

Uruchamiamy z konsoli serwer na localhost:

npm run start

Teraz pod adresem http://localhost:8080/ zgłosi się serwer lokalny z deweloperską wersją naszej aplikacji.

Serwer startuje domyślnie w trybie obserwowania zmian w plikach źródłowych, więc jeśli zmienimy index.js i zapiszemy, webpack automatycznie przebuduje aplikację, a przeglądarka się odświeży.

npm run start

Instalacja React Developer Tools

Do podglądania działania i znajdowaniu błędów aplikacji w React powstało specjalne rozszerzenie React Developer Tools do Chrome DevTools.

Dodaj komentarz