Learning React Framework: Beginner-Friendly Practical Examples
Written on
Chapter 1: Introduction to React
React is an influential JavaScript library utilized for crafting user interfaces, particularly popular for the development of single-page applications. But how can one effectively utilize it?
To get started with React, simply include a single JavaScript file in your HTML. Facebook offers a CDN link that you can easily reference. This grants you access to the global React object, which provides various helpful methods.
The most recommended approach to develop React web applications is by employing JSX, a syntactic extension of JavaScript that allows you to write HTML-like code within your JavaScript files. JSX is compiled into standard JavaScript before the browser interprets it. However, using JSX is optional; you can stick to regular JavaScript if you prefer.
Section 1.1: Practical Examples to Learn React
Here are some hands-on examples that will assist you in mastering React.
Subsection 1.1.1: Hello World Example
Start with the traditional "Hello World" example by creating a simple React component that displays a greeting message.
// HelloWorld.js
import React from 'react';
function HelloWorld() {
return <h1>Hello, World!</h1>;
}
export default HelloWorld;
Subsection 1.1.2: Creating a Counter Application
Next, let’s develop a basic counter app with buttons for incrementing and decrementing the count.
// Counter.js
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
}
export default Counter;
Subsection 1.1.3: Building a Todo List
Let’s create a simple todo list app that allows users to add and remove tasks.
// TodoList.js
import React, { useState } from 'react';
function TodoList() {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const addTask = () => {
if (newTask.trim() !== '') {
setTasks([...tasks, newTask]);
setNewTask('');
}
};
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}>
{task} <button onClick={() => removeTask(index)}>Remove</button></li>
))}
</ul>
</div>
);
}
export default TodoList;
Subsection 1.1.4: Fetching Data from an API
Learn how to retrieve data from an API and display it within your React component.
// UserList.js
import React, { useState, useEffect } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
.then((response) => response.json())
.then((data) => setUsers(data));
}, []);
return (
<div>
<h2>User List</h2>
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>))}
</ul>
</div>
);
}
export default UserList;
Subsection 1.1.5: Implementing Routing with React Router
Set up basic routing using React Router for navigation between different pages within your application.
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
export default App;
These examples introduce several core concepts of React, such as component organization, state management, user input handling, and API interaction. Working through these practical applications will enhance your understanding of React's fundamental principles.
Chapter 2: Additional Resources
To further your knowledge, consider exploring video tutorials on React.
The first video, titled "React Tutorial for Beginners," provides a comprehensive introduction to the framework, making it an ideal starting point for newcomers.
The second video, "React JS Full Course for Beginners | Complete All-in-One Tutorial | 9 Hours," offers an extensive, in-depth exploration of React, perfect for those looking to master the library.