Zaczynamy z React i Webpack

keemor~24 października 2018 /Javascript/React

W poprzednim wpisie zainstalowaliśmy Node.js, edytor, w którym będziemy działać oraz stworzyliśmy plik package.json.

Teraz stworzymy pierwszy widok przy użyciu biblioteki React.

Instalacja React

Na początek zainstalujemy dwa moduły przy pomocy npm. W konsoli uruchamiamy:

npm i react react-dom --save-dev

Pierwszą rzeczą, którą zauważamy to pojawienie się katalogu node_modules. Tam instalowane są wszystkie biblioteki, z których będziemy korzystać.

Flaga –save-dev powoduje, że react i react-dom zostały dopisane do sekcji devDependencies w package.json.

Jeśli chcielibyśmy projekt gdzie indziej możemy pominąć katalog node_modules i zainstalować wszystkie biblioteki na nowo, używając:

npm i

Instalacja Webpack

Webpack stworzy paczkę, która będzie zawierać nasz kod oraz kod bibliotek. Paczkę w postaci pliku .js dodamy do naszej aplikacji.

npm i webpack webpack-cli --save-dev

Tworzymy plik webpack.config.js:

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

W package.json dopisujemy w sekcji scripts:

"build": "webpack --mode=production"

Teraz package.json będzie wyglądać tak:

{
    "name": "projekt1",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack --mode=production",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "react": "^16.6.0",
        "react-dom": "^16.6.0",
        "webpack": "^4.22.0",
        "webpack-cli": "^3.1.2"
    }
}

Pierwszy kod React

Użyjemy przykładu ze strony React, który pojawia się po odhaczeniu checkboxa ‚JSX?’.
Do tego co to jest JSX wkrótce wrócimy.

Tworzymy katalog src i plik index.js:

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

class HelloMessage extends React.Component {
    render() {
        return React.createElement('div', null, 'Hello ', this.props.name);
    }
}

ReactDOM.render(React.createElement(HelloMessage, { name: 'React' }), document.getElementById('main'));

Stworzyliśmy komponent HelloMessage, który zostanie osadzony na stronie na elemencie HTML o id main.

Pierwsze uruchomienie Webpack

Z konsoli wywołujemy:

npm run build

Co się wydarzyło?

Hello React

Ostatnim krokiem jest stworzenie pliku page.html

<!doctype html>
<html>

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

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

</html>

W page.html stworzyliśmy div o id main, na którym zaczepi się nasz komponent HelloMessage oraz dodaliśmy skrypt dist/bundle.js.

Po otwarciu page.html w przeglądarce zobaczymy Hello React.

Polecam sprawdzenie innych przykładów ze strony React, na razie bez użycia JSX.

W kolejnym wpisie zaczniemy z system kontroli wersji Git

Dodaj komentarz