Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Um amigo me contou que havia se formado e começou um estágio.Mas a empresa ainda usaVista, o líder disse que teria permissão para usá-lo depois de um tempoReagirAntes de fazer um projeto, aprenda primeiro você mesmo.

A propósito, encontrei alguns documentos para ele, já que também escrevo um blog, posso também escrever um, espero que possa ajudar as pessoas necessitadas.

Índice

1 instalação de projeto

1.1 Selecione o diretório e inicie o terminal

1.2 Instale o comando create-react-app

1.3 Criar projeto

1.4 Visualizar arquivos de diretório

1.5 Inicie o projeto

2 Bibliotecas de terceiros que com certeza serão utilizadas

2.1 js-ferramenta-caixa-grande

2.1.1 Classe de hora e data

2.1.2 Classe de loja virtual

2.1.3 Classe de evento

2.1.4 Classe numérica

2.1.5 Classe String

2.1.6 Classe de verificação regular

2.1.7 classe ajax

2.1.8 classe de dados de dados

2.1.9 classe de navegador do navegador

2.2 menos ou pré-processador atrevido

2.3 biblioteca de solicitação de axios

2.4 Biblioteca de IU

---

1 instalação de projeto

1.1 Selecione o diretório e inicie o terminal

Você pode encontrar uma pasta em seu computador como diretório para praticar este projeto React e, em seguida, inserir "cmd" na URL da pasta, o terminal aparecerá e você também pode especificar o diretório de destino:

 

É aqui que você insere “cmd” e pressiona Enter para abrir a janela pop-up do terminal.

1.2 Instale o comando create-react-app

Execute o seguinte comando, -g significa instalá-lo globalmente

npm install -g criar-react-app

1.3 Criar projeto

Por exemplo, queremos criar um arquivo chamado js-ferramenta-caixa-grande-react projeto, então você pode executar o seguinte comando:

criar-reagir-aplicativo js-ferramenta-caixa-grande-react

O terminal será então instalado,A instalação pode ser um pouco lenta, espere pacientemente, conforme mostrado na figura abaixo após a conclusão da instalação:

1.4 Visualizar arquivos de diretório

• O diretório público armazena arquivos HTML familiares e alguns arquivos estáticos necessários;
• O diretório src é um diretório importante para o desenvolvimento de projetos.
• Mais abaixo, index.js é o arquivo de entrada.
• Você pode tentar fazer algumas alterações no App.js e verificar o efeito da página da web

1.5 Inicie o projeto

Na imagem acima, usamos o editor VSCode para abrir o projeto React. Neste momento, digite o comando no console:

npm início

Então, o projeto nos ajudará ativamente a ativar o navegador,http://localhost:3000/O endereço, e então você pode ver o ícone giratório do React e o projeto está instalado.

 

2 Bibliotecas de terceiros que com certeza serão utilizadas

Após a conclusão da instalação do projeto, o desenvolvimento do projeto começará. Como diz o ditado, se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro aguçar a sua energia.Antes do desenvolvimento do projeto, vamos falar sobre algumas coisas que com certeza serão utilizadas no desenvolvimento de projetos front-end.Bibliotecas de terceiros .Usando essas bibliotecas de terceiros, elas podem nos ajudar a desenvolvermais eficiente。

2.1 js-ferramenta-caixa-grande

Primeiro, acesse o endereço de aprendizagem de js-tool-big-box, clique aqui:endereço de aprendizagem da biblioteca de ferramentas js-tool-big-box

js-tool-big-box é quase uma biblioteca npm obrigatória para projetos de desenvolvimento front-end. Ela possui funções ricas e é fácil de usar, tornando o desenvolvimento front-end extremamente eficiente. Suas funções atuais incluem, mas não estão limitadas a:

2.1.1 Classe de hora e data

1. Conversão de hora e data;
2. Formato de horário mais flexível;
3. Aquisição de tempo mais personalizada;
4. O período de tempo de um determinado momento até agora (informações de retorno mais detalhadas)
5. Determine se é um ano normal ou bissexto;
6. Quantos dias tem um mês;
7. signo do Zodíaco;
8. feriados legais do ano;
9. Obtenha a hora das principais cidades do mundo;

2.1.2 Classe de loja virtual

1. Obtenha o valor do parâmetro no URL
2. definir cookies;
3. Obtenha biscoitos;
4. Apagar cookies;
5. Definir armazenamento local;
6. Obtenha armazenamento local

2.1.3 Classe de evento

1. Anti-vibração
2. Acelerador

2.1.4 Classe numérica

1. Milhares separados por vírgula;
2. Determine se é maior que 0;
3. Determine se um número inteiro é maior que 0;
4. Gere números aleatórios dentro do intervalo especificado;
5. Gere um número aleatório com um determinado número de dígitos;
6. Converta números em chinês minúsculo;
7. Converta números em chinês maiúsculo;

2.1.5 Classe String

1. string reversa;
2. Henggang e pequena corcunda
3. Henggang se transforma em uma grande corcunda;
4. Comparação de número de versão;
5. Obtenha o comprimento em bytes de uma string;
6. gerar UUID;
7. Obter sexo, idade e data de nascimento com base no número de identificação;
8. Adicione símbolos especiais no meio da string para ocultar informações importantes;
9. Conversão de strings maiúsculas e minúsculas;

2.1.6 Classe de verificação regular

1. Verificação de formato de e-mail;
2. Verificação do formato do número do celular;
3. Verificação de formato de URL;
4. Verificação do formato do número de identificação;
5. Verificação do formato do endereço IP;
6. Validação do formato do código postal;

7. Determine se é um caractere Unicode;

8. Detectar valor de força da senha;

2.1.7 classe ajax

1. Enviar solicitação jsonp;
2. Baixe a versão puramente funcional do arquivo;
3. Baixar arquivos, buscar + versão da função de download;

2.1.8 classe de dados de dados

1. Obtenha um número aleatório de valores do array;
2. Copie o texto para a área de transferência;
3. Desduplicação de array;
4. Obtenha tipos de dados mais detalhados;
5. Classificação de matriz numérica (ordem direta e reversa);
6. Classificação da matriz de objetos (ordem direta e reversa)

2.1.9 classe de navegador do navegador

1. Determine se o navegador atual é móvel;
2. Determine se o elemento está dentro do intervalo visível;

3. Saiba se o navegador atual rola para cima ou para baixo e obtenha a distância atual da parte superior e inferior;

4. Ative e desative a tela inteira;

5. Obtenha o userAgent do navegador e informações detalhadas;

2.2 menos ou pré-processador atrevido

A maneira tradicional de escrever CSS é relativamente simples. O uso de pré-processadores como less ou sass pode tornar o desenvolvimento de CSS mais eficiente e é altamente recomendado.

Documentos de estudo (Menos início rápido | Documentação chinesa Less.js - Site menos chinês (bootcss.com))

2.3 biblioteca de solicitação de axios

Geralmente, os projetos envolverão interação com o servidor, e neste momento você pode usar axios para enviar solicitações.

documentação de aprendizagem do axios (documentação chinesa do axios | site chinês do axios | axios (axios-js.com))

2.4 Biblioteca de IU

Para React, se for desenvolvimento no lado C, ainda esperamos poder escrever à mão algumas bibliotecas de UI relativamente leves, mas se for desenvolvimento no lado B, recomendamos Ant Design.

Documento de aprendizagem do Ant Design (Ant Design - Uma linguagem de design de UI de nível empresarial e biblioteca de componentes React)