React Tutorial 2024
1.0.0
2024 Sua mais nova ferramenta de aprendizadoO React é uma biblioteca JavaScript para criar interfaces de usuário. Ele permite que os desenvolvedores criem componentes de interface do usuário reutilizáveis e atualizem com eficiência o DOM usando um DOM virtual para um desempenho ideal.
Se você deseja criar um novo aplicativo ou site inteiramente com o React, sugiro escolher uma das estruturas movidas a React que são populares na comunidade.
Você pode usar o React sem uma estrutura, mas descobrimos que a maioria dos aplicativos e sites precisa abordar problemas comuns, como divisão de código, roteamento, busca de dados e geração HTML. Esses desafios não são exclusivos para reagir, mas são comuns a todas as bibliotecas da interface do usuário.
Começando com uma estrutura, você pode subir e funcionar rapidamente com o React e evitar a necessidade de desenvolver sua própria estrutura posteriormente.
O roteador de páginas do próximo.JS é uma estrutura de reação de pilha completa. É versátil e permite criar aplicativos React de qualquer tamanho - de um blog principalmente estático a um aplicativo dinâmico complexo. Para criar um novo projeto Next.js, execute em seu terminal:
npx create-next-app@latest
Next.js é mantido pela Vercel. Você pode implantar um aplicativo Next.js em qualquer Node.js ou hospedagem sem servidor ou em seu próprio servidor. Next.js também suporta uma exportação estática que não requer um servidor.
O roteador de aplicativos do próximo.js é uma reformulação das próximas APIs. Ele permite buscar dados em componentes assíncronos executados no servidor ou mesmo durante a compilação.
Next.js é mantido pela Vercel. Você pode implantar um aplicativo Next.js em qualquer Node.js ou hospedagem sem servidor ou em seu próprio servidor. Next.js também suporta exportação estática, o que não requer um servidor.
Visão geral Vite (palavra francesa para "rápido", pronunciado /vit /, como "veet") é uma ferramenta de construção que visa fornecer uma experiência de desenvolvimento mais rápida e magra para projetos da web modernos. Consiste em duas partes principais:
Um servidor de desenvolvimento que fornece aprimoramentos ricos de recursos sobre os módulos ES nativos, por exemplo, substituição de módulos HOT extremamente rápida (HMR).
Um comando de compilação que agrupa seu código com Rollup, pré-configurado para produzir ativos estáticos altamente otimizados para produção.
O Vite é opinativo e vem com padrões sensatos da caixa. Leia sobre o que é possível no guia de recursos. O suporte a estruturas ou integração com outras ferramentas é possível através de plugins. A seção Config explica como adaptar o Vite ao seu projeto, se necessário.
Antes de começar, verifique se você tem o Node.js instalado no seu sistema. Se você ainda não o tiver, pode baixá -lo no site oficial do Node.js, é realmente simples.
npx create-vite your-project-name --template react
Substitua seu nome-name pelo nome desejado para o seu projeto. O Vite suporta muitas estruturas, mas, neste caso, especificamos o modelo de reação com a opção - -Template React.
cd your-project-name
Não se esqueça de substituir o seu nome-name pelo nome real que você escolheu para o seu projeto (a menos que, é claro, você queira manter esse nome para o seu projeto).
npm
npm run dev
Depois de executar esses comandos, você deve ver uma mensagem no seu terminal indicando que o site do seu React está em execução em uma porta específica, geralmente é um número de porta 'aleatório' como http: // localhost: 5173. Agora, abra seu navegador e visite o URL fornecido para ver o site do seu React em ação.
Use ferramentas de desenvolvedor React para inspecionar componentes do React, editar adereços e estado e identificar problemas de desempenho.
Extensão do navegador A maneira mais fácil de depurar sites construídos com o React é instalar a extensão do navegador React Developer Tools. Está disponível para vários navegadores populares:
Para outros navegadores (por exemplo, Safari), instale o pacote React-Devtools NPM:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
Em seguida, abra as ferramentas do desenvolvedor do terminal:
react-devtools
Em seguida, conecte seu site adicionando a seguinte tag <cript> ao início do site:
<html>
<head>
<script src="http://localhost:8097"></script>
O JSX é uma extensão de sintaxe para JavaScript que se parece com XML ou HTML. Ele permite que os desenvolvedores escrevam elementos e componentes HTML de maneira mais concisa e legível nos arquivos JavaScript.
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
Os componentes funcionais são funções simples que aceitam adereços como argumento e retornam elementos JSX. Com os ganchos do React, os componentes funcionais também podem ter efeitos de estado e colaterais.
import React from 'react';
const FunctionalComponent = () => {
return <p>This is a functional component.</p>;
}
export default FunctionalComponent;
Os componentes da classe são classes ES6 que estendem o componente REACT. Eles podem manter e gerenciar o estado local e ter acesso a métodos de ciclo de vida, tornando-os componentes mais ricos em recursos do que funcionais.
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <p>This is a class component.</p>;
}
}
export default ClassComponent;
Os adereços são uma maneira de transmitir dados de um componente pai para um componente filho no React. Eles são imutáveis e fornecem uma maneira de tornar os componentes dinâmicos e reutilizáveis.
import React from 'react';
const PropsExample = (props) => {
return <p>{props.message}</p>;
}
export default PropsExample;
O Estado React representa o estado de mudança de um componente. Isso permite que os componentes gerenciem e atualizem seus próprios dados, resultando em interfaces de usuário dinâmicas e interativas.
import React, { Component } from 'react';
class StateExample extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
export default StateExample;
Métodos do ciclo de vida São Métodos Especiis em componentes de classe que São invocados em diferentes fases do ciclo de vida de um componente. ComponentDidmount É U um Método de Ciclo de Vida Comummente Utilizado, Executado Depois de UM Componente ser renderizado no dom.
import React, { Component } from 'react';
class LifecycleExample extends Component {
componentDidMount() {
console.log('Component is mounted!');
}
render() {
return <p>Lifecycle Example</p>;
}
}
export default LifecycleExample;
O React usa o CamelCase para lidar com eventos. As funções podem ser definidas para lidar com eventos como cliques, alterações, etc., fornecendo interatividade aos componentes.
import React from 'react';
const EventHandlingExample = () => {
const handleClick = () => {
alert('Button clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
export default EventHandlingExample;
Os ganchos do React são funções que permitem que os componentes funcionais gerenciem efeitos de estado e colaterais. Eles foram introduzidos no React 16.8 e fornecem uma maneira mais concisa de trabalhar com métodos de estado e ciclo de vida em componentes funcionais.
import React, { useState } from 'react';
const UseStateExample = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
export default UseStateExample;
Os componentes controlados no React têm entradas e seu estado controlado pelo React. Eles recebem seu valor atual e o manipulador de OnChange como adereços, tornando -os controlados pelo React e não pelo DOM.
import React, { useState } from 'react';
const ControlledComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
}
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
placeholder="Type here"
/>
);
}
export default ControlledComponent;
Os limites de erro são componentes do React que detectam erros de JavaScript em qualquer lugar da árvore de componentes filhos e registram esses erros, apresentam uma interface do usuário de fallback ou tomem outras medidas.
import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <p>Something went wrong.</p>;
}
return this.props.children;
}
}
export default ErrorBoundary;
Os componentes de ordem superior (hocs) são funções que pegam um componente e retornam um novo componente com funcionalidade adicional. Eles são uma maneira de reutilizar a lógica do componente.
import React from 'react';
const WithLogger = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
console.log('Component is mounted!');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
export default WithLogger;
// Usage
import React from 'react';
import WithLogger from './WithLogger';
const MyComponent = () => {
return <p>My Component</p>;
}
const EnhancedComponent = WithLogger(MyComponent);
O React fornece a função map para renderizar listas de itens dinamicamente. Cada item da matriz é mapeado para um elemento React, facilitando a renderização do conteúdo dinâmico.
import React from 'react';
const RenderingList = () => {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
export default RenderingList;
A API de contexto no React oferece uma maneira de transmitir dados através da árvore de componentes sem precisar passar adereços manualmente em cada nível. É útil para compartilhar valores como temas ou status de autenticação.
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <p style={{ color: theme === 'light' ? 'black' : 'white' }}>Themed Component</p>;
}
export default ThemedComponent;
As chaves no React ajudam a identificar quais itens foram alterados, adicionados ou removidos. Eles devem ser únicos na lista e ajudar a reagir com atualizações eficientes.
import React from 'react';
const KeysExample = () => {
const data = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
];
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default KeysExample;
Os formulários de manuseio no React envolve o gerenciamento de dados do formulário usando o estado e o manuseio do envio de formulários por meio de manipuladores de eventos. Os componentes controlados são usados para sincronizar elementos de formulário com o estado do React.
import React, { useState } from 'react';
const FormExample = () => {
const [formData, setFormData] = useState({ username: '', password: '' });
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
}
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form submitted:', formData);
}
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
</label>
<label>
Password:
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}
export default FormExample;
Estilos embutidos: o React permite estilizar componentes usando estilos embutidos, onde os estilos são definidos como objetos e aplicados diretamente aos elementos.
import React from 'react';
const InlineStyleExample = () => {
const styles = {
color: 'blue',
fontSize: '18px',
};
return <p style={styles}>Styled with inline styles</p>;
}
export default InlineStyleExample;
Render Props é uma técnica para compartilhar o código entre os componentes do React usando um suporte cujo valor é uma função. Isso permite a composição dinâmica dos componentes.
import React, { useState } from 'react';
const MouseTracker = ({ render }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
}
return (
<div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
{render(position)}
</div>
);
}
export default MouseTracker;
// Usage
import React from 'react';
import MouseTracker from './MouseTracker';
const App = () => {
return (
<MouseTracker
render={(position) => (
<p>
Mouse position: {position.x}, {position.y}
</p>
)}
/>
);
}
export default App;
Os módulos CSS ajudam a definir o escopo dos estilos para um componente específico, evitando conflitos de estilo global. Cada componente pode ter seu próprio módulo CSS com estilos com escopo localmente.
.myComponent {
color: green;
}
import React from 'react';
import styles from './CSSModulesExample.module.css';
const CSSModulesExample = () => {
return <p className={styles.myComponent}>Styled with CSS Modules</p>;
}
export default CSSModulesExample;
Características:
import React, { useState } from 'react';
const TodoApp = () => {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const addTask = () => {
setTasks([...tasks, { text: newTask, completed: false }]);
setNewTask('');
};
const toggleTask = (index) => {
const updatedTasks = [...tasks];
updatedTasks[index].completed = !updatedTasks[index].completed;
setTasks(updatedTasks);
};
const removeTask = (index) => {
const updatedTasks = [...tasks];
updatedTasks.splice(index, 1);
setTasks(updatedTasks);
};
return (
<div>
<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
/>
<button onClick={addTask}>Add Task</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
<input
type="checkbox"
checked={task.completed}
onChange={() => toggleTask(index)}
/>
<span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
{task.text}
</span>
<button onClick={() => removeTask(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default TodoApp;
Este exemplo de aplicação climática ilustra a aplicação prática de conceitos de reação, incluindo gerenciamento de estado, efeito de uso para efeitos colaterais, manuseio de eventos, interação da API e renderização condicional. Os usuários podem aprender como criar um aplicativo climático funcional e entender a integração de ganchos do React em cenários do mundo real.
FETAURES:
Componente funcional e ganchos de estado:
useState para weather e city .Usando o useeffect para obter dados:
Os ganchos useEffect são usados para executar efeitos colaterais, como buscar dados climáticos da API OpenWeathermap.
A função fetchWeatherData é assíncrona e busca dados climáticos com base na cidade selecionada usando a API fetch .
Renderização condicional:
Os dados climáticos são renderizados condicionalmente apenas se existir ( weather && ... ).
Manipulação de eventos:
setCity é chamada em seu evento onChange .Interação da API:
Atualizando dinamicamente o conteúdo:
Estilo:
Conversão de temperatura:
// src/RealWorldExamples/WeatherApp.js
import React, { useState, useEffect } from 'react';
const WeatherApp = () => {
const [weather, setWeather] = useState(null);
const [city, setCity] = useState('New York');
const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';
useEffect(() => {
// Fetch weather data from OpenWeatherMap API
const fetchWeatherData = async () => {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
);
if (!response.ok) {
throw new Error('Failed to fetch weather data');
}
const data = await response.json();
setWeather(data);
} catch (error) {
console.error(error.message);
}
};
fetchWeatherData();
}, [city, apiKey]);
return (
<div>
<h1>Weather App</h1>
<label>
Enter City:
<input
type="text"
value={city}
onChange={(e) => setCity(e.target.value)}
/>
</label>
{weather && (
<div>
<h2>{weather.name}, {weather.sys.country}</h2>
<p>Temperature: {Math.round(weather.main.temp - 273.15)}°C</p>
<p>Weather: {weather.weather[0].description}</p>
</div>
)}
</div>
);
};
export default WeatherApp;
Melhores práticas:
/src
/components
/Button
Button.js
Button.test.js
Button.css
/features
/Todo
TodoList.js
TodoItem.js
TodoForm.js
/styles
global.css
/tests
/unit
Button.test.js
/integration
TodoIntegration.test.js
Melhores práticas:
// Using React.memo
const MemoizedComponent = React.memo(({ data }) => {
// Component logic
});
// Using Code Splitting and Lazy Loading
const MyComponent = React.lazy(() => import('./MyComponent'));
// In your component
const App = () => (
<React.Suspense fallback={<LoadingSpinner />}>
<MyComponent />
</React.Suspense>
);
Melhores práticas:
Exemplo:
// Jest Unit Test
test('renders correctly', () => {
const { getByText } = render(<Button label="Click me" />);
expect(getByText('Click me')).toBeInTheDocument();
});
// Jest Integration Test
test('increments count on button click', () => {
const { getByText } = render(<Counter />);
fireEvent.click(getByText('Increment'));
expect(getByText('Count: 1')).toBeInTheDocument();
});
// React Testing Library
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
test('clicking button increments count', () => {
render(<MyComponent />);
userEvent.click(screen.getByRole('button'));
expect(screen.getByText('Count: 1')).toBeInTheDocument();
});
Melhores práticas:
Use o roteador React para roteamento do lado do cliente em um aplicativo de uma página.
Defina rotas para diferentes visualizações ou seções do seu aplicativo.
Implementar componentes de navegação, como <Link> , para permitir uma fácil navegação entre as rotas.
Exemplo:
// React Router
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const App = () => (
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
);
Melhor prática:
// Using Local Component State
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
// Using Context API
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <p style={{ color: theme === 'light' ? 'black' : 'white' }}>Themed Component</p>;
};
// Using Redux
// (Assuming you have a Redux store configured)
import { useSelector, useDispatch } from 'react-redux';
const CounterRedux = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
</div>
);
};
Melhores práticas:
Exemplo:
Melhores práticas:
Exemplo:
// Error Boundary
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <p>Something went wrong. Please try again.</p>;
}
return this.props.children;
}
}
Melhores práticas:
Exemplo:
// Semantic HTML Elements
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
// ARIA Roles and Attributes
<button aria-label="Close" onClick={handleClose}>
✕
</button>
// Keyboard Navigation
<input type="text" onKeyDown={handleKeyDown} />
Melhores práticas:
Exemplo:
// Using React.memo
const MemoizedComponent = React.memo(({ data }) => {
// Component logic
});
// Using Code Splitting and Lazy Loading
const MyComponent = React.lazy(() => import('./MyComponent'));
// In your component
const App = () => (
<React.Suspense fallback={<LoadingSpinner />}>
<MyComponent />
</React.Suspense>
);
// Using PureComponent
class PureCounter extends React.PureComponent {
render() {
return <p>Count: {this.props.count}</p>;
}
Atualize regularmente as dependências para se beneficiar de novos recursos, correções de bugs e patches de segurança.
Siga o versão semântica para bibliotecas e pacotes usados no projeto.
Seja cauteloso com grandes atualizações e teste minuciosamente antes de atualizar.
Exemplo:
# Regularly update dependencies
npm update
# Follow semantic versioning
# Example: Major.Minor.Patch
# ^1.2.3 means any version that is compatible with 1.2.3
Configure o WebPack para construções de produção com otimizações:
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
// Other webpack configurations...
};
Obrigado pelo seu interesse em contribuir para este incrível tutorial do React! Suas contribuições ajudam a tornar esse recurso ainda mais valioso para estudantes de todos os níveis. Esteja você consertando um bug, melhorando um recurso existente ou adicionando algo totalmente novo, seus esforços fazem a diferença.
** Garet the Repository: Clique no botão "Fork" no canto superior direito deste repositório para criar sua cópia.
** Clone o repositório: clone o repositório da sua máquina local usando git clone https://github.com/DaveSimoes/React-Tutorial-2024.git
** Crie uma ramificação: Crie uma nova ramificação para sua contribuição com um nome descritivo: git checkout -b your-feature .
** Faça alterações: faça suas alterações nos arquivos apropriados. Sinta -se à vontade para melhorar os exemplos existentes, adicionar novos, corrigir erros de digitação ou melhorar a documentação.
** COMIT AS MUDANÇAS: envie suas alterações com uma mensagem clara e concisa: git commit -m "Your message here" .
** Push Alterações: Envie suas alterações no repositório bifurcado: git push origin your-feature .
Crie uma solicitação de tração: abra uma solicitação de tração no repositório original. Forneça Um título Claro, Descreva Suas Alterações e INVIE O PULL SEITOR.
Siga estilos de codificação consistentes. Verifique se o seu código está bem documentado, especialmente se você estiver adicionando novos exemplos ou recursos.
Obrigado por considerar contribuir com este tutorial do React. Sua dedicação em melhorar esse recurso é muito apreciada. Vamos aprender e crescer juntos!
Se você achou esse tutorial de reação útil, considere dar -lhe uma estrela! Seu apoio é incrivelmente motivador e ajuda outras pessoas a descobrir esse recurso. Obrigado por fazer parte da nossa comunidade e HAP!
Reacto biblioteca oficial
