Critical Questions
What is React all about?
- React does 2 things for us : React (1) displays HTML and (2) changes that HTML when the user does something. // by clicking, dragging...
- Even though we use React, it's still HTML that is causing content to appear on the screen of the user's browser.
- Thus we can kind of think of React as being like a wrapper around HTML of sorts.
Why do we tell React to show HTML?
function App() {
return(
<div>
<h3>Hello!</h3>
<div> // JSX
)
}- We tell React what content we want to show on the screen by creating functions that return JSX (similar to html but not the same).
- JSX is what tells react about the individual elements we want to create on the screen and show it to the user.
- So we create the function above that return JSX, and we pass them(stuffs within JSX) off to React. // 그리고 리액트는 그 요청을 받아 그대로 html 만들어서 보여 줌.
React Components
- Functions that return JSX (stuff that looks like HTML)
- Tells React what to show on the screen.
- A project can have many components that work together.
import "./styles.css";
import React, { useState } from "react";
import Field from "./components/field";
import Translate from "./components/translate";
import Languages from "./components/languages";
export default function App() {
const [language, setLanguage] = useState("es");
const [text, setText] = useState("");
return (
<div>
<Field onChange={setText} />
<Languages language={language} onLanguageChange={setLanguage} />
<hr />
<Translate text={text} language={language} />
</div>
);
}- 그리고 App.js 파일은 다른 많은 js 파일을 끌고와서 종합해서 보여줌
JSX
- JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법
- Tell React to create a normal HTML elements
ex. div, input, button.. - Tell React to show another component
ex. Field, Language, Translate...
How does a React app start up?
1. All of your projects JS files are 'bundled' together into a single file, then placed onto a server
- bundle.js (all js files combined) contains all the code for your entire application.
- Once the bundle has been created, it's then placed on a server where users can access it from their browser.
2. User makes a request to the server and gets an HTML file + the bundle
- 첫 번째 프로세스 : 브라우저가 서버에 request 하면 서버가 index.html을 줌
- 두 번째 프로세스 : 브라우저가 서버에 request 하면 서버가 bundle.js를 줌
React Startup Process (All inside the index.html file)
- (1) Find the div with id of 'root' in the DOM
- (2) Tell React to take control of that element
- (3) Tell React to get JSX from the App component, turn it into HTML, and show it in the root.
<!-- index.html -->
<html>
<head></head>
<body>
<div id="root> <!-- (1) --> </div>
</body>
</html>
// bundle.js
const rootElement = document.getElementById('root')
const root = createRoot(rootElement)
root.render(<App />)What are the 'useState' functions?
- 'useState' is a function that works with React's "state" system.
- State is like a variable in React.
- State is used to store data that changes over time.
- Whenever state changes, React automatically updates content on the screen.
Our app had three pieces of data that changed
- The text the user typed into the text input
- Language the user wanted to translate text to
- The result of the translation
import "./styles.css";
import React, { useState } from "react";
import Field from "./components/field";
import Translate from "./components/translate";
import Languages from "./components/languages";
export default function App() {
const [language, setLanguage] = useState("es");
const [text, setText] = useState("");
return (
<div>
<Field onChange={setText} />
<Languages language={language} onLanguageChange={setLanguage} />
<hr />
<Translate text={text} language={language} />
</div>
);
}How did the text get translated to another language?
Text from input & Selected Language
↓
[Translated Component]
-Did the text or language change? → If so, make a network request with the new text/language → Google Translate API
Working Abroad ...