React Course: First Encounter with JavaScript

Hello! In this course, we will delve deeply into React and JavaScript. The React we will use is a component-based library that is very useful for building user interfaces (UI). At the same time, JavaScript is a language that is essential for understanding and utilizing React. We will start with the basic concepts of JavaScript for those who are new to it.

1. Understanding JavaScript

JavaScript is the most widely used programming language in web development. It has become one of the core technologies of the web, alongside HTML and CSS. With JavaScript, we can add dynamic features to web pages and allow for interaction with users.

1.1 History of JavaScript

JavaScript was first developed by Brendan Eich in 1995. Initially, it was used for writing simple scripts within browsers, but over time it began to be used for developing complex applications as well.

1.2 Basic Syntax of JavaScript

Variable Declaration: To declare a variable, we use var, let, and const. let and const have block scope, and const declares a constant that cannot be reassigned.
Data Types: JavaScript supports various data types. The main data types are as follows:
- Number
- String
- Boolean
- Object
- Array
- Null
- Undefined

Function: To define a function, we write as follows:

function sayHello(name) {
    return "Hello, " + name + "!";
}

2. Understanding React

React is a JavaScript library developed by Facebook, which is very useful for building user interfaces. React allows us to manage the UI by breaking it down into independent pieces (components) using a component-based structure.

2.1 Features of React

Component-Based: The UI of the application can be divided into multiple independent components, making it easier to manage.
Virtual DOM: React uses a virtual DOM to minimize changes to the actual DOM and optimize performance.
One-Way Data Binding: Data flows from parent components to child components, which makes the flow of data clear.

2.2 Installing and Setting Up React

To use React, you need to install Node.js and npm (Node Package Manager). After installation, you can create a new React project using the following command:

npx create-react-app my-app

Now, navigate to the project directory:

cd my-app

3. Creating Your First React Component

Now let’s create a React component. Basic React components are defined as JavaScript functions or classes. Here is an example of creating a functional component:

import React from 'react';

function HelloWorld() {
    return Hello, React!;
}

export default HelloWorld;

In the code above, we define a component called HelloWorld, which displays the phrase “Hello, React!” on the screen.

3.1 Using Components

To use the created component in another file, you can import it and use it as a JSX tag. For example:

import HelloWorld from './HelloWorld';

function App() {
    return (
        
            
        
    );
}

export default App;

4. Understanding JSX

In React, we use JSX (JavaScript XML) to define the UI. JSX is a syntax that allows you to write HTML within JavaScript code. Using JSX makes the code more readable.

4.1 JSX Syntax

JSX is similar to HTML, but you must use className instead of class.
You can insert JavaScript expressions into tags using curly braces ({}).
To return multiple JSX elements, they must be wrapped in a single parent element.

5. State Management and Lifecycle

In React, you can manage the state of a component and control the creation and destruction of a component through lifecycle methods.

5.1 State Management

import React, { useState } from 'react';

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

    return (
        
            Current Count: {count}
            
        
    );
}

export default Counter;

In the example above, we are managing the component’s state using the useState hook. The count increases each time the button is clicked.

5.2 Lifecycle Methods

Lifecycle methods are methods called during the creation, updating, and destruction of a component. In class components, you can use the following lifecycle methods:

class MyComponent extends React.Component {
    componentDidMount() {
        console.log('The component has been mounted.');
    }

    componentDidUpdate() {
        console.log('The component has been updated.');
    }

    componentWillUnmount() {
        console.log('The component will unmount.');
    }

    render() {
        return React Lifecycle;
    }
}

6. Event Handling

In React, handling HTML events is very straightforward. When handling events, you use properties like onClick or onChange.

function App() {
    const handleClick = () => {
        alert('The button has been clicked!');
    };

    return ;
}

7. Using External APIs

Let’s learn how to communicate with external APIs using React. For example, using fetch() to retrieve data.

import React, { useState, useEffect } from 'react';

function DataFetching() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return (
        
            {data.map(post => (
                {post.title}
            ))}
        
    );
}

export default DataFetching;

8. Conclusion

In this course, we explored the basic concepts of React and JavaScript in depth. React is one of the most important technologies in modern web development. In the future, you will learn more about how to utilize and optimize it. I hope the journey to learn React will be helpful for you!