fullstackopen trip(updating)fullstackopen trip (updating)
source: fullstackopen.com
part 0
这一部分讲了从原始的HTML网页运行过程（向服务器发送HTTP请求，服务器处理POST请求再返回一个302状态码，这个状态码又要求浏览器重定向对Location执行一个HTTP GET请求，再获取HTML，CSS，JS...），到如今的全栈开发在浏览器执行javascript程序而不需要进一步的HTTP请求。
全栈开发到底指什么：往往一个web服务包含前端，就是最接近用户的一端，这个在最上层；还包括一个后端，就是服务器上的服务，监听前端的请求并提供特定的功能；往往在后端的下面还有一个数据库。这样就形成了一个三层的堆叠结构（stack），我们就把这称为全栈。javascript的出现，使得全栈能够用同一种编程语言来开发，这使开发进入了一个新的维度。
反应之旅开始了
在React中我们不在index中代码，准确的说index.html文件不包含任何浏览器中可见的HTML标记。所有需要渲染的内容都定义为React组件，components--定义为 UI building blocks还是很准确的。
使用箭头函数创建函数，()表示不包含任何参数：
const APP = () => {
return (
<div>
<p>Hello world</p>
</div>
)
}这里组件被定义为一个function，function可以包含任意种类的JavaScript代码，不一定只是返回这些html。然后现在编写的这个文件 App.jsx 不是javascript，他是javascript的一个语法扩展，允许我们在其中使用类似html的标记，在编译时会被自动编译为javascript。记得JSX中每个标签都需要闭合。任何位于花括号内的javascript代码都会被执行，也就是说如果某个值是javascript表达式的结果，记得把它用花括号括起来。
永远记得在代码中编写console.log()将信息打印到控制台，this is worthwhile。还有React组件名称的首字母必须大写。还有React的子元素必须是原始值，例如数字或字符串，不能是对象 object
学习javascript语法
常用的函数：
'const'定义常量，值不能再改；'let'定义一个普通的变量。 'forEach'接收一个使用箭头函数定义的函数作为参数
t.forEach(value => {
console.log(value) // numbers 1, -1, 3, 5 are printed, each on its own line
}) 'concat()' 返回一个包含新元素的新数组 'map()'
对象、函数：
- 如何定义对象--用花括号列出对象的属性值。
- 如何引用对象--用'.'或者方括号来引用。
- 箭头函数像这样 'p => p * p' 不加括号直接使用的时候就是直接返回表达式的值。
- 如何引用函数--在函数声明中给出函数名；使用函数表达式：
const average = function(a, b) {
return (a + b) / 2
}
#箭头语法就是：
const average = (a, b) => (a + b) / 2
const result = average(2, 5)
// result is now 3.5
part 0
This part covers the evolution from how the original HTML web pages worked (sending an HTTP request to the server, the server processing the POST request and returning a 302 status code, which then requires the browser to redirect by making an HTTP GET request to the Location, and then fetching HTML, CSS, JS...), to today's full-stack development, where JavaScript programs run in the browser without further HTTP requests.
What exactly does full-stack development mean? A web service often includes a frontend, the end closest to the user, which sits at the top layer; it also includes a backend, a service on the server that listens to requests from the frontend and provides specific functionality; and often below the backend there is also a database. This forms a three-layer stack, and this is what we call full stack. The emergence of JavaScript made it possible to develop the full stack using the same programming language, which took development into a new dimension.
The React journey begins
In React, we don't write code in index; more precisely, the index.html file does not contain any HTML markup visible in the browser. Everything that needs to be rendered is defined as a React component; components—defined as UI building blocks—is still quite accurate.
Functions are created using arrow functions; () means it takes no parameters:
const APP = () => {
return (
<div>
<p>Hello world</p>
</div>
)
}Here the component is defined as a function; a function can contain any kind of JavaScript code, not necessarily just return this HTML. Also, the file App.jsx that we are writing now is not JavaScript; it is a syntax extension of JavaScript that allows us to use HTML-like markup inside it, and it is automatically compiled into JavaScript at compile time. Remember that every tag in JSX must be closed. Any JavaScript code inside curly braces will be executed; that is, if a value is the result of a JavaScript expression, remember to wrap it in curly braces.
Always remember to write console.log() in your code to print information to the console; this is worthwhile. Also, the name of a React component must start with a capital letter. Also, React children must be primitive values, such as numbers or strings; they cannot be objects.
Learning JavaScript syntax
Commonly used functions:
'const' defines a constant whose value cannot be changed; 'let' defines an ordinary variable. 'forEach' takes a function as its parameter, defined using an arrow function
t.forEach(value => {
console.log(value) // numbers 1, -1, 3, 5 are printed, each on its own line
}) 'concat()' returns a new array containing the new elements 'map()'
Objects and functions:
- How to define an object -- use curly braces to list the object's property values.
- How to reference an object -- use '.' or square brackets.
- An arrow function like 'p => p * p', when used directly without parentheses, simply returns the value of the expression.
- How to reference a function -- give the function name in a function declaration; use a function expression:
const average = function(a, b) {
return (a + b) / 2
}
#箭头语法就是：
const average = (a, b) => (a + b) / 2
const result = average(2, 5)
// result is now 3.5