ReactJS Starter

Palestra realizada durante o november tech, no Senac, Tubarão - SC em 11/2022.

Transcript

1. REACTJS STARTER
2. Founder @code4tuba GEFY GEFFERSON MARCOS Tech Lead Frontend @ StudioSol
4. O QUE É REACT? UMA BIBLIOTECA JAVASCRIPT PARA CRIAR INTERFACES DE USUÁRIO
5. Facilita a criação de UIs; Deixa o código mais previsível e simples de depurar. DECLARATIVO
6. Permite criar componentes encapsulados que gerenciam seu próprio estado; Permite deixar a lógica da aplicação fora do DOM. BASEADO EM COMPONENTES
7. Funciona na Web, no backend com Node e para aplicativos com React-Native. USE EM QUALQUER LUGAR
8. TEM MERCADO?
9. QUEM USA?
10. HELLO WORLD
11. ISSO É REACT class HelloWorld extends React.Component { render() { return <div>Hello World </ div>; } } root.render(<HelloWorld /> );
12. É uma extensão de sintaxe para javascript; Recomendado para escrever a UI; JSX
13. No React a lógica de renderização é acoplada as outras lógicas de UI; Manipulação de eventos; Mudança de estado; Preparação de dados pra exibição. POR QUE JSX?
14. EU SOU UM ARQUIVO JSX const element = <h1>Hello, world!</h1>;
15. O DOM é a representação de dados de uma página web; O React criou o React DOM pra fazer a manipulação desse DOM de forma performática. RENDERIZAÇÃO DE ELEMENTOS
16. O React DOM compara o elemento novo e seus f ilhos e aplica a alteração só no nó que mudou. FONTE: HTTPS://CODEPEN.IO/GAEARON/PEN/GWOJEZ?EDITORS=1010 REACT DOM
17. INSERINDO ELEMENTO NO DOM <div id="root"></div> const element = <h1>Hello, world!</h1>; ReactDOM.render( element, document.getElementById('root') ); .html .js
18. class HelloWorld extends React.Component { render() { return <div>Hello World </ div>; } } root.render(<HelloWorld /> );
19. FONTE: HTTPS://BABELJS.IO/REPL BABEL
20. class HelloWorld extends React.Component { render() { return /*#__PURE__*/React.createElement("div", null, "Hello World"); } } root.render( /*#__PURE__*/React.createElement(HelloWorld, null));
21. COMPONENTE DECLARATIVO function Welcome() { return <h1>Hello World</h1>; } class Welcome extends React.Component { render() { return <h1>Hello World</h1>; } }
22. COMPONENTE DECLARATIVO const element = <h1>Hello, world!</h1>; ReactDOM.render( element, document.getElementById('root') ); <div id="root"></div>
23. COMPONENTE DECLARATIVO const element = <Welcome />; ReactDOM.render( element, document.getElementById('root') ); <div id="root"></div>
24. COMPONENTE DECLARATIVO ReactDOM.render( <Welcome />, document.getElementById('root') ); <div id="root"></div>
25. Props são imutáveis; States são mutáveis e quando seu valor é alterado os métodos do ciclo de vida são executados. PROPS VS STATE
26. STATE E PROPS ReactDOM.render( <Welcome title="Senac" /> , document.getElementById('root') );
27. STATE E PROPS class Welcome extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1>Hello, {this.props.title} < / h1> </ div> ); } }
28. STATE E PROPS class Welcome extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1>Hello, {this.props.title} < / h1> // Hello, Senac </ div> ); } }
29. STATE E PROPS class Welcome extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1>Hello, {this.props.title} < / h1> // Hello, Senac <button> {this.state.text} // undefined </ button> </ div> ); } }
30. STATE E PROPS class Welcome extends React.Component { constructor(props) { super(props); this.state = { text: "não clicou" }; } render() { return ( <div> <h1>Hello, {this.props.title} < / h1> // Hello, Senac <button> {this.state.text} // não clicou </ button> </ div> ); } }
31. STATE E PROPS class Welcome extends React.Component { constructor(props) { super(props); this.state = { text: "não clicou" }; } render() { return ( <div> <h1>Hello, {this.props.title} < / h1> // Hello, Senac <button onClick={() => this.setState({ text: "clicou"})} > {this.state.text} // não clicou </ button> </ div> ); } }
32. STATE E PROPS class Welcome extends React.Component { constructor(props) { super(props); this.state = { text: "clicou" }; } render() { return ( <div> <h1>Hello, {this.props.title} < / h1> // Hello, Senac <button onClick={() => this.setState({ text: "clicou"})} > {this.state.text} // clicou </ button> </ div> ); } }
34. PRIMEIRO PASSO
35. PRIMEIRO PASSO Header
36. PRIMEIRO PASSO Order Options Header
37. PRIMEIRO PASSO Card Order Options Header
38. PRIMEIRO PASSO Card Title Card Image Card Description Card Info Card Button Order Options Header Card
39. Jest; Typescript; React Router; Redux; Nextjs; Awesome-React. HTTPS://GITHUB.COM/ENAQX/AWESOME-REACT MUITA COISA…
40. FINE. I'LL DO IT MYSELF
41. PENSANDO DO JEITO REACT
42. - https://roadmap.sh/ HTTPS://GITHUB.COM/ENAQX/AWESOME-REACT ESTEJA PRONTO!
43. ROADMAP.SH
44. - https://roadmap.sh/ - https://github.com/felipe f ialho/frontend- challenges; - https://github.com/CollabCodeTech/ backend-challenges -https://gefymarcos.com.br HTTPS://GITHUB.COM/ENAQX/AWESOME-REACT ESTEJA PRONTO!
45. 14habits.com
46. OBRIGADO!
47. HTTPS://GITHUB.COM/GEFYMARCOS/MARVEL-REACT