React is a JavaScript library developed by Facebook, optimized for building user interfaces. It is primarily used for developing single-page applications (SPAs) and allows for efficient work with reusable UI components. In this course, I will explain in detail how React apps work.

1. What is React?

React is a component-based library designed to simplify the construction of complex applications. The core idea of React is to create “components,” small abstract entities that make up the UI.

2. Basic Concepts of React

2.1. Components

Components are independent pieces that make up the UI as part of React. Each component can have its own state and properties, allowing them to perform various actions.

2.2. State and Props

React builds dynamic UIs through a component’s “state” and “props.” The state is managed within the component and changes according to user interactions. In contrast, props are the data passed from a parent component to a child component.

3. Structure of a React App

A React application consists of multiple components. Each component can contain other components, enabling the construction of complex UIs. Typically, a single root component encompasses all child components.

3.1. Example Structure

/App
  ├─ /Header
  ├─ /Main
  │   ├─ /Sidebar
  │   └─ /Content
  └─ /Footer
    

4. How React Apps Work

4.1. DOM and Virtual DOM

One of the most significant features of React is the concept of “Virtual DOM.” React uses Virtual DOM to optimize performance rather than directly accessing the real DOM. The Virtual DOM is a virtual representation of the DOM structure in memory, comparing differences with the actual DOM to minimize updates.

4.2. Process of Operation

1. When a React component is rendered, a Virtual DOM is created.
2. When the state changes, a new Virtual DOM is generated.
3. Previous and new Virtual DOMs are compared (diffing).
4. Only the changed parts are updated in the real DOM.

4.3. Example Code

import React, { useState } from 'react';

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

    const increment = () => {
        setCount(count + 1);
    };

    return (
        

            
Current Count: {count}
            Increment
        
    );
}
    

5. State Management

State management is an essential part of React applications. For complex state management, tools like Redux and MobX can be utilized.

5.1. State Management Using Redux

Redux is a pattern that centrally manages the entire state of the application. All states are stored in a store, and components are connected to this store to exchange data.

5.2. Example Code

import { createStore } from 'redux';

// Initial state
const initialState = {
    count: 0
};

// Define reducer
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + 1 };
        default:
            return state;
    }
};

// Create store
const store = createStore(reducer);
    

6. Deploying React Applications

React applications are transformed into static files through a build process and can be deployed on a web server. Generally, create-react-app can be used for easy setup for deployment.

6.1. Deployment Method

1. Build with the command npm run build.
2. Upload the resulting /build directory to the web server.

7. Conclusion

React is a powerful and flexible UI library that allows for easy management of complex applications through component-based programming. The use of Virtual DOM significantly enhances the performance of DOM updates, and state management libraries enable more systematic state management. Explore new possibilities in web application development with React.

8. References

• Official React Documentation
• Official Redux Documentation
• Create React App Documentation

React is currently one of the most popular JavaScript libraries, offering an efficient and flexible way to build user interfaces (UI). This course will guide you step-by-step in creating a simple web application using React. By completing this course, you will understand the fundamental concepts of React and be equipped to build real-world applications.

1. What is React?

React is an open-source JavaScript library developed by Facebook. It is primarily used for creating single-page applications (SPA). React provides a component-based structure that enhances code reusability and simplifies application maintenance. In addition, it can maximize performance by using a virtual DOM.

2. Key Features of React

• Component-based Structure: React divides the UI into independent components. Each component can have its own state and properties.
• Virtual DOM: React processes changes in the virtual DOM before accessing the actual DOM, significantly improving performance.
• Unidirectional Data Flow: Data flows from parent components to child components. This clarifies the data flow and makes debugging easier.
• JSX: React provides JSX, which allows mixing JavaScript and HTML, making the code more readable.

3. Installing React

To use React, you first need to set up the development environment. Let’s proceed with the installation as follows.

3.1 Installing Node.js and npm

React runs in a Node.js environment. Therefore, you must first install Node.js and npm (Node Package Manager). Node.js can be downloaded from the official website.

3.2 Creating a New Project with Create React App

Now, let’s use Create React App to easily create a React project. Type the following command in the terminal to create a new project:

npx create-react-app my-app

When you enter the above command, a new React project folder named “my-app” will be created. Once the creation is complete, use the following command to navigate to the project folder.

cd my-app

3.3 Running the Application

Now let’s run the application. Enter the following command:

npm start

The browser will open automatically, and you can check the application at http://localhost:3000.

4. Basic Concepts of React

To understand React, you need to learn a few basic concepts.

4.1 Components

Components are the basic building blocks of a React application. Each component can include HTML, CSS, and JavaScript. Here is an example of a simple functional component:

function Welcome() {
    return <h1>Hello, World!</h1>;
}

4.2 State Management

In React, state is a way to manage a component’s data. Whenever the state changes, React re-renders the component.

Here’s how to define and update the state:

import React, { useState } from 'react';

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

    return (
        <div>
            <p>Clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

4.3 Props

Props are the way to pass data between components. Information can be passed from parent components to child components.

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

function App() {
    return <Greeting name="Alice" />;
}

5. Creating a React App

Now let’s dive into creating a React app. This project will be about making a simple To-Do List application.

5.1 Project Structure

First, let’s define the necessary components. Our project will have the following structure:

• src/
  • components/
    • Todo.js
    • TodoList.js
  • App.js
  • index.js

5.2 Creating the Todo Component

Create a file named Todo.js and define a component that displays each to-do item.

import React from 'react';

function Todo({ todo, onToggle }) {
    return (
        <div onClick={onToggle}>
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
                {todo.text}
            </span>
        </div>
    );
}

export default Todo;

5.3 Creating the TodoList Component

Create a file named TodoList.js and make a list that displays multiple Todo components.

import React from 'react';
import Todo from './Todo';

function TodoList({ todos, onToggle }) {
    return (
        <div>
            {todos.map(todo => (
                <Todo key={todo.id} todo={todo} onToggle={() => onToggle(todo.id)} />
            ))}
        </div>
    );
}

export default TodoList;

5.4 Updating the App Component

In the App.js file, let’s add logic to manage the state and render the TodoList.

import React, { useState } from 'react';
import TodoList from './components/TodoList';

function App() {
    const [todos, setTodos] = useState([
        { id: 1, text: 'Learn React', completed: false },
        { id: 2, text: 'Practice Frontend Development', completed: false },
    ]);

    const toggleTodo = (id) => {
        const updatedTodos = todos.map(todo =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
        );
        setTodos(updatedTodos);
    };

    return <TodoList todos={todos} onToggle={toggleTodo} />;
}

export default App;

5.5 Finally Running the App

After writing the code above, run the application again, and a to-do list will be displayed, allowing you to click each item to toggle its completion status.

6. Optimizing React Apps

Optimizing the application is an important task to enhance user experience and improve performance. Here are some ways to optimize React apps:

• React.memo: You can memoize components to avoid unnecessary re-renders.
• useCallback: Memoizing functions prevents child components from re-rendering unnecessarily.
• useMemo: Memoizing computationally expensive values optimizes performance.

7. Using React Router

To implement multiple pages in a React application, you can use React Router. Here’s how to install React Router and set up basic routing:

npm install react-router-dom

7.1 Setting Up Basic Routing

Edit the App.js file to set up routing.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// Import other components
import Home from './components/Home';
import About from './components/About';

function App() {
    return (
        <Router>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
}

8. Conclusion

In this course, we learned how to create a simple to-do list application using React. Through the process of understanding the basic concepts of React, creating components, managing state, and setting up routing, you probably felt the appeal of React. As a powerful and flexible library, React has limitless potential for various projects. I hope you continue to develop your React skills through more projects.

Appendix: Additional Resources

Here are some materials where you can study the concepts mentioned in this course more deeply:

• Official React Documentation
• Official React Router Documentation
• Official Redux Documentation

Thank you. I hope your learning of React is enjoyable and beneficial!