สรุป React Bangkok 2.1.0

ครั้งนี้มี 2 หัวข้อ คือเกี่ยวกับ Redux และ Atomic Design ด้วยภาษาอังกฤษอันอ่อนแอผมนั้นจับใจความได้ไม่มาก บางส่วนอาจจะเสริมความรู้ส่วนตัวไปด้วยนิดหน่อยไม่ตรง 100%

เริ่มต้นด้วยท่านแรก

เรื่อง Business logic in redux applications

Speaker: Patrick Oladimeji

Position: software engineer

Company: ThoughtWorks

Core Redux

• Store เดียว ใช้งานได้สะดวก
• Actions is pure object สำหรับ เปลี่ยนแปลงค่าใน Store
• Reducers
• Middleware

Redux Add-ons

• Middleware Implementations -> redux-saga, redux-thunk, redux-observable
• redux-saga คือ Add-ons ของ redux ที่จะมาช่วยในเรื่องการ Fetch ข้อมูลต่างๆ จัดการเกี่ยวกับ Async/Await

React-Redux

• connect — ช่วยจัดการ higher-order component
• mapStateToProps — ส่งค่าใน Store เข้าไปยัง Local state
• mapDispatchToProps — ส่ง Function ที่ใช้ในการเปลี่ยนแปลงค่าต่างๆใน Store เข้าไปยัง Local state

How about the business logic

• where do we put it?
• who should be aware of it?

Example of business logic

• Calculation routines
• Validation routines
• Authorization

The where is easy

• Create a folder (call it ‘business-foo’)
• Structure it by business objects

— — — — — — — จบสำหรับหัวข้อแรก — — — — — — -

เรื่อง Atomic Design with Next.js

Speaker: Pallop Chao (Ham)

Position: Software Engineer

Company: Jitta

What is Next.js?

• อีก Version นึงของ create-react-app
• React Framework

Why Next.js?

• zero-configuration ลงเสร็จใช้งานได้ทันที
• build-in server-rendering

My Opinion about React

• หากใช้ create-react-app จะสังเกตว่า react มีการอัพเดตตลอดเวลาจะเกิด Break change ได้ง่าย
• React ทำ Server-side-rendering ได้ยาก Config เยาะ

Project Structure

• Componentes ถ้ามี Components ให้ใส่ไว้ในนี้
• Pages ให้ใส่ไว้ใน Pages
• พอเราสร้างไฟล์ในที่ๆกำหนด สิ่งที่ได้ต่อมาคือ routing

Routing

• 1 file = 1 page
• Subpath — nested file
• Maintenance — rename over

Async loading

• Next.js ทำให้แล้วโดยมี function ให้ใช้งาน getIntialProps()

HMR

• Hot Module Replacement (HMR) เวลาแก้ไขไฟล์จะทำการ Reload ให้เรา
• เวลาแก้ไขไฟล์จะ reload แต่ state จะไม่เปลี่ยน ทำให้ test หรือ dev ได้สะดวก

Document

• เขียนไว้ค่อนข้างดี
• https://learnnextjs.com ไว้สำหรับเรียน
• Directory examples in Github มีไฟล์ตัวอย่างไว้ให้

Note

• Support ES6

หลังจากนี้เป็นการทดลองสร้าง project จาก next.js ซึ่งผมไม่ได้จดอะไร

ทำตาม https://github.com/zeit/next.js/#setup นั่นเอง

หลังจากสร้าง Project เสร็จลง npm install — save isomorphic-unfetch ตาม

เพื่อใช้งาน fetch ใน next.js

จากนั้นสร้าง Folder /pages และสร้างไฟล์ /pages/page.js

Example code

const Page = () => {
    <h1>Hello Next.js</h1>
}

export default Page

Example code (fetch data)

const Page = ({ name, aliases }) => {
  <div>
    <h1>{name}</h1>
    {aliases.map((value) => {
      return <div>{value.alias}</div>
    })}
  </div>
}

Page.getInitialProps = async () => {
  const response = await fetch('[url]')
  const data = await response.json()
  return data
}

export default Page

Atomic Design

• ประกอบด้วย 5 ส่วน
• ATOMS — คือพวก Label เป็นส่วนที่เล็กที่สุด
• MOLECULES — คือ Group of ATOMS หรือพวกสิ่งเล็กๆอย่าง Label Input มารวมกันเป็น Molecules ได้
• ORGANISMS — คือ Group of Molecules เช่น Nav-bar Site-nav ประกอบด้วย เมนูหลายๆเมนู จัดการ state ดึงข้อมูล
• TEMPLATES — คือ Group of Organisims คือพวก Layouts ต่างๆว่า มี Header title content manu navbar
• PAGES — คือ Templates ที่เอา Data มาใส่
• คือแนวคิดเอาไว้ประยุกต์ใช้กับอะไรก็ได้

Similar with Next.js

• Atomic Design มีความคล้ายกับ Structure ของ Next.js
• Atom/Molecules อยู่ใน /components
• Organisms อยู่ใน /organisms แยกออกมาจาก component ไปเลย
• Templates อาจจะเอาไว้ใน /layouts หรือ /pages ก็ได้ถ้า code ยังอ่านง่าย
• Pages อยู่ใน /pages

Case study www.twitter.com

• ลองแยก Layouts ต่างๆของ twitter