Learn react series from 0 - Section 2: Build blog homepage with components

Learn react series from 0 - Section 1 The react-blog project has been created, and then starting from the home page, gradually add components for development.

Before starting, install the react developer tools

Before we start, let's install the browser react developer tools. When you open the react project before installation, there will be a prompt output in the console to let us install the developer tools. In order to better view React components and component props, state and other information.

First, we open the official website , https://react.dev/learn/react-developer-tools, and install it according to the browser you use. If you click on the chrome browser, you can install it directly on the extension page. After installation, close the developer tool and open it again with F12, and you can see the two new React developer tools in the last tab.

insert image description here

1. Home page structure analysis

Top logo navigation bar
Banner graphic description or carousel
List of latest articles
Sidebar
- Article leaderboard
- Latest Review Articles
footer

2. Preparation of style-related tools

How CSS variables var() work

Check the official website for CSS3 variables : https://www.w3school.com.cn/css/css3_variables.asp

First things first: CSS variables can have global or local scope.

Global variables can be accessed/used throughout the document, while local variables can only be used inside the selector that declares it.

To create a variable with global scope, declare it in the :root selector. The :root selector matches the root element of the document.

To create a variable with local scope, declare it in the selector that will use it.

:root {
    
    
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
    
     background-color: var(--blue); }

h2 {
    
     border-bottom: 2px solid var(--blue); }

.container {
    
    
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
    
    
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Sass preprocessor, install and use sass

To use sass in React, you first need to install node-sass. Open a terminal and enter the command

$ npm i [email protected] -D

Due to compatibility issues, we install version 4.14.1. Note that you need to check the corresponding node.js version.

If the installation is unsuccessful and an error is reported, you can try to uninstall the existing node-sass in the project first, and then install

$ npm uninstall node-sass
$ npm i [email protected] -D

I used to use a node.js18 version of the terminal that was too high. After reporting an error, I installed a node.js14 version using nvm and tried again.

Sass grammar tutorial: https://www.sass.hk/guide/, using sass can facilitate style nesting, define variables and other operations.

3. The next section begins to formally enter component development

It took a lot of time to install tools and node-sass, let’s go here first, and start component development in the next section!

More articles will continue to be recorded in this series
cover picture