React.js, Webpack, yarn - problemy z konfiguracją.

0

Cześć.

Postanowiłem że czas wyjść z pięknego świata tworzenia kilku plików (html, css, js) które działają zaraz po napisaniu.
Czas nauczyć się Reacta i Webpacka - które podobno najlepiej instalować je yarn'em.
Niestety pojawiły się problemy, oto co robiłem:

  1. Zainstalowałem node.js
  2. Zmartwiłem się że działa to w czarno-białej konsoli (cmd) ;-) (jak mogę używać tu Sublime'a ?)
  3. Wpisałem
npm install --save-dev webpack
  1. Wyskoczyło:
    npm should be run outside of the node repl, in your normal shell.
    (Press Control-D to exit.)
  2. Zastanawiam się co to znaczy " --save-dev " ?
  3. Próbowałem zainstalować * yarn * stąd: https://yarnpkg.com/lang/en/ niemniej w konsoli nie ma po nim śladu (jak się to instaluje?)
  4. Załamałem się.

Dodatkowo pojawiły się różne tematy których nie bardzo wiem skąd się uczyć:

a Polecenia node.js
b type="text/babel"
c Jak się tego React'a kompiluje !?
d Czym się różni instalacja webpacka globalnie od nieglobalnie i czemu muszę używać do tego node.js?*

Wiem że temat dość chaotyczny niemniej proszę o cierpliwość i pomoc.

0
  1. Poczytaj czym jest create-react-app (https://reactjs.org/docs/create-a-new-react-app.html).
  2. NodeJs to tylko środowisko uruchomieniowe JavaScriptu po za przeglądarką. Jak napiszesz sobie jakiś skrypt to potem możesz go uruchomić za pomocą node nazwapliku.js.
  3. npm nie odpalasz w Node tylko jak normalną komendę w konsoli tak jak np. cd, dir itp.
  4. --save-dev oznacza że paczka którą instalujesz za pomocą npm install jest zapisywana w pliku package.json w sekcji devDependencies
  5. Pewnie nie masz go dodanego do zmiennej systemowej PATH
  6. Nie łam się to nie jest skomplikowane

BTW. Jak chcesz pisać w React to ogarnij sobie najpierw podstawy czym jest ES6 i obejrzyj kurs z react na przykład ten jest spoko

0

Mam dwa problemy.

  1. W sublimie kolory JSX nie takie jak bym chciał: patrz JSX.jpg
  2. Program nie chce działać poza jsfiddle: https://jsfiddle.net/n5u2wwjg/127122/
    (sugerowałem się tym: https://learn.freecodecamp.org/front-end-libraries/react/create-a-simple-jsx-element);
    użyłem metatagów stąd: https://reactjs.org/docs/add-react-to-a-website.html
0
  1. Do sublime musisz mieć plugin, aby kolorował składnie JSX
  2. Na JSFiddle jak masz kod JSa to masz na górze zaznaczone, że on automatycznie zasysa reacta. Musisz reacta do index.html z tego linku który podałeś (https://reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tags)

Jak dalej ci nie będzie działać to wrzuć kod, zobaczymy co jest z nim nie tak :)

0

Oto co mam:

<!DOCTYPE html>
<html>
<head>
	<title>Przygody z Reactem</title>
	<meta charset="UTF-8">
	<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
	<div id="tutaj"></div>
	<script src="script.js" type='text/babel'></script>
</body>
</html>

JS:

const JSX = <h1>Weź wreszcie zadziałaj!</h1>;
ReactDOM.render(JSX, document.getElementById('tutaj'))

Wywala blad: patrz obrazek

0

Odpalasz po prostu plik index.html za pomocą przeglądarki? Bo jak tak to on krzyczy o to że to nie jest przez serwer robione.

Wydaje mi się że nie ma sensu żebyś się bawił w dodatkowe konfiguracje i najprościej jest użyć tego create-react-app:

  1. Potrzebujesz NodeJS (z tego co pisałes to już go masz) ( )
  2. Jeśli działa ci npm (wpisz se w cmd npm -v)
  3. Zainstaluj create-react-app npm install -g create-react-app
  4. Wpisz npx create-react-app my-app
  5. Powinno ci stworzyć cały projekt z Reactem i wszystkim co potrzebujesz do nauki ale także do apek produkcyjnych
0

Ja już nie ogarniam. Raz myślałem że do Reacta jest potrzebny Node.js
Potem początek tego artykułu https://reactjs.org/docs/add-react-to-a-website.html zasugerował mi że jednak nie jest.
No to w końcu jak to jest?

0

Walka z Reactem ciąg dalszy:

W katalogu (obrazek react_problem_1) w pliku App.js napisałem:

import React, { Component } from 'react' ;
import '.App.css';
var JSX = <h1>Siema</h1>;

 ReactDOM.render(JSX, document.querySelector('body'))

i przeglądarka wyrzuca błąd: (react_problem_2)

gdzie popełniam błąd??

0

Po dodaniu "import ReactDOM from 'react-dom' "
pojawia się (obrazek)

0

Zawartość pliku App.js jest taka jak napisałem wcześniej + to co zasugerował athaylean .
A w pliku index.js jest:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
0

Ale dlaczego masz w dwoch plikach ReactDOM.render? To tak nie dziala, w app.js masz miec po prostu komponent, np.: const component = () => (kod), a nastepnie musisz go exportowac (export default component) i zaimportowac do index.js. To tak w duzym skrocie i to sa podstawy podstaw, otwierales chociaz raz dokumentacje?

0

Ja próbuję sprawić żeby cokolwiek "mojego" w React'cie mi zadziałało. O tym jest ten wątek.
Nie jestem jeszcze na etapie studiowania dokumentacji.

1 użytkowników online, w tym zalogowanych: 0, gości: 1