Acelere seu aprendizado em ReactJS

Neste post de hoje, vou compartilhar com você 12 dicas de estudo de React que eu utilizei e recomento para que deseja aprender React de forma muito mais rápida e com fundamentos sólidos. Então vamos lá...

Aprenda a quantidade certa de JavaScript e ES6

É fácil pular em um framework logo de cara, mas você tem que andar antes de poder correr, certo? Aposto que você está cansado de ouvir isso! Outra coisa que você provavelmente está cansado de ouvir é “você precisa saber JavaScript antes de aprender um framework!”. Embora esse conselho seja verdadeiro, ele oferece outra pergunta, muitas vezes sem resposta. “Quanto de JavaScript eu preciso saber antes de aprender React?”

Eu estava longe de ser bom em JavaScript quando mergulhei no React há dois anos. Mas há algumas coisas importantes que eu sabia que você também deveria saber antes de aprender o React (ou qualquer biblioteca / estrutura para esse assunto). Além disso, eu tinha esperiência em Java e Pascal, embora não seja pré-requisito para aprender React, isso me ajudou bastante.

• Funções (incluindo arrow function ES6)
• Variáveis ​​(const & let)
• Tipos de dados
• Objetos e matrizes (e como trabalhar com eles)
• Módulos de importação / exportação (import / export)
• Trabalhando com uma API (consumindo dados)
• Entenda como funciona a manipulação do DOM

Se você tem uma ideia básica de como essas coisas funcionam, poderá iniciar no React sem medo. Trabalhar com o React você irá aprofundar seu conhecimento em JavaScript, pois você ainda está trabalhando com JavaScript - o React é uma biblioteca de JavaScript no fim das contas!

Use create-react-app

Eu sempre recomento iniciar um projeto usando o create-create-app, você pode encontrar o GitHub para obter mais informações. Ele fornece um exemplo de projeto funcional pronto para uso, para que você não precise se preocupar em configurá-lo do zero!

Isso significa que você pode ignorar coisas como Babel, webpack e todas as outras coisas complexas, pelo menos por enquanto. Quando você tiver um bom controle sobre o React, poderá se aprofundar mais nesses tópicos.

Esqueça Redux, Context API e outras coisas complexas de gerenciamento de estado

Nessa fase inicial de aprendizado do React, se você começar a utilizar alguma biblioteca de Gerenciamento de Estado, poderá ser um tiro no pé. Elas exigem um nível maior de conhecimento que você talvez ainda não tenha obtido ainda.

Se tiver pesquidado sobre o assunto, você pode ter encontrado o Redux, que é uma estrutura de gerenciamento de estado para React. Embora o Redux seja muito legal e tenha seus usos para aplicativos maiores, você não precisa aprender o Redux ao iniciar o React! O React tem seus próprios recursos de gerenciamento de estado, que são mais fáceis de entender e mais do que o suficiente para você começar.

Foco em componentes funcionais

Se você quisesse armazenar o estado em um componente, tradicionalmente precisaria usar um componente de classe ES6. Os componentes da classe são um pouco desajeitados (tendo que se preocupar em vincular "this", lidar com construtores, difícil armazenar / atualizar estado complexo e assim por diante):

// function component
const App = (props) => {
	return <h2>Hello my name is {props.name}.</h2>;
};

// class based component
class App extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return <h2>Hello my name is {this.props.name}.</h2>;
	}
}

Os componentes de função e hooks estão se tornando a maneira “mais legal” de criar componentes React. Os componentes da função são apenas funções JavaScript normais que retornam JSX. Combinados com o hook “useState”, criar e trabalhar com componentes é uma experiência muito mais agradável.

Não estou dizendo “fique longe dos componentes da classe!”, Se você quiser aprendê-los, por favor, vá em frente! Porém, as coisas caminham para utilização de hooks e functional component.

Escolha uma maneira de estilizar um componente

Existem várias maneiras de definir o estilo de um componente no React. Coloque seu foco em na que mais te agradar.

De qualquer forma, tente não se confundir aprendendo todas as diferentes maneiras de estilizar um componente. CSS e style sheet simples funcionam muito bem quando você está começando.

Depois que você já estiver bom com o CSS simples, começe a utilizar a lib styled-components. Você irá se apaioxonar!

Aprenda o uso do hook de estado

Eu mencionei o hook useState anteriormente, então o que é?

O hook useState nos permite armazenar o estado em um componente funcional (anteriormente, precisávamos usar um componente de classe para isso). Se parece com isso:

const [name, setName] = useState('Josias');

Isso armazena uma variável chamada nameem estado. Podemos alterar a variável usando setName()e inicializá-la passando um valor para a função useState (neste caso, “Josias”)

O hook useState torna o gerenciamento de estados complexos mais agradável (podemos ter “vários hooks de estado” por componente) e não precisamos nos preocupar em usar “this” toda vez que quisermos trabalhar com o estado:

const App = (props) => {
	const [name, setName] = useState('Josias');
	const [age, setAge] = useState(26);

	return (
		<h2>
			Hello my name is {name}. and I am {age} years old
		</h2>
	);
};

Neste outro post eu falei um pouco mais sobre os Hooks. Vem ver!

Aprenda o hook useEffect

O hook useEffect é um hook React que nos permite executar código em diferentes partes do ciclo de vida de um componente.

O hook useEffect é onde você normalmente faz chamadas de API, atualiza seu componente se os adereços mudarem e executa qualquer código de limpeza.

Você pode resolver um monte de problemas bem com os hooks useEffect e useState, por isso certifique-se de tê-los em seu arsenal de conhecimento!

Neste outro post eu falei um pouco mais sobre os Hooks. Vem ver!

Comece com um componente

React tem tudo a ver com componentes, mas isso não significa que temos que exagerar na criação de componentes para cada pequena coisa em nosso projeto!

Uma sugestão é começar com um componente e, quando esse componente ficar muito grande, ou ele tiver pequenas partes que podem ser reaproveitadas em outra parte do seu projeto, então divida-o em componentes menores.

No inicio tome cuidado com a criação excessiva de componentes. Um excesso de abstração pode ser uma dor de cabeça mais tarde.

Props vs State

Será importante aprender o que são adereços, em que estado está e quando usar cada um. Esses são os pilares do React e você os usará muito. Em alto nível:

Props são dados que um componente pai pode passar para seus componentes filho.

Esses dados podem ser qualquer coisa - números, strings, objetos, arrays, funções, etc.

Aqui está um exemplo de passagem de nome e idade para o componente UserDetails do componente App (ou seja, o pai):

const App = () => {
	return <UserDetails name='Josias' age={26} />;
};

State são dados que podem representar partes de um aplicativo que podem ser alteradas .

Por exemplo, uma lista de usuários, um sinalizador booleano que mostra se um modal está aberto e o valor do campo de entrada podem ser armazenados no estado:

const App = () => {
	const [isModalOpen, setIsModalOpen] = useState(false);
	const [inputValue, setInputValue] = useState("hello React");
	const [userList, setUserList] =useState([
		{name: "Josias", age: 26},
		{name: "Joy", age: 20},
		{name: "Michal", age: 32}
	])

    return(
        // ...JSX
    )
}

Ignore o servidor - use dados falsos ou APIs existentes

Se você está tentando aprender React, normalmente é melhor se concentrar em React. Faz sentido, certo? Ao praticar a busca de dados de uma API, pode ser tentador pensar: “Droga, preciso construir uma API para isso! Acho que tenho que aprender Node.js! ” (já aconteceu comigo, confesso).

Se seu objetivo é se tornar um desenvolvedor full-stack, isso não é uma má ideia. Mas se você deseja aprender React, tente usar APIs existentes ou dados simulados para praticar o trabalho com uma API. Isso ajuda a mantê-lo focado no React (acredito piamente em aprender uma coisa de cada vez!).

• Aqui está uma lista de APIs com as quais você pode brincar
• JSONPlaceholder é outra ferramenta legal para iniciar rapidamente uma API

Fique longe de outras estruturas

Este é um erro que vejo iniciantes (inclusive eu). Existem muitos frameworks e, por alguma razão, achamos que temos que aprender todos eles !. Mas nós não precisamos. Embora aqui no Brasil a maioria das vagas de emprego especifiquem uma cetena de skills, você não precisa aprender tudo de uma vez, certo!?

Se você está aprendendo React, concentre-se em React. Você sempre pode brincar com os outros se quiser, você pode até pensar, “Ei, eu gosto mais do Vue!”, E mudar seu foco para isso. Qualquer que seja a estrutura da sua parte, tente se concentrar nela até que possa pelo menos construir alguns projetos

Aprenda o ciclo de vida e como um componente é processado novamente

É importante saber o ciclo de vida do React e como / quando um componente é renderizado novamente. Aqui estão algumas dicas para você começar com isso:

• Quando o estado de um componente muda, o React irá renderizar novamente o componente
• Quando um componente é renderizado novamente, ele automaticamente renderiza novamente seus filhos
• Use useEffect () para executar código em certas partes do ciclo de vida

Diverta-se!

Por fim, tente se divertir. Somos desenvolvedores porque adoramos criar coisas, portanto, certifique-se de aproveitar sua jornada para aprender React!