Introdução ao React

React é uma biblioteca JavaScript de código aberto para construir interfaces de usuário, especialmente para aplicações de página única. Desenvolvido e mantido pelo Facebook, React permite a criação de interfaces de usuário interativas e responsivas com eficiência. Vamos explorar sua linha do tempo, inventores, adoção e fornecer 20 exemplos de código para um aprendizado rápido.

Linha do Tempo

1. 2011: Início do Desenvolvimento
   O React foi criado por Jordan Walke, um engenheiro do Facebook. O objetivo era resolver problemas de desempenho e complexidade nas interfaces de usuário do Facebook.
2. 2013: Lançamento do React
   O React foi lançado como um projeto open-source durante a conferência JSConf US. O lançamento foi uma resposta às necessidades do Facebook de construir interfaces complexas e dinâmicas de forma mais eficiente.
3. 2015: React 0.14
   Introdução de conceitos como o “ReactDOM” e a separação entre o núcleo do React e o DOM.
4. 2016: React 15
   Melhorias significativas na performance e na experiência de desenvolvimento. Introdução do conceito de “Fiber”, que seria a base para futuras melhorias.
5. 2017: React 16
   Lançamento da nova arquitetura do React com o “Fiber”. Introdução dos Hooks, uma nova forma de gerenciar estado e efeitos colaterais em componentes funcionais.
6. 2018: React 16.8
   Lançamento dos Hooks, permitindo uma maneira mais funcional de gerenciar estado e ciclo de vida em componentes.
7. 2020: React 17
   Foco na melhoria da compatibilidade com versões anteriores e a preparação para futuras atualizações.
8. 2021: React 18
   Introdução do modo “Concurrent” e outras melhorias de desempenho, proporcionando uma melhor experiência de desenvolvimento e usuário.

Inventores

• Jordan Walke: Engenheiro do Facebook e principal criador do React. Sua visão para uma abordagem declarativa e baseada em componentes influenciou profundamente o desenvolvimento de interfaces de usuário.
• Pete Hunt e Dan Abramov: Contribuíram significativamente para o desenvolvimento e popularização do React. Dan Abramov, em particular, é conhecido pelo desenvolvimento dos Hooks e por seu trabalho no Redux.

Adoção

Desde seu lançamento, React tem sido amplamente adotado por empresas e desenvolvedores em todo o mundo. Algumas razões para sua popularidade incluem:

• Desempenho e Escalabilidade: O React é conhecido por seu desempenho eficiente e escalabilidade, especialmente para aplicações de grandes dimensões.
• Comunidade Ativa: Uma grande comunidade de desenvolvedores contribui com bibliotecas, ferramentas e suporte.
• Flexibilidade: React pode ser usado em combinação com diversas outras tecnologias e bibliotecas.

Empresas notáveis que utilizam React incluem Facebook, Instagram, Airbnb, Netflix, e Uber.

20 Exemplos de Código para Aprendizado Rápido

1. Criação de um Componente Simples

   function HelloWorld() {
     return <h1>Hello, world!</h1>;
   }

2. Uso de Props

   function Greeting(props) {
     return <h1>Hello, {props.name}!</h1>;
   }

3. Estado em um Componente de Classe

   class Counter extends React.Component {
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }

     increment = () => {
       this.setState({ count: this.state.count + 1 });
     };

     render() {
       return (
         <div>
           <p>Count: {this.state.count}</p>
           <button onClick={this.increment}>Increment</button>
         </div>
       );
     }
   }

4. Estado com Hooks

   import React, { useState } from 'react';

   function Counter() {
     const [count, setCount] = useState(0);

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }

5. Manipulação de Eventos

   function Button() {
     const handleClick = () => {
       alert('Button clicked!');
     };

     return <button onClick={handleClick}>Click me</button>;
   }

6. Renderização Condicional

   function Greeting(props) {
     if (props.isLoggedIn) {
       return <h1>Welcome back!</h1>;
     } else {
       return <h1>Please sign up.</h1>;
     }
   }

7. Listagem de Itens

   function List(props) {
     const items = props.items.map((item) =>
       <li key={item.toString()}>{item}</li>
     );

     return <ul>{items}</ul>;
   }

8. Formulários Controlados

   function Form() {
     const [value, setValue] = useState('');

     const handleChange = (event) => {
       setValue(event.target.value);
     };

     return (
       <form>
         <label>
           Name:
           <input type="text" value={value} onChange={handleChange} />
         </label>
       </form>
     );
   }

9. Context API

   const ThemeContext = React.createContext('light');

   function ThemedButton() {
     return (
       <ThemeContext.Consumer>
         {theme => <button style={{ background: theme }}>Click me</button>}
       </ThemeContext.Consumer>
     );
   }

10. UseEffect Hook import React, { useState, useEffect } from 'react'; function FetchData() { const [data, setData] = useState(null); useEffect(() => { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => setData(data)); }, []); return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>; }
11. Routing com React Router import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; function App() { return ( <Router> <Switch> <Route path="/about"> <About /> </Route> <Route path="/"> <Home /> </Route> </Switch> </Router> ); }
12. Componentes de Ordem Superior function withCounter(WrappedComponent) { return class extends React.Component { state = { count: 0 };increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return <WrappedComponent count={this.state.count} increment={this.increment} {...this.props} />; } }; }
13. Lazy Loading import React, { Suspense, lazy } from 'react'; const LazyComponent = lazy(() => import('./LazyComponent')); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); }
14. Error Boundaries class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error, info) { console.log(error, info); } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } }
15. Memoização com React.memo const MyComponent = React.memo(function MyComponent(props) { // Render using props });
16. Refs function FocusInput() { const inputRef = React.useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( <> <input ref={inputRef} /> <button onClick={handleClick}>Focus the input</button> </> ); }
17. Portal import ReactDOM from 'react-dom'; function Modal(props) { return ReactDOM.createPortal( <div className="modal">{props.children}</div>, document.getElementById('modal-root') ); }
18. Custom Hooks function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { return initialValue; } }); useEffect(() => { try { window.localStorage.setItem(key, JSON.stringify(storedValue)); } catch (error) {} }, [key, storedValue]); return [storedValue, setStoredValue]; }
19. Fragmentos function List(props) { return ( <> <li>Item 1</li> <li>Item 2</li> </> ); }
20. Dynamic Imports import React, { Suspense, lazy } from 'react'; const Component = lazy(() => import('./Component')); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <Component /> </Suspense> ); }

Este artigo fornece uma visão geral abrangente sobre React, sua história, inventores, adoção e um conjunto de exemplos de código para ajudar no aprendizado rápido. Se precisar de mais detalhes ou ajuda com qualquer tópico específico, sinta-se à vontade para perguntar!