//Fly The Best

0%

React Hooks Note

Posted on Edited on

Frame

  • React
  • Gastby
  • Contentful
  • Netlify
  • Styled Components
  • React Hooks

React Hooks

React is by far the most popular javascript framework for modern web development. Hooks make React even simpler by allowing you to create functional components using states without writing complex classes. Think of Hooks as plugins, where you can update your states with a single line of code. The main ones provided are useState and useEffect for controlling the lifecycle of your component, replacing the componentDidMount and componentDidUpdate altogether.

参考

Styled Components

CSS by itself is the simplest way to create layouts. But with the components approach where you want things to be reusable and adaptive, it becomes hard not to rely on frameworks like Sass and javascript inline styling. That’s where Styled Components come in. With it, you can write cleaner, reusable CSS, without extremely long class names or a dedicated css file for each component, and with the power of nesting in Sass and scripting with React Props.

1
2
3
4
5
6
7
8
9
10
11
12
13
<Wrapper>Content</Wrapper>

const Wrapper = styled.div`
	display: grid;
`

// Replaces this
<div className="long-class-name">Content</div>

// Another CSS file
.long-class-name {
	display: grid;
}

Gatsby

Gatsby is a framework built on top of React with essential features such as pages, templates, search engine optimization, etc. Think of it as a Wordpress for React where you can easily pick pre-made templates and plugins if you choose to. It has useful plugins for Contentful and Netlify.