Ինչպես սկսել React-ի, Webpack-ի և Bootstrap-ի հետ

ReactJs-ը գոյություն ունի արդեն բավականին երկար ժամանակ, բայց որպես react ծրագրավորող սկսելն իսկապես հեշտ չէ: Որպես ծրագրավորող, դուք պարզապես ցանկանում եք տեղադրել գրադարանը, կախվածությունները, կարգավորել ձեր զարգացման միջավայրը և սկսել անել այն, ինչ գիտեք, թե ինչպես անել լավագույնս (կոդավորում):

React-ի համար դուք պետք է ցատկեք մի քանի խոչընդոտների վրայով, նախքան զարգացնելու կամ փորձարկելը լիովին կարգավորեք: Ձեր զարգացման միջավայրի կարգավորումը կարող է տևել մի քանի ժամից մինչև մի քանի օր: Ձեր լուծումը կառուցելու փոխարեն այն իսկապես զայրացնում է կարգավորումը: Ես եղել եմ այնտեղ, և դա ծիծաղելի չէր:

Կան բազմաթիվ React ձեռնարկներ, և պաշտոնականը այստեղ ապահովում է ReactJs-ի հետ սկսելու շատ սահուն միջոց, սակայն փորձառու մշակողի համար դա բավականաչափ լավ չէ: Դուք կցանկանաք ընդունել լավագույն փորձը, օգտագործել այն գործիքները, որոնք դուք գիտեք և որոշակի ձևով կառուցեք ձեր արձագանքման նախագիծը:

Ես Bootstrap-ի և Fontawesome-ի մեծ երկրպագու եմ; Ես սիրում եմ այս գրադարանները ներառել իմ վեբ նախագծերի մեծ մասում: Bootstrap 4-ի և Fontawesome-ի վերջին թողարկումով 2018-ին, իսկապես այնքան շատ բան կա, որին կարող եք հասնել նվազագույն ջանքերով, օգտագործելով այս գործիքները: Webpack-ն այն գործիքն է, որը ես սկսել եմ սիրել, և դա զարմանալի գործիք է, որը շատ ավելի հեշտացնում է կյանքը մշակողի համար: Այս գործիքների մասին ավելին կարող եք կարդալ իրենց համապատասխան կայքերում:

Այս հոդվածում մենք կքննարկենք

• ReactJs նախագծի ստեղծում զրոյից
• Մոդուլի փաթեթի կարգավորում (Webpack) ավտոմատ փաթեթով պահպանման և դիտարկիչի վերաբեռնման ժամանակ
• Bootstrap-ի ինտեգրում ձեր նախագծում
• fontAwesome-ի ավելացում ձեր նախագծին (հետագայում)

Դուք կարող եք կլոնավորել React Webpack Starter նախագիծը github-ում և փորձել այն

Հիմա եկեք սկսենք…

Ստեղծել React Project

Օգտագործելով ձեր տերմինալը կամ հրամանի տողը, նավարկեք դեպի այն վայրը, որտեղ ցանկանում եք պահել ձեր նախագծի ֆայլերը և ստեղծեք գրացուցակ այս հրամանով. mkdir react-project

Նավարկեք ձեր նոր նախագծի cd react-project

Նախաձեռնեք հանգույցի նախագիծը npm init-ով և հետևեք հրահանգներին՝ տրամադրելու պահանջվող տեղեկատվությունը (եթե ձեր ապարատում NodeJs տեղադրված չէ, գնացեք NodeJS կայք, ներբեռնեք տարբերակը ձեր ՕՀ-ի համար և տեղադրեք)

Տեղադրեք փաթեթներ

Մենք պետք է տեղադրենք մի քանի գլոբալ փաթեթներ, որոնք կօգնեն փոխակերպել մեր կոդը և միավորել ակտիվները ES6 ստանդարտներին: Մենք պետք է տեղադրենք babel և webpack

npm install babel babel-cli webpack webpack-cli webpack-dev-server -g

Այժմ մենք կշարունակենք տեղադրել React և babel պլագինները տեղում

npm install react react-dom --save

Տեղադրեք babel պլագինները տեղական միայն մշակողի վրա

npm install babel-core babel-loader babel-react babel-preset-env --save-dev

Եկեք տեղադրենք ևս մի քանի մոդուլներ կատարելագործման համար

npm install path open-browser-webpack-plugin --save-dev

path մոդուլն օգնում է ձեզ լուծել դիրեկտորիաները, մինչդեռ բրաուզերի պլագինը հնարավորություն է տալիս ակտիվները կազմելուց հետո զննարկչի ավտոմատ գործարկումը: Բավական է այս տեղադրումներով: Եկեք անցնենք գործի:

տեղեկատուի կառուցվածքը

Ռեակտիվ ճակատային հավելվածներ ստեղծելիս սովորական պրակտիկա է դարձել src դիրեկտորիաներն առանձնացնել հանրային հասանելի գրացուցակներից: Ես որոշեցի ընդունել ստորև նշված գրացուցակի կառուցվածքը, քանի որ այն ինձ լավ է զգում: Այնուամենայնիվ, դուք կարող եք այն հարմարեցնել ձեր նախընտրած ոճին:

react-project
- dist
   - assets
      bundle.js
   index.html
- node_modules
- src
   App.jsx
   index.js
.babelrc
package.json
webpack.config.js

Հիմնականում մենք կավելացնենք մի քանի ֆայլ և երկու գրացուցակ մեր նախագծի արմատին: Դուք կգտնեք բոլոր տեղադրված հանգույցների մոդուլները node_modules-ում, որոնք արդեն ստեղծվել են տեղադրման ժամանակ:

Հաճելի կլինի բացել գրացուցակը ձեր սիրելի տեքստային խմբագրիչի pr IDE-ում և ստեղծել երկու գրացուցակ src և dist ձեր նախագծի արմատում:

ստեղծել .babelrc նախագծի արմատում և ավելացնել այս կոդը

// .babelrc
{
   "presets": ["env"]
}

ստեղծել webpack.config.js և ավելացնել այս կոդը դրան

// Import webpack module
var webpack = require("webpack");
// Import open browser plugin
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
//Import path module
const path = require('path');
module.exports = {
   entry: "./src/index.js", //set entry file
// Resolve to output directory and set file
output: {
    path: path.resolve("dist/assets"),
    filename: "bundle.js",
    publicPath: "assets"
},
// Add Url param to open browser plugin
plugins: [new OpenBrowserPlugin({url: 'http://localhost:3000'})],
// Set dev-server configuration
devServer: {
   inline: true,
   contentBase: './dist', 
   port: 3000
},
// Add babel-loader to transpile js and jsx files
module: { 
    rules: [
        {
           test: /\.jsx?$/,
           exclude: /(node_modules)/,
           use: [
                 {loader: 'babel-loader'},
                 query: {presets: ["react"]}
              ]
        }]
      }
}

Նավարկեք src գրացուցակ և ավելացրեք երկու ֆայլ

//Filename ./src/index.js
// Import resources
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
// Render main app
ReactDOM.render(<App/>, document.getElementById('app'));

Ավելացնել բովանդակություն App.jsx-ում

//Filename ./src/App.jsx
// Import react
import React from 'react';
class App extends React.Component {
render() {
return (<div><h1>Hello World in React</h1></div>);}}
export default App;

Այնուհետև անցեք մեր բաշխման գրացուցակը կարգավորելու և ավելացրեք ./dist/assets գրացուցակը և index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>React Project Starter</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="assets/bundle.js"></script>
</body>
</html>

Առայժմ դա պետք է լիներ: Ստուգեք, որ ձեր ֆայլերը գտնվում են ճիշտ գրացուցակում, այնուհետև գնացեք package.json՝ որոշ ճշգրտումներ կատարելու և գործարկելու համար: Սցենարների բաժնում ջնջեք թեստերը և փոխարինեք սկրիպտները սրանով..

...
"scripts": {
"start": "webpack-dev-server --hot --mode development"
},
...

Մենք բոլորս պատրաստ ենք հիմա գործարկել: Ձեր տերմինալում անցեք նախագծի գրացուցակ react-project և գործարկեք այս հրամանը

npm start

Webpack-ը կշարունակի և կհամալրի ձեր ակտիվները և կպահի bundle.js-ին, այնուհետև գործարկեք ձեր դիտարկիչը localhost:3000-ին, և դուք պետք է տեսնեք սա, եթե ամեն ինչ լավ ընթանա:

Այժմ, երբ մենք ունենք մեր հիմնական կարգավորումն աշխատում, ժամանակն է ավելացնել bootstrap մեր նախագծին և դարձնել այն պատասխանատու:

npm install bootstrap --save

Bootstrap-ն ունի կախվածություն, և մենք պետք է նաև տեղադրենք վեբ փաթեթ բեռնիչներ styles, sass և ​​այլնի համար: Եկեք նախ տեղադրենք javascript-ի կախվածությունները:

npm install jquery popper.js --save

Այնուհետև մենք տեղադրում ենք վեբ փաթեթ բեռնիչներ

npm install style-loader css-loader postcss-loader precss autoprefixer sass-loader --save

Այժմ մենք մի քանի փոփոխություններ ենք կատարում, և մեր Bootstrap-ը գործարկվելու է

Սկզբում մենք ներմուծում ենք bootstrap ռեսուրսներ index.js-ում և այն այժմ դառնում է

// Import resources
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
// Import bootstrap css
import 'bootstrap/dist/css/bootstrap.min.css';
// Render main app
ReactDOM.render(<App/>, document.getElementById('app'));

Այնուհետև մենք թարմացնում ենք webpack.config.js-ը, որպեսզի ավելացնենք նման ոճ և css բեռնիչներ

// Import webpack module
var webpack = require("webpack");
// Import open browser plugin
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
//Import path module
const path = require('path');
module.exports = {
   entry: "./src/index.js", //set entry file
// Resolve to output directory and set file
output: {
    path: path.resolve("dist/assets"),
    filename: "bundle.js",
    publicPath: "assets"
},
// Add Url param to open browser plugin
plugins: [new OpenBrowserPlugin({url: http://localhost:3000'})],
// Set dev-server configuration
devServer: {
   inline: true,
   contentBase: './dist', 
   port: 3000
},
// Add babel-loader to transpile js and jsx files
module: { 
    rules: [
        {
           test: /\.jsx?$/,
           exclude: /(node_modules)/,
           use: [
                 {loader: 'babel-loader'},
                 query: {presets: ["react"]}
              ]
        }, {
          test: /\.css$/,
           use: ['style-loader', 'css-loader']
        } 
      ] 
   }
}

Վերջապես, մենք թարմացնում ենք App.jsx-ը bootstrap jumbotron-ով, որպեսզի փորձարկենք այդպես

//Filename ./src/App.jsx
// Import react
import React from 'react';
class App extends React.Component {
render() {
return (
<div>

<div class="jumbotron">
<h1 class="display-4">Amazing React, Bootstrap and Webpack</h1>
<p class="lead">Created with love</p>
<hr class="my-4"/>
<p>It uses utility classes for typography and spacing to space content out
within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>

</div>
);}}
export default App;

Այժմ դուք պետք է տեսնեք այս գեղեցիկ տեսք ունեցող էջը

Շնորհավորում եմ

Մինչ այժմ մենք կարողացել ենք կարգավորել React-ը, Webpack-ը և Bootstrap 4-ը: Հուսով եմ, որ հաջորդ մի քանի օրվա ընթացքում կհետևեմ այս հոդվածին ևս մի քանի թարմացումներով react-ով կառուցելու վերաբերյալ:

Ազատորեն կլոնավորեք ռեպո և խաղացեք դրա հետ: Happy Hacking