Para desenvolver um projeto utilizando React, voc\u00ea n\u00e3o precisa necessariamente de nada, somente um editor de c\u00f3digos, ou at\u00e9 mesmo o bloco de notas. Basta que voc\u00ea inclua no seu documento HTML as bibliotecas de javascript, e desenvolva seus componentes utilizando a sintaxe JSX padr\u00e3o do React.<\/p>\n
Ent\u00e3o, um simples “Ol\u00e1 Mundo!” ficaria como a seguir.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset=\"UTF-8\" \/>\r\n <title>Hello World<\/title>\r\n <script src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/babel-standalone@6.15.0\/babel.min.js\"><\/script>\r\n <\/head>\r\n <body>\r\n <div id=\"root\"><\/div>\r\n <script type=\"text\/babel\">\r\n\r\n ReactDOM.render(\r\n <h1>Ol\u00e1, Mundo!<\/h1>,\r\n document.getElementById('root')\r\n );\r\n\r\n <\/script>\r\n <\/body>\r\n<\/html><\/pre>\nVeja o resultado:\u00a0https:\/\/fabianocouto.github.io\/blog\/react\/hello-world\/<\/a><\/p>\nMas isso n\u00e3o \u00e9 recomendado para projetos um pouco mais complexos, al\u00e9m de comprometer a performance e a organiza\u00e7\u00e3o da aplica\u00e7\u00e3o.<\/p>\n
Para desenvolver um projeto utilizando as pr\u00e1ticas recomendas e utilizadas no mercado, voc\u00ea precisa ter o Node.js instalado em seu computador.<\/p>\n
Acesse\u00a0https:\/\/nodejs.org<\/a> e instale vers\u00e3o mais atualizada.<\/p>\nAbra uma janela de comando (command prompt) e execute:<\/p>\n
npm install -g create-react-app\r\n\r\n<\/pre>\nEste comando vai instalar as depend\u00eancias para criar uma aplica\u00e7\u00e3o em React. Isso pode demorar um puco.<\/p>\n
Para criar uma aplica\u00e7\u00e3o, execute:<\/p>\n
create-react-app hello-world<\/pre>\nIsso tamb\u00e9m pode demorar uma pouco, mas ao terminar, voc\u00ea vai observar que foi criada uma pasta chamada “hello-world”, com os arquivos da aplica\u00e7\u00e3o.<\/p>\n
Agora execute na sequ\u00eancia:<\/p>\n
cd hello-world\r\nnpm start<\/pre>\nIsso vai apontar a janela de comando para a pasta da aplica\u00e7\u00e3o, no caso o nome da pasta \u00e9 “hello-world”, e vai inciar o servidor de desenvolvimento. Uma janela do navegador padr\u00e3o deve se abrir automaticamente e mostrar a primeira p\u00e1gina da aplica\u00e7\u00e3o sendo executada, mas caso isso n\u00e3o aconte\u00e7a, abra uma janela do seu navegador e digite o endere\u00e7o\u00a0http:\/\/localhost:3000\/.<\/p>\n
Abra seu editor de c\u00f3digos na pasta da aplica\u00e7\u00e3o, e altere o arquivo src\/App.js, substituindo “Welcome to React” por “Hello World”, e verifique o efeito da mudan\u00e7a na janela do navegador.<\/p>\n
Veja o resultado:\u00a0https:\/\/fabianocouto.github.io\/blog\/react\/hello-world\/app\/<\/a><\/p>\n