React Tutorial 2024
1.0.0
2024 Alat Pembelajaran Terbaru AndaReact adalah pustaka JavaScript untuk membuat antarmuka pengguna. Ini memungkinkan pengembang untuk membangun komponen UI yang dapat digunakan kembali dan memperbarui DOM secara efisien dengan menggunakan DOM virtual untuk kinerja optimal.
Jika Anda ingin membuat aplikasi atau situs web baru sepenuhnya dengan React, saya sarankan memilih salah satu kerangka kerja bertenaga bereaksi yang populer di masyarakat.
Anda dapat menggunakan React tanpa kerangka kerja, tetapi kami telah menemukan bahwa sebagian besar aplikasi dan situs pada akhirnya perlu mengatasi masalah umum seperti pemisahan kode, perutean, pengambilan data, dan pembuatan HTML. Tantangan -tantangan ini tidak unik untuk bereaksi tetapi umum untuk semua perpustakaan UI.
Dengan memulai dengan kerangka kerja, Anda dapat dengan cepat bangun dan berlari dengan bereaksi dan menghindari kebutuhan untuk mengembangkan kerangka kerja Anda sendiri nanti.
Router halaman selanjutnya. Ini serbaguna dan memungkinkan Anda membuat aplikasi bereaksi dengan ukuran berapa pun - dari blog yang sebagian besar statis hingga aplikasi dinamis yang kompleks. Untuk membuat proyek Next.js baru, jalankan di terminal Anda:
npx create-next-app@latest
Next.js dikelola oleh Vercel. Anda dapat menggunakan aplikasi Next.js ke node.js atau hosting tanpa server, atau ke server Anda sendiri. Next.js juga mendukung ekspor statis yang tidak memerlukan server.
O App router do Next.js adalah desain ulang dari API berikutnya yang bertujuan untuk memenuhi visi arsitektur full-stack tim React. Ini memungkinkan Anda mengambil data dalam komponen asinkron yang berjalan di server atau bahkan selama build.
Next.js dikelola oleh Vercel. Anda dapat menggunakan aplikasi Next.js ke node.js atau hosting tanpa server, atau ke server Anda sendiri. Next.js juga mendukung ekspor statis yang tidak memerlukan server.
Ikhtisar Vite (kata Prancis untuk "cepat", diucapkan /vit /, seperti "VEET") adalah alat build yang bertujuan untuk memberikan pengalaman pengembangan yang lebih cepat dan lebih ramping untuk proyek web modern. Itu terdiri dari dua bagian utama:
Server dev yang memberikan peningkatan fitur yang kaya atas modul ES asli, misalnya Penggantian Modul Panas yang sangat cepat (HMR).
Perintah build yang mengikat kode Anda dengan rollup, yang dikonfigurasi sebelumnya untuk menghasilkan aset statis yang sangat dioptimalkan untuk produksi.
Vite didapat dan dilengkapi dengan default yang masuk akal di luar kotak. Baca tentang apa yang mungkin terjadi di panduan fitur. Dukungan untuk kerangka kerja atau integrasi dengan alat lain dimungkinkan melalui plugin. Bagian konfigurasi menjelaskan cara beradaptasi dengan vite dengan proyek Anda jika diperlukan.
Sebelum Anda mulai, pastikan Anda memiliki Node.js yang diinstal pada sistem Anda. Jika Anda belum memilikinya, Anda dapat mengunduhnya dari situs web resmi Node.js, ini sangat sederhana.
npx create-vite your-project-name --template react
Ganti nama proyek Anda dengan nama yang Anda inginkan untuk proyek Anda. Vite mendukung banyak kerangka kerja, tetapi dalam hal ini, kami menentukan templat React dengan opsi -template react.
cd your-project-name
Jangan lupa untuk mengganti nama proyek Anda dengan nama sebenarnya yang Anda pilih untuk proyek Anda (kecuali tentu saja, Anda ingin menyimpan nama ini untuk proyek Anda).
npm
npm run dev
Setelah menjalankan perintah ini, Anda akan melihat pesan di terminal Anda yang menunjukkan bahwa situs web React Anda berjalan pada port tertentu, biasanya nomor port 'acak' seperti http: // localhost: 5173. Sekarang, buka browser Anda dan kunjungi URL yang disediakan untuk melihat situs web React Anda beraksi.
Gunakan alat pengembang React untuk memeriksa komponen bereaksi, mengedit alat peraga dan menyatakan, dan mengidentifikasi masalah kinerja.
Perpanjangan Browser Cara termudah untuk men -debug situs web yang dibangun dengan React adalah dengan menginstal Ekstensi Peramban Alat Pengembang React. Ini tersedia untuk beberapa browser populer:
Untuk browser lain (misalnya, Safari), instal paket NPM React-Devtools:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
Selanjutnya buka alat pengembang dari terminal:
react-devtools
Kemudian hubungkan situs web Anda dengan menambahkan tag <script> berikut ke awal situs web Anda:
<html>
<head>
<script src="http://localhost:8097"></script>
JSX adalah ekstensi sintaks untuk JavaScript yang terlihat mirip dengan XML atau HTML. Ini memungkinkan pengembang untuk menulis elemen dan komponen HTML dengan cara yang lebih ringkas dan dapat dibaca dalam file JavaScript.
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
Komponen fungsional adalah fungsi sederhana yang menerima alat peraga sebagai argumen dan mengembalikan elemen JSX. Dengan kait bereaksi, komponen fungsional juga dapat memiliki efek keadaan dan samping.
import React from 'react';
const FunctionalComponent = () => {
return <p>This is a functional component.</p>;
}
export default FunctionalComponent;
Komponen kelas adalah kelas ES6 yang memperluas komponen React. Mereka dapat mempertahankan dan mengelola negara bagian dan memiliki akses ke metode siklus hidup, menjadikannya lebih kaya fitur daripada komponen fungsional.
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <p>This is a class component.</p>;
}
}
export default ClassComponent;
Alat peraga adalah cara untuk memberikan data dari komponen induk ke komponen anak di React. Mereka tidak berubah dan memberikan cara membuat komponen dinamis dan dapat digunakan kembali.
import React from 'react';
const PropsExample = (props) => {
return <p>{props.message}</p>;
}
export default PropsExample;
Negara bereaksi mewakili perubahan keadaan komponen. Ini memungkinkan komponen untuk mengelola dan memperbarui data mereka sendiri, menghasilkan antarmuka pengguna yang dinamis dan interaktif.
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;
Metode siklus hidup São métodos khususnya komponen de classe que são invocados em perbedaan fase do ciclo de vida de um componente. componentdidmount é 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;
React menggunakan Camelcase untuk menangani acara. Fungsi dapat didefinisikan untuk menangani acara seperti klik, perubahan, dll., Memberikan interaktivitas untuk komponen.
import React from 'react';
const EventHandlingExample = () => {
const handleClick = () => {
alert('Button clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
export default EventHandlingExample;
React Hooks adalah fungsi yang memungkinkan komponen fungsional untuk mengelola status dan efek samping. Mereka diperkenalkan dalam React 16.8 dan memberikan cara yang lebih ringkas untuk bekerja dengan metode status dan siklus hidup dalam komponen fungsional.
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;
Komponen terkontrol dalam React memiliki input dan keadaannya dikendalikan oleh React. Mereka menerima nilai mereka saat ini dan pawang Onchange sebagai alat peraga, membuat mereka dikendalikan oleh React dan bukan oleh 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;
Batas kesalahan adalah komponen reaksi yang mendeteksi kesalahan JavaScript di mana saja di pohon komponen anak dan mencatat kesalahan tersebut, menyajikan UI fallback atau mengambil tindakan lain.
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;
Komponen urutan yang lebih tinggi (HOC) adalah fungsi yang mengambil komponen dan mengembalikan komponen baru dengan fungsionalitas tambahan. Mereka adalah cara untuk menggunakan kembali logika komponen.
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);
React menyediakan fungsi map untuk membuat daftar item secara dinamis. Setiap item dalam array dipetakan ke elemen bereaksi, membuatnya lebih mudah untuk membuat konten dinamis.
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;
Konteks API dalam React menawarkan cara mentransmisikan data melalui pohon komponen tanpa harus melewati alat peraga secara manual di setiap level. Ini berguna untuk berbagi nilai seperti tema atau status otentikasi.
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;
Kunci dalam React membantu mengidentifikasi item mana yang telah diubah, ditambahkan atau dihapus. Mereka harus unik dalam daftar dan membantu bereaksi dengan pembaruan yang efisien.
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;
Penanganan formulir dalam React melibatkan mengelola data formulir menggunakan status dan menangani pengiriman formulir melalui penangan acara. Komponen terkontrol digunakan untuk menyinkronkan elemen bentuk dengan keadaan 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;
Inline Styles: React memungkinkan Anda untuk gaya komponen menggunakan gaya inline, di mana gaya didefinisikan sebagai objek dan diterapkan langsung pada elemen.
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 adalah teknik untuk berbagi kode antara komponen React menggunakan prop yang nilainya adalah fungsi. Ini memungkinkan untuk komposisi dinamis komponen.
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;
Modul CSS membantu menentukan ruang lingkup gaya untuk komponen tertentu, menghindari konflik gaya global. Setiap komponen dapat memiliki modul CSS sendiri dengan gaya yang dilingkup secara lokal.
.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;
Fitur:
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;
Contoh aplikasi cuaca ini menggambarkan aplikasi praktis dari konsep reaksi, termasuk manajemen negara, menggunakan efek samping, penanganan peristiwa, interaksi API dan rendering bersyarat. Pengguna dapat belajar cara membuat aplikasi cuaca fungsional dan memahami integrasi kait reaksi ke dalam skenario dunia nyata.
Fetaures:
Komponen fungsional dan kait status:
useState untuk weather dan city .Menggunakan UseEffect untuk mendapatkan data:
Kait useEffect digunakan untuk melakukan efek samping, seperti mengambil data cuaca dari Openweathermap API.
Fungsi fetchWeatherData tidak sinkron dan mengambil data cuaca berdasarkan kota yang dipilih menggunakan API fetch .
Rendering bersyarat:
Data cuaca diterjemahkan secara kondisional hanya jika ada ( weather && ... ).
Penanganan acara:
setCity dipanggil pada acara onChange -nya.Interaksi API:
Konten memperbarui secara dinamis:
Styling:
Konversi Suhu:
// 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;
Praktik Terbaik:
/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
Praktik Terbaik:
// 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>
);
Praktik Terbaik:
Contoh:
// 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();
});
Praktik Terbaik:
Gunakan router bereaksi untuk perutean sisi klien dalam aplikasi satu halaman.
Tentukan rute ke berbagai tampilan atau bagian dari aplikasi Anda.
Menerapkan komponen navigasi, seperti <Link> , untuk memungkinkan navigasi yang mudah antar rute.
Contoh:
// 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>
);
Praktik Terbaik:
// 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>
);
};
Praktik Terbaik:
Contoh:
Praktik Terbaik:
Contoh:
// 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;
}
}
Praktik Terbaik:
Contoh:
// 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} />
Praktik Terbaik:
Contoh:
// 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>;
}
Perbarui ketergantungan secara teratur untuk mendapatkan manfaat dari fitur baru, perbaikan bug, dan tambalan keamanan.
Ikuti versi semantik untuk perpustakaan dan paket yang digunakan dalam proyek.
Berhati -hatilah dengan pembaruan besar dan uji secara menyeluruh sebelum memperbarui.
Contoh:
# 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
Konfigurasikan Webpack untuk Bangunan Produksi Dengan Optimalisasi:
// 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...
};
Terima kasih atas minat Anda untuk berkontribusi pada tutorial React yang luar biasa ini! Kontribusi Anda membantu membuat sumber ini lebih berharga bagi siswa dari semua tingkatan. Apakah Anda memperbaiki bug, meningkatkan fitur yang ada atau menambahkan sesuatu yang sama sekali baru, upaya Anda membuat perbedaan.
** Fork Repositori: Klik tombol "Fork" di sudut kanan atas repositori ini untuk membuat salinan Anda.
** Klon Repositori: Kloning Repositori ke Mesin Lokal Anda Menggunakan git clone https://github.com/DaveSimoes/React-Tutorial-2024.git
** Buat cabang: Buat cabang baru untuk kontribusi Anda dengan nama deskriptif: git checkout -b your-feature .
** Buat perubahan: buat perubahan Anda di file yang sesuai. Jangan ragu untuk meningkatkan contoh yang ada, menambahkan yang baru, mengitari kesalahan ketik atau meningkatkan dokumentasi.
** Perubahan Komit: Kirimkan perubahan Anda dengan pesan yang jelas dan ringkas: git commit -m "Your message here" .
** Push Changes: Kirim perubahan Anda ke repositori forked: git push origin your-feature .
Buat Permintaan Tarik: Buka permintaan tarik di repositori asli. FORNEON um título claro, descreva sua alterações e envie o tarik permintaan.
Ikuti gaya pengkodean yang konsisten. Pastikan kode Anda didokumentasikan dengan baik, terutama jika Anda menambahkan contoh atau fitur baru.
Terima kasih telah mempertimbangkan berkontribusi pada tutorial React ini. Dedikasi Anda untuk membuat sumber ini lebih baik sangat dihargai. Mari belajar dan tumbuh bersama!
Jika Anda menemukan tutorial React ini berguna, pertimbangkan untuk memberikan bintang! Dukungan Anda sangat memotivasi dan membantu orang lain menemukan sumber ini. Terima kasih telah menjadi bagian dari komunitas kami dan Hap!
Bereaksi Perpustakaan Resmi
