Project address: github.com/zaleGZL/zal…

If you think the project is good, please click ‘STAR’ in the upper right corner. Thanks a lot! ~ (≧ del ≦) / ~

Online address: guozeling.cn/blogs

preface

I used to use Hexo + Next to set up my own blog, but after learning React recently, I was deeply attracted by its componentalized development idea. It happened that I had time during the winter vacation, so I set up my own blog with React. React is actually the view layer of MVC. To build a complete application, React is not enough. We also need other libraries or frameworks, such as Redux for managing data and React-Router for implementing front-end routing.

Technology stack

The front end

  • react
  • Axios: Asynchronous request
  • React-router-dom: indicates the front-end route
  • Redux: Manages the entire application data
  • Redux-thunk: Middleware for Redux, mostly used to process asynchronous actions
  • Styled – Components: A style of CSS in JS that enables writing native CSS in JS

Note: The React CSS framework is not used in the front page of the blog. I want to improve my ability to write CSS.

The back-end

  • koa

Blog backend is the use of Node.js development, is based on KOA and the use of Restful API architecture to achieve the perfect separation of the front and back end, back-end only need to be responsible for providing data, and the jump of the route, data rendering are implemented by the front end.

Project address: github.com/zaleGZL/zal…

Implemented functions

  • [x] Blog home page list display
  • [X] Blog content markdown
  • [x] Directory of blog content
  • [x] Blog categories and tags
  • [x] return to top
  • [x] response type
  • [x] About the page (currently used to put resume, I am a junior, seeking internship…)

TODO

  • [] Category page
  • [] TAB page
  • [] Markdown code highlights
  • [] Beautify the page style

Blog preview

Home page

Blog Details Page

Project summary

Next, I would like to briefly introduce some of my experiences and insights while doing blog projects.

React is just a view layer

After using React, I found that React itself is very simple. It is just a framework for a view layer that allows you to write HTML using JSX syntax, and its component-based development approach is novel, making components highly reusable. When building an application with many people, each of us is responsible for only one small component, but we also need to minimize the coupling between components, increase the cohesion of components, and eventually the components can build a large application.

The front-end routing

The front end is moving very fast, there are always new things, back when I was building back-end applications with Express, I knew there were back-end routing, which is requesting URL paths to return different content, to return different pages. When I first heard about front-end routing, I thought it was something new, but it wasn’t. Routing is implemented on the front end so that when a PAGE’s URL is refreshed, it does not request that URL, but instead renders different components based on different URLS.

<Switch>
  <Route exact path="/" component={BlogList} />
  <Route exact path="/blogs" component={BlogList} />
  <Route path="/blogs/:blogId" component={Blog} />
  <Route path="/tags" component={OnDevelopingContent} />
  <Route path="/categories" component={OnDevelopingContent} />
  <Route path="/about" component={ResumeContent} />
  <Route component={NotFoundContent} />
</Switch>
Copy the code

The code above is part of the routing component at the top level of my blog application, using the React-Router and rendering different components for different routes.

How do I manage application data

React state is designed to store application data and pass it to its child components. While state can be useful when building a small application, it’s important to think about how to manage application data when building a large application.

State actually has the following problems:

  • If the parent component wants to pass data to its descendant or descendant component, it needs the help of all intermediate components. Otherwise, it needs to use the React Context API to transfer data across components.

  • Data from a child component cannot be passed to a parent component or a higher-level component.

  • Application data is scattered too widely.

In Redux, there is only one unique global store, where the data of the entire application is stored. Any component can obtain the data needed by its own component from the Store, and can change the store by distributing actions. Changes to the store cause the corresponding component to be updated and the component to receive the updated data. Redux is actually implemented using the Context API,

const mapStateToProps = state= > ({
  blogCount: state.profile.blogCount,
  tagCount: state.profile.tagCount,
  categoryCount: state.profile.categoryCount
})

const mapDispatchToProps = dispatch= >
  bindActionCreators(
    {
      requestGetProfileInfo
    },
    dispatch
  )

export default connect(mapStateToProps, mapDispatchToProps)(ProfileCard)
Copy the code

As you can see from the code, ProfileCard gets the blogCount, tagCount, categoryCount, and a requestGetProfileInfo function for the profile object from the Store. RequestGetProfileInfo is actually used to change the store. The react-redux function is used to connect react to redux. Calling this function actually returns a higher-order component with a lot of performance optimizations inside (shouldComponentUpdate).

How should CSS be written

At the beginning of the development of the front-end, everyone advocated the separation of content and style, in fact, HTML and CSS separate writing, in HTML reference CSS resources.

But with the development of the front end, componentized development is more and more recognized, it seems to be a trend. But it runs counter to the traditional separation of content and style. In componentized development, we all advocate component cohesion-writing the HTML, CSS, and JavaScript associated with that component-is, in my opinion, the most appropriate way to write componentized development.

For the Style styled Components library, it is styled as CSS in JS. For the style styled Components library, the style styled Components library is styled as CSS in JS.

Inline styles in components

const divStyle = {
  color: 'blue'.backgroundImage: 'url(' + imgUrl + ') '};function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}
Copy the code

This is the same with inline styles in HTML. I think it’s fine if a component only needs to change a few styles, but it’s not appropriate to write a lot of styles.

External style

reboot.css

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0 0 100px;
    padding-top: 50px;
}

a {
    text-decoration: none;
    cursor: pointer;
}
Copy the code

index.js

import './reboot.css'
Copy the code

When the page is loaded, it can be found in the external stylesheet.

But there are many problems with writing this way:

  • Conflicting names
  • Poor component independence
  • Unable to load on demand

CSS in JS

Personally, I prefer styled- Components, so let’s look at the official example first.

// Create a Title component and it will render the H1 tag and have the following styles
const Title = styled.h1` the font - size: 1.5 em. text-align: center; color: palevioletred; `;

// Create a Wrapper component and it will render the section tag and have the following styles
const Wrapper = styled.section` padding: 4em; background: papayawhip; `;

// Component rendering
render(
  <Wrapper>
    <Title>
      Hello World, this is my first styled component!
    </Title>
  </Wrapper>
);
Copy the code

Styled components The core idea of styled components is to bind the style to the corresponding component, generating a content hash value by calculating the CSS style content and using this value as the value of the component className, which perfectly solves the naming conflict problem.

Styled Components, of course, are more powerful than that. It also enables inheritance of CSS rules, extensions, dynamic styling calculations based on props passed by the parent component, and so on.

CSS in JS seems like a brand new option, and I personally like it.