REACT

React este o bibliotecă JavaScript pentru construirea interfețelor utilizator.

Reacționați este folosit pentru a construi aplicații de o singură pagină.

React ne permite să creați componente reutilizabile UI.

Învățarea prin exemple

Instrumentul nostru „Arată React“ face ușor pentru a demonstra React, se arată atât
codul și rezultatul.

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

class Test extends React.Component {

render() {
return <h1>Hello World!</h1>;
}
}
ReactDOM.render(<Test />, document.getElementById('root'));

Crearea React App

Pentru a învăța și de testare React, ar trebui să configurați un React Mediu pe computer.

Acest tutorial folosește create-react-app.

create-react-app Este un mod acceptat în mod oficial pentru a crea aplicații React.

Dacă aveți NPM și Node.js instalat, puteți crea o aplicație React prin instalarea mai întâi
creați-reacționează-app.

Instalați crea reacționează aplicație rulând această comandă în terminal:

C:\Users\Your Name>npm install -g create-react-app

Acum sunteți pregătit pentru a crea prima dvs. React aplicație!

Executați această comandă pentru a crea o aplicație React pe nume myfirstreact:

C:\Users\Your Name>npx create-react-app myfirstreact

create-react-appVa stabili tot ce ai nevoie pentru a rula o aplicație React.

Notă: Această aplicație utilizează tutorial create-react-app pentru a demonstra React

exemple. Tu nu va fi capabil să rulezi aceleași exemple de pe computer , dacă nu
instalați create-react-app mediul.
Executați aplicația React

Dacă ați urmat cele două comenzi de mai sus, sunteți gata pentru a rula prima
dvs. reale React aplicație!

Executați această comandă pentru a trece la myfirstreactdirectorul:

C:\Users\Your Name>cd myfirstreact

Executați această comandă pentru a executa aplicația reacționăm myfirstreact:

C:\Users\Your Name\myfirstreact>npm start

O nouă fereastră de browser se va deschide cu nou creat React App dvs.! Dacă nu,
deschideți browserul și introduceți localhost:3000în bara de adrese.

Rezultatul:

Vei afla mai multe despre crearea reacționează aplicație în React Începeți capitolul.

Ce trebuie să știți deja

Înainte de a începe cu React.JS, ar trebui să aibă experiență intermediară în:

 HTML
 CSS
 JavaScript

Ar trebui , de asemenea , o anumită experiență cu caracteristici a introdus JavaScript nou

în ECMAScript 6 (ES6), vei învăța despre ele în reacționăm ES6 capitol.

React Introducere
Ce este React?

React este o bibliotecă JavaScript creat de Facebook.

React este un instrument pentru construirea componentelor UI.

Cum lucrati in React ?

React creează un DOM VIRTUAL în memorie.

In loc de a manipula direct DOM browser-ului, React creează un DOM virtuală în

memorie, în cazul în care face toate de manipulare necesare, înainte de a face schimbări
în DOM browser-ului.

React numai modificările ce trebuie schimbat!

React afla ce au fost făcute schimbări și modificări doar ceea ce trebuie să fie schimbat.

Vei învăța diversele aspecte ale modului React face acest lucru în restul acestui tutorial.
Istoricul React.JS

Versiunea actuală a React.JS este V16.8.6 (martie 2019).

Eliberarea inițială pentru public (V0.3.0) a fost în iulie 2013.

React.JS a fost folosit pentru prima dată în 2011 pentru caracteristica newsfeed
Facebook.

Facebook Software Engineer, Jordan Walke, a creat-o.

Pachetul crea reacționează-app versiunea 2.0 a fost lansat în octombrie 2018.

Creați-reacționează-app versiunea 2.0 suportă Babel 7, WebPACK 4, și Jest23.

React Noțiuni de bază

Pentru a utiliza React în producție, aveți nevoie de NPM și Node.js

Pentru a obține o imagine de ansamblu a ceea ce este React, puteți scrie React cod direct
în HTML.

Dar, în scopul de a utiliza în producție React, aveți nevoie de NPM și Node.js instalat.

React direct în HTML

Cel mai rapid mod de învățare de start Reacționează este de a scrie React direct în
fișierele HTML.

Începe prin includerea trei script-uri, primele două să ne scrie React cod în JavaScripts
noastre, iar al treilea, Babel, ne permite să scrie JSX sintaxa și ES6 în browsere mai
vechi.

Vei afla mai multe despre JSX în reacționăm capitolul JSX .

Exemplu

Include trei lui CDN în fișierul HTML:

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>

<div id="mydiv"></div>

<script type="text/babel">
class Hello extends React.Component {
render() {
 return <h1>Hello World!</h1>
}
}
</script>

</body>
</html>

Incearca-l tu insuti "

<!DOCTYPE html>

<html>

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<body>

<div id="mydiv"></div>

<script type="text/babel">

class Hello extends React.Component {

render() {

return <h1>Hello World!</h1>

ReactDOM.render(<Hello />, document.getElementById('mydiv'))

</script>

</body>

</html>

Acest mod de utilizare React poate fi OK pentru scopuri de testare, dar pentru producția
va trebui să creeze un mediu React .

Configurarea unui React Mediu

Dacă aveți NPM și Node.js instalat, puteți crea o aplicație React prin instalarea mai întâi
creați-reacționează-app.

Dacă ați creat deja creați-reacționează aplicație puteți sări peste această secțiune.
Instalați crea reacționează aplicație rulând această comandă în terminal:

C:\Users\Your Name>npm install -g create-react-app

Apoi , va sunt capabili de a crea o aplicație React, să creați unul numit myfirstreact.

Executați această comandă pentru a crea o aplicație React pe nume myfirstreact:

C:\Users\Your Name>npx create-react-app myfirstreact

Creare reacționează aplicație va stabili tot ce ai nevoie pentru a rula o aplicație React.

Executați aplicația React

Acum sunteți gata pentru a rula prima dvs. reale React aplicație!

Executați această comandă pentru a trece la myfirstreactdirectorul:

C:\Users\Your Name>cd myfirstreact

Executați această comandă pentru a rula aplicația reacționăm myfirstreact:

C:\Users\Your Name\myfirstreact>npm start

O nouă fereastră de browser se va deschide cu nou creat React App dvs.! Dacă nu,
deschideți browserul și introduceți localhost:3000în bara de adrese.

Rezultatul:

Modificarea Application React

Până în prezent atât de bine, dar cum pot schimba conținutul?

Uită - te în myfirstreactdirectorul, și veți găsi un srcdosar. În interiorul srcfolderul

există un fișier numit App.js, deschideți - l și - l va arăta astfel:

Exemplu_02 /myfirstreact/src/App.js:

import React, { Component } from 'react';

import logo from './logo.svg';
import './App.css';

class App extends Component {

 render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;

Încercați să schimbați conținutul HTML și salvați fișierul.

Observați că modificările sunt vizibile imediat după ce salvați fișierul, nu trebuie să

reîncărcați browser-ul!

Exemplu

Înlocuiți tot conținutul din interiorul <div className="App">cu un <h1>element de .

A se vedea modificările în browser-ul atunci când faceți clic pe Salvare.

import React, { Component } from 'react';

class App extends Component {

render() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
}
export default App;

Observați că am eliminat importurile care nu avem nevoie (logo.svg și App.css).

Rezultatul:

Ce urmeaza?

Acum aveți un React Mediu pe computer, și sunteți gata pentru a afla mai multe despre
React.

În restul acestui tutorial vom folosi instrumentul nostru arata Reacționează pentru a
explica diferitele aspecte ale React și modul în care acestea sunt afișate în browser.

Dacă doriți să urmați aceiași pași pe computer, începe prin stripare în jos srcdosarul să
conțină doar două fișiere: index.jsși index.html, trebuie să eliminați ,
de asemenea , toate liniile inutile de cod în interiorul celor două fișiere pentru a le face să
arate ca fișierele din Show React instrumentul de mai jos:

Exemplu

Faceți clic pe butonul „Run Exemplu“ pentru a vedea rezultatul.

index.js:

import React from 'react';

import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>

<div id="root"></div>

</body>
</html>
Run Exemplu »
import React from 'react';
import ReactDOM from 'react-dom';

const myfirstelement = <h1>Hello React!</h1>

ReactDOM.render(myfirstelement, document.getElementById('root'));

/*
You are now watching a React file
through our 'Show React' tool.
Click the tab to check out
the 'index.html' file as well.
*/