Baseado no curso react-ninja
Iremos usar depois o react-create-app, mas para entender, iremos configurar aos poucos.
Para entendermos o processo de desenvolvimento atual, vamos considerar a biblioteca react. E como poderiamos trabalhar com ela.
Há algum tempo atrás, era comum um desenvolvedor programar diretamente nos arquivos .html, .css e .javascript que iria depois para produção.
Basicamente, tinha-se um arquivo HTML. Nele podia incluir as bibliotecas que precisava, como por exemplo o react e react-dom. Além de incluir o seu próprio script:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- Include the React and ReactDOM libraries -->
<script src="<https://fb.me/react-15.2.1.js>"></script>
<script src="<https://fb.me/react-dom-15.2.1.js>"></script>
</head>
<body>
<div id="root"></div>
<script src="js/script.js"></script>
</script>
</body>
</html>
Onde no seu script teria o codigo especificamente:
// create a React element rElement
var rElement = React.createElement('h1', null, 'Hello, world!');
// dElement is a DOM container
var dElement = document.getElementById('root');
// render the React element in the DOM container
ReactDOM.render(rElement, dElement);
Programar usando react é basicamente criar novos componentes, que combinam componentes já existentes or criados anteriormente. Por exemplo, poderiamos criar um componente ola mundo:
class Ola extends React.Component {
render() {
return React.createElement('h1', null, `Ola ${this.props.nome}`);
}
}
var rElement = React.createElement(Ola, {nome:"Sergio"}, null);
// dElement is a DOM container
var dElement = document.getElementById('root');
// render the React element in the DOM container
ReactDOM.render(rElement, dElement);
A medida que vá necessitando novas bibliotecas e componentes, o index.html tenderá a crescer e será dificil controlar o acesso a elas.
O react por exemplo, pode ser programado mais facilmente usando JSX (JavaScript XML) - que é uma extensão ao JavaScript, que irá requerer um transpilador.