Helló, világ!
A React segítségével könnyen készíthetsz interaktív felhasználói felületeket. Tervezz egyszerű nézeteket az applikáció minden egyes állapotához, és a React gondoskodik arról, hogy adatváltozáskor csak a megfelelő komponensek frissüljenek és legyenek újrarenderelve.
A deklaratív nézetek kiszámíthatóbbá teszik a kódot, valamint megkönnyítik a hibakeresést is.
Hogy komplex felhasználói felületeket tudj létrehozni, építs egységbefoglalt komponenseket amik gondoskodnak a saját állapotukról és kombináld őket.
Mivel a komponens logikáját sémák helyett JavaScriptben írod, könnyedén tudsz adatot mozgatni az alkalmazásban, és így az állapotok a DOM-on kívül maradnak.
Mi nem feltételezünk semmit a technológiai stack-ed többi részéről, szóval nyugodtan fejleszthetsz új funkciókat a Reactben anélkül, hogy a meglévő kódot módosítanod kellene.
A Reacttel szerver oldalon is renderelhetsz Node-dal, és mobilalkalmazásokat is írhatsz a React Native-ben.
A React komponensek azt mutatják, ami a render()
metódusban visszatér, beviteli adattól függően. Ez a példa JSX-t használ, aminek a szintaxisa az XML-re hasonlít. A komponens beviteli adata le van küldve a komponensnek, amihez a render()
metódus a this.props
segítségével fér hozzá.
A JSX szintaxis használata nem kötelező a Reactben. Hogy lásd a nyers JavaScript kódot amit a JSX fordítása generál, próbáld ki a Babel REPL-t.
class HelloMessage extends React.Component {
render() {
return <div>Helló {this.props.name}</div>;
}
}
root.render(<HelloMessage name="Tamás" />);
A beviteli adaton kívül (ami this.props
-ként érhető el), egy komponens a saját belső állapotát is kezelni tudja (ez this.state
-ként érhető el). Ha egy komponens állapota megváltozik, a renderelt tartalom frissítve lesz a render()
metódus újrahívásával.
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Másodperc: {this.state.seconds}
</div>
);
}
}
root.render(<Timer />);
A props
és state
segítségével össze tudunk rakni egy kis Teendők alkalmazást. Ez a példa a state
állapotot használja a jelenlegi listaelemek és a felhasználó beviteli inputjának a nyomonkövetésére. Annak ellenére hogy az esemény kezelők helyben vannak renderelve, azok össze lesznek gyűjtve, és esemély továbbítással lesznek implementálva.
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<div>
<h3>Teendők</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
Mik a teendők?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Hozzáad #{this.state.items.length + 1}
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
root.render(<TodoApp />);
A React lehetővé teszi, hogy más könyvtárakkal és keretrendszerekkel kommunikálj. Ez a példa a remarkable-t használja, ami egy külső Markdown könyvtár, mely a <textarea>
értékét valós időben konvertálja.
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.md = new Remarkable();
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Helló, **világ**!' };
}
handleChange(e) {
this.setState({ value: e.target.value });
}
getRawMarkup() {
return { __html: this.md.render(this.state.value) };
}
render() {
return (
<div className="MarkdownEditor">
<h3>Bemenet</h3>
<label htmlFor="markdown-content">
Írj egy kis markdown-t
</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Kimenet</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}
root.render(<MarkdownEditor />);
Helló, világ!