Merge pull request #20 from PaladinKnightMaster/draft

add react course 4-1

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Part1/Lesson.md

@@ -0,0 +1,55 @@
+# Unveiling JavaScript: Navigating APIs and Fetch API in React
+
+## Topic Overview and Actualization
+Hello! Today, we're going to uncover how web apps fetch data using APIs and the Fetch API in React. APIs retrieve data from systems, much like asking a waiter for takeout, while the `Fetch API`, a promise-based mechanism, initiates network requests, similar to dialing for a delivery.
+
+## Understanding APIs
+In essence, APIs act as messengers. They transport your request to a system and deliver the data you have ordered, much like how ordering a pizza over the phone works.
+
+```javaScript
+# Requesting weather data from the WeatherAPI - it's as simple as making a call!
+fetch('https://api.weatherapi.com/v1/current.json?q=Rome')
+```
+
+## Introduction to Fetch API
+The `Fetch API` requests data and then processes it when it arrives, similar to awaiting your pizza delivery.
+
+```javaScript
+fetch('https://api.weatherapi.com/v1/current.json?q=Rome')
+  .then(response => response.json())
+  .then(data => console.log(data));
+```
+This process requests data from an API and converts it into a usable format — JSON.
+
+## Fetch API in React
+Now, let's see how React, which uses components to divide the UI, utilizes the `Fetch API`. In functional components, the `useState` hook manages the data, often displaying a "Loading…" message while the data is being fetched.
+
+```javaScript
+function WeatherComponent() {
+  const [loading, setLoading] = useState(true);
+  const [weatherData, setWeatherData] = useState(null);
+  useEffect(() => {
+    fetch('https://api.weatherapi.com/v1/current.json?q=Rome')
+      .then(response => response.json())
+      .then(data => {
+        setWeatherData(data);
+        setLoading(false);
+      });
+  }, [])
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+  return (<div>
+      <h1>Weather in {weatherData.location.name}</h1>
+      <p>{weatherData.current.condition.text}</p>
+    </div>
+  )
+}
+export default WeatherComponent;
+```
+The `useEffect` hook performs operations, such as fetching data, which cannot be done during rendering.
+
+Once the data has been fetched, it is stored in the `weatherData` state variable. A "Loading…" message is displayed until the data has been fetched; afterward, the data is shown. This check ensures that the data is displayed only once it has been fetched and is ready to be viewed.
+
+## Lesson Summary and Looking Forward
+Bravo! We have explored APIs, the `Fetch API`, and their use in React for retrieving and displaying data. Remember to apply these lessons in upcoming practice exercises. Keep practicing for mastery in handling APIs in React. Happy coding!

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Part1/Practices/Practice1/App.jsx

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+function WeatherForecast() {
+  const [forecast, setForecast] = useState({ temp: '', summary: '' });
+
+  useEffect(() => {
+    fetch('https://api-regional.codesignalcontent.com/weatherManager/getWeather?lat=41.902782&lng=12.496366')
+      .then(response => response.json())
+      .then(data => setForecast({ temp: data.weather.temperature, summary: data.weather.summary }));
+  }, []);
+
+  return (
+    <p>The weather in Rome is {forecast.summary} with a temperature of {forecast.temp}°C.</p>
+  );
+}
+
+export default WeatherForecast;

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Part1/Practices/Practice1/intro.md

@@ -0,0 +1,3 @@
+# Fetching Rome's Weather in React
+
+Have you ever wondered what the weather is like in the ancient city of **Rome** right now? The given code fulfills that curiosity - it fetches the current weather conditions in Rome and displays them! All set and ready to go; simply click `Run` to see the information displayed!

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Part1/Practices/Practice2/App.jsx

@@ -0,0 +1,51 @@
+```
+import { useState, useEffect } from 'react';
+
+function ClimateData() {
+  const [climate, setClimate] = useState({ temperature: 0, summary: 'Loading...' });
+
+  useEffect(() => {
+    fetch('https://api-regional.codesignalcontent.com/weatherManager/getWeather?lat=41.902782&lng=12.496366')
+      .then(response => response.json())
+      .then(data => {
+        // Update the climate state to have 'city' field and take the value from data.city
+        setClimate({ temperature: data.weather.temperature, summary: data.weather.summary });
+      });
+  }, []);
+
+  return (
+    <div>
+      {/* Make sure to show the city name here too */}
+      <p>Temperature: {climate.temperature}°C</p>
+      <p>Conditions: {climate.summary}</p>
+    </div>
+  );
+}
+
+export default ClimateData;
+```
+import { useState, useEffect } from 'react';
+
+function ClimateData() {
+  const [climate, setClimate] = useState({ city: '', temperature: 0, summary: 'Loading...' });
+
+  useEffect(() => {
+    fetch('https://api-regional.codesignalcontent.com/weatherManager/getWeather?lat=41.902782&lng=12.496366')
+      .then(response => response.json())
+      .then(data => {
+        // Update the climate state to have 'city' field and take the value from data.city
+        setClimate({ city: data.city, temperature: data.weather.temperature, summary: data.weather.summary });
+      });
+  }, []);
+
+  return (
+    <div>
+      {/* Make sure to show the city name here too */}
+      <p>City: {climate.city}</p>
+      <p>Temperature: {climate.temperature}°C</p>
+      <p>Conditions: {climate.summary}</p>
+    </div>
+  );
+}
+
+export default ClimateData;

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Part1/Practices/Practice2/intro.md

@@ -0,0 +1,3 @@
+# Adding Wind Speed to Climate Data
+
+Right on track, Galactic Pioneer! Your mission is to include the city name by taking it from the API result. Check out the comments for more details.

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Part1/Practices/Practice3/App.jsx

@@ -0,0 +1,46 @@
+/*
+import { useState, useEffect } from 'react';
+
+function ClimateDataComponent() {
+  const [climate, setClimate] = useState({ temperature: null, summary: '' });
+
+  useEffect(() => {
+    fetch('https://api-regional.codesignalcontent.com/weatherManager/getWeather?lat=41.902782&lng=12.496366')
+      .then(response => response.json())
+      .then(data => setClimate(data)); // Can you spot the problem here? Note, that the JSON returned from API looks as follows
+      // {"city":"Rome","location":{"lat":"41.902782","lng":"12.496366"},"weather":{"temperature":25,"summary":"Foggy"}}
+  }, []);
+
+  return (
+    <div>
+      <h1>Climate Details</h1>
+      <p>Temperature: {climate.temperature}°C</p>
+      <p>Summary: {climate.summary}</p>
+    </div>
+  );
+}
+
+export default ClimateDataComponent;
+*/
+import { useState, useEffect } from 'react';
+
+function ClimateDataComponent() {
+  const [climate, setClimate] = useState({ temperature: null, summary: '' });
+
+  useEffect(() => {
+    fetch('https://api-regional.codesignalcontent.com/weatherManager/getWeather?lat=41.902782&lng=12.496366')
+      .then(response => response.json())
+      .then(data => setClimate(data.weather)); // Can you spot the problem here? Note, that the JSON returned from API looks as follows
+      // {"city":"Rome","location":{"lat":"41.902782","lng":"12.496366"},"weather":{"temperature":25,"summary":"Foggy"}}
+  }, []);
+
+  return (
+    <div>
+      <h1>Climate Details</h1>
+      <p>Temperature: {climate.temperature}°C</p>
+      <p>Summary: {climate.summary}</p>
+    </div>
+  );
+}
+
+export default ClimateDataComponent;

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Part1/Practices/Practice3/intro.md

@@ -0,0 +1,3 @@
+# Disappearing Climate Details
+
+Galactic Pioneer, your mission is to make the climate data reappear! The **climate details** are supposed to show on the screen, but there seems to be a glitch. Can you spot and fix the issue to help the data display correctly?

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Part1/Practices/Practice4/App.jsx

@@ -0,0 +1,45 @@
+/*
+import { useState, useEffect } from 'react';
+
+function WeatherApp() {
+  const [weather, setWeather] = useState({ temperature: '', summary: '' });
+
+  useEffect(() => {
+    // TODO: Use fetch to get weather data from the given URL and then update the state with the new data.
+    // Use the following API URL: https://api-regional.codesignalcontent.com/weatherManager/getWeather with query parameters lat=41.902782 and lng=12.496366
+  }, []);
+
+  return (
+    <div>
+      <h1>Weather Status</h1>
+      <p>Temperature: {weather.temperature}°C</p>
+      <p>Condition: {weather.summary}</p>
+    </div>
+  );
+}
+
+export default WeatherApp;
+*/
+import { useState, useEffect } from 'react';
+
+function WeatherApp() {
+  const [weather, setWeather] = useState({ temperature: '', summary: '' });
+
+  useEffect(() => {
+    // TODO: Use fetch to get weather data from the given URL and then update the state with the new data.
+    // Use the following API URL: https://api-regional.codesignalcontent.com/weatherManager/getWeather with query parameters lat=41.902782 and lng=12.496366
+    fetch('https://api-regional.codesignalcontent.com/weatherManager/getWeather?lat=41.902782&lng=12.496366')
+      .then(response => response.json())
+      .then(data => setWeather(data.weather));
+  }, []);
+
+  return (
+    <div>
+      <h1>Weather Status</h1>
+      <p>Temperature: {weather.temperature}°C</p>
+      <p>Condition: {weather.summary}</p>
+    </div>
+  );
+}
+
+export default WeatherApp;

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Part1/Practices/Practice4/intro.md

@@ -0,0 +1,3 @@
+# Fetching Cosmic Weather Data
+
+Superb exploration, Stellar Navigator! Let us now steer our ship toward fetching the current weather data. Your mission is to command our fetch probe to retrieve the data from the **cosmic API** and call upon the **React state** to record our findings. Remember, we are securing our data right now, so focus on the fetch call and processing the **JSON** response.

Front-End Engineering/Front-End Engineering with React/Course4. Understanding and Using APIs in React/Readme.md

@@ -0,0 +1,7 @@
+# Understanding and Using APIs in React
+
+Immerse yourself in interactive web development as you fetch and render dynamic data in React apps using APIs. Update component states with data from APIs and see it come alive with JSX.
+
+5 lessons
+
+24 practices