Szybki start z React. Prezentacja przedstawiona na warsztatach z podstaw technologii React w ramach DreamLab Academy.
W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
2. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
3. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
Node managed by React DOM
4. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
Main component
11. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
12. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
“ReactDOM is the glue
between React and the
DOM”
13. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
14. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
function
15. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
import React from 'react';
export class TodoApp extends React.Component {
render() {
return (
<h1>Learn React</h1>
);
}
}
export default TodoApp;
function
16. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
import React from 'react';
export class TodoApp extends React.Component {
render() {
return (
<h1>Learn React</h1>
);
}
}
export default TodoApp;
classfunction
17. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
import React from 'react';
export class TodoApp extends React.Component {
render() {
return (
<h1>Learn React</h1>
);
}
}
export default TodoApp;
classfunction
===