React Course: Creating a React App

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!