React e TypeScript: Pontapé inicial do jeito certo Live React e TypeScript: Pontapé inicial do jeito certo - YouTube
Repositório
Repositório Inspiração Guia rápido do WSL2 + Docker
React é uma biblioteca JavaScript para criar interfaces de usuário.
O pacote react contém apenas a funcionalidade necessária para definir os componentes React. É normalmente usado junto com um renderizador React como o react-dom para a web, ou react-nativo para os ambientes nativos.
React é uma biblioteca JavaScript para construir interfaces de usuário.
Declarative: Declarativo! React torna fácil criar interfaces de usuário interativas. Projete visualizações simples para cada estado em seu aplicativo, e o React atualizará e renderizará com eficiência os componentes certos quando seus dados forem alterados. As visualizações declarativas tornam seu código mais previsível, mais simples de entender e mais fácil de depurar.
Component-Based: Com base em componentes. Construa componentes encapsulados que gerenciam seu próprio estado e, em seguida, componha-os para criar interfaces de usuário complexas. Como a lógica do componente é escrita em JavaScript em vez de em modelos, você pode facilmente passar dados ricos por meio de seu aplicativo e manter o estado fora do DOM.
Learn Once, Write Anywhere: Aprenda uma vez, escreva em qualquer lugar. Não fazemos suposições sobre o resto de sua pilha de tecnologia, portanto, você pode desenvolver novos recursos no React sem reescrever o código existente. O React também pode renderizar no servidor usando Node e alimentar aplicativos móveis usando React Native. Aprenda a usar o React em seu próprio projeto.
Há algumas coisas que você deve saber com antecedência antes de começar a brincar com React. Se você nunca usou JavaScript ou o DOM antes, por exemplo, eu ficaria mais familiarizado com aqueles antes de tentar atacar React.
Aqui está o que eu considero ser pré-requisitos de reação.
- Familiaridade básica com HTML e CSS.
- Conhecimento básico de JavaScript e programação.
- Compreensão básica do DOM.
- Familiaridade com sintaxe e recursos do ES6.
- Node.js and npm(https://www.taniarascia.com/how-to-install-and-use-node-js-and-npm-mac-and-windows/) instalados globalmente.
Documentação ReactJS
React – A JavaScript library for building user interfaces (reactjs.org)
There are a few ways to set up React, and I'll show you two so you get a good idea of how it works.
Static HTML File
This first method is not a popular way to set up React and is not how we'll be doing the rest of our tutorial, but it will be familiar and easy to understand if you've ever used a library like jQuery, and it's the least scary way to get started if you're not familiar with Webpack, Babel, and Node.js.
Let's start by making a basic file. We're going to load in three CDNs in the - React, React DOM, and Babel. We're also going to make a with an id called , and finally we'll create a tag where your custom code will live.index.html head div root script
index.html
I'm loading in the latest stable versions of the libraries as of the time of this writing.
React - the React top level API
React DOM - adds DOM-specific methods
Babel - a JavaScript compiler that lets us use ES6+ in old browsers
The entry point for our app will be the div element, which is named by convention. You'll also notice the script type, which is mandatory for using Babel.roottext/babel
Now, let's write our first code block of React. We're going to use ES6 classes to create a React component called .App
Type the snnipet into
script tag
<!-- Convetion tag root div to react. -->
<div id="root"></div>
<!-- React JS compiled from Babel -->
<script type="text/babel">
// React code will go here
class App extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
// https://reactjs.org/docs/react-dom.html#render
ReactDOM.render(<App/>, document.getElementById('root'), ()=>console.log('Renderized'));
</script>
Cool! Now that you've done this, you can see that React isn't so insanely scary to get started with. It's just some JavaScript helper libraries that we can load into our HTML.
We've done this for demonstration purposes, but from here out we're going to use another method: Create React App.
Requisitos
- CURL instalado
- Node.js
- Instalação no Ubuntu
sudo apt install nodejs - Bundles (empacotadores)
- NPM
- Gerencia pacotes, mas não facilita a execução de nenhum.
- Instalação no Ubuntu
sudo apt install npm
- NPX (bundled npm)
- Uma ferramenta para executar pacotes Node.
- NPM
- Instalação no Ubuntu
Addiing TypeScript
- Components
- JSX
- FSC
- Function Stateless Component
Extensões VSCode
- Reactjs code snniptes
- ESlint
- Aponta warnings no output de formas obsoletas de escrita da linguagem JS
- Linter é uma ferramenta de analise de convenções javascript
- TSLint
- Linter para TypeScript
- Setting sync
Written with StackEdit.