Búðu til ReactJS forrit úr grunni

React er vinsælt Javascript bókasafn (en ekki ramma) búin til af Facebook sem hægt er að nota til að byggja notendaviðmót.


Viðbrögð eru:

  • Yfirlýsing: Hannaðu skoðanir umsóknarinnar og React mun uppfæra og skilvirka aðeins nauðsynlega íhluti.
  • Byggt á íhlutum: Það gerir þér kleift að búa til hluti sem stjórna eigin ástandi og þeir geta verið samsettir til að gera flóknara UIS.
  • Lærðu einu sinni, skrifaðu hvar sem er: Hvarfhlutar eru endurnýtanlegir, sem þýðir að það gerir þér kleift að þróa nýja eiginleika án þess að endurskrifa núverandi kóða.

Það er mjög auðvelt að læra React, erfiði hlutinn kemur þegar reynt er að setja upp React verkefni frá grunni vegna þess að það er til fullt af kl einingar til að setja upp, svo og mikið af stillingum sem þarf að gera.

Búðu til React forrit

Auðveldasta leiðin til að byrja með React án þess að hafa of miklar áhyggjur af stillingum eða neinu öðru er að nota búa til-bregðast við-app sem er handhægt tæki sem ágripar mikið af því sem gerir React app virka, fjarri þér.

Eftir uppsetningu Node.js, þú getur notað garn eða kl að setja upp búa til-bregðast við-app á heimsvísu:

$ npm sett upp -g búa til viðbrögð-app
# eða
$ garn alþjóðlegt bæta við búa til-bregðast við-app

Síðan til að búa til nýtt forrit, keyrðu bara:

$ create-react-app mitt-app-nafn
$ cd my-app-nafn

Þetta mun búa til möppu sem heitir app-nafnið mitt sem mun innihalda upphafsuppbyggingu verkefnisins eingöngu með allar nauðsynlegar ósjálfstæði.

Og nú er þér ætlað að fara!

Hlaupaðu bara í verkefnaskránni þinni:

Byrjun á $ npm

Og þú munt sjá eitthvað á þessa leið:

Eins og áður segir, búa til-bregðast við-app felur allar upplýsingar um stillingarnar og gerir þér kleift að einbeita þér að kóðanum sem þú skrifar, sem er frábært þegar þú byrjar með React.

Gallinn er sá að það einangrar notandann frá því að skilja grunnatriði hans og frá því hvernig hann virkar innbyrðis.

Til dæmis setningafræði eins og innflutningur útflutningur eða JSX, eða að smíða og þjóna skránum þínum við þróun eru allt það búa til-bregðast við-app sér um, en þetta eru líka hlutir sem þú þarft að skilja til að hafa einhverja hugmynd um hvað er að gerast undir hettunni.

Sem betur fer getum við afgreitt þessi mál með Babel og Webpack.

Webpack + Babel

Förum af stað án þess að fjaðra!

Í fyrsta lagi skulum við búa til nýja skrá fyrir React forritið okkar og frumstilla verkefnið okkar með npm init.

$ mkdir ógnvekjandi-bregðast við verkefni
$ cd ógnvekjandi-bregðast við verkefni
$ npm init

Þú verður beðinn um að setja inn upplýsingar um verkefnið þitt. Ýttu bara á Enter fyrir hvert val (þú getur breytt þessum upplýsingum seinna), eða ef þú vilt bæta við upplýsingum um verkefnið þitt skaltu halda áfram.

Setur upp ósjálfstæði.

Næst verðum við að setja upp eftirfarandi ósjálfstæði:

  • Bregðast við & bregðast við

    $ npm uppsetning – vistaðu bregðast við viðbrögðum

  • Webpack & webpack-dev-server
    $ npm uppsetning – vistaðu-dev webpack webpack-dev-server webpack-cli

    vefpakkinn er eining búntakari, sem knippar JavaScript skrár og býr til eina (eða margfeldi) skrá sem hægt er að nota í vafranum.

    webpack-dev-server mun láta okkur keyra þróunarþjóni með aðgerðum eins og Skipt um heitt mát og Lifandi endurhleðsla.

  • Babel

    $ npm uppsetning – vistaðu-dev babel-core babel-loader babel-forstillt-env babel-preset-react

    Babel og stoðsöfn þess eru notuð til að umbreyta ES6 kóða okkar í skiljanlegan vafra.

Stillingar.

Nú þegar allar nauðsynlegar ósjálfstæði eru settar upp skulum við fara í stillingarnar.

Í rót verkefnisins munum við búa til skrá sem heitir webpack.config.js, og inni:

  • Við munum flytja inn vefpakkinn.
  • Skilgreindu aðgangsstað sem segir til um vefpakkinn hvar forritið okkar byrjar og hvar á að byrja að pakka skránum okkar.
  • Skilgreindu hleðslutæki sem eru notuð til að vinna úr mismunandi tegundum skráa til samtvinnunar. Að þessu námskeiði höfum við aðeins áhuga á babel-loader sem mun sjá um vinnslu JS skrár.

var webpack = þurfa (‘webpack’);
var slóð = krefjast (‘slóð’);

module.exports = {
færsla: ‘./src/index.js’,
mát: {
reglur: [{
próf: /\.(js|jsx)$/,
útiloka: / (node_modules | bower_components) /,
loader: ‘babel-loader’
}
]
}
}

Nú þurfum við að segja frá vefpakkinn hvar á að framleiða okkar dist.js skrá (inni í möppu sem kallast almenningur):

framleiðsla: {
slóð: __dirname + ‘/ public’,
filename: ‘dist.js’
}

Og við þurfum líka að veita vefpakkinn með valkostunum fyrir þróunarþjóninn okkar.

devServer: {
contentBase: __dirname + ‘/ public’,
historyApiFallback: satt
}

Allt webpack.config.js mun líta svona út:

var webpack = þurfa (‘webpack’);
var slóð = krefjast (‘slóð’);

module.exports = {
færsla: ‘./src/index.js’,
mát: {
reglur: [{
próf: /\.(js|jsx)$/,
útiloka: / (node_modules | bower_components) /,
loader: ‘babel-loader’,
}
]
},
framleiðsla: {
slóð: __dirname + ‘/ public’,
filename: ‘dist.js’
},
devServer: {
contentBase: __dirname + ‘/ public’,
historyApiFallback: satt
}
}

Það síðasta sem við þurfum að gera er að búa til skrá sem heitir .babelrc sem mun bjóða upp á valkosti sem eru notaðir af vefpokastöðunni: babel-loder.

Skráin ætti að líta svona út:

{
"forstillingar": ["env", "bregðast við"]
}

Og það er það, stillingin er búin.

Að setja allt saman

Á þessum tímapunkti ættum við að hafa verkefnaskipulag sem lítur svona út:

Nú skulum búa til okkar index.js skrá inni í rótaskrá verkefnisins okkar sem verður inngangspunktur okkar vefpakkinn stillingar og hver mun innihalda React kóða:

flytja inn React frá ‘react’;
flytja inn ReactDOM frá ‘react-dom’;

const App = () => (

Þetta er Awesome React forritið mitt

);

ReactDOM.render (, document.getElementById (‘root’));

Hér erum við að flytja inn Bregðast við og ReactDOM, þá erum við að gera app hluti okkar í aðal html hnútinn sem er: .

Það næsta verður að búa til skrá index.html inni í nýrri möppu sem heitir almenningi:

$ mkdir almenningur
$ cd opinber
$ touch index.html

Awesome React app

við skulum athuga hvort forritið okkar virkar eins og búist var við.

áður en við skulum bæta við kl handrit sem ræsir þróunarþjóninn með því að slá npm hlaupa byrjun í vélinni.

í package.json innan handrits hlutar munum við bæta við eftirfarandi handriti:

"handrit": {
"byrja": "./node_modules/.bin/webpack-dev-server
}

Og nú erum við að fara.

Byrjun á $ npm

Farðu á http: // localhost: 8080 og þú munt sjá að appið okkar virkar fullkomlega.

Niðurstaða

Í þessari kennslu lærðu við tvær mismunandi leiðir til að setja upp React verkefni:

  • Fyrsta leiðin sem samanstendur af því að nota tól sem kallast búa til-bregðast við-app sem setur allt á sinn stað og gerir þér kleift að einbeita þér að kóðanum.
  • Önnur leiðin sem notar babel og webpack og krefst þess að einhver stilling sé gerð.

Skoðaðu þessar 3 helstu hýsingarþjónustu Node.js:

A2 hýsing

Byrjunarverð:
$ 3,92


Áreiðanleiki
9.3


Verðlag
9.0


Notendavænn
9.3


Stuðningur
9.3


Lögun
9.3

Lestu umsagnir

Farðu á A2 Hosting

FastComet

Byrjunarverð:
$ 2,95


Áreiðanleiki
9.7


Verðlag
9.5


Notendavænn
9.7


Stuðningur
9.7


Lögun
9.6

Lestu umsagnir

Farðu á FastComet

Hostinger

Byrjunarverð:
$ 0,99


Áreiðanleiki
9.3


Verðlag
9.3


Notendavænn
9.4


Stuðningur
9.4


Lögun
9.2

Lestu umsagnir

Heimsæktu Hostinger

Tengdar greinar um hvernig á að gera

  • Hvernig á að setja upp Garn á Ubuntu 18.04 VPS eða Hollur framreiðslumaður
    millistig
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map