|
ynohtna posted:Have you checked out jspm? quote:Note that SystemJS is built on top of a draft module loader specification that is subject to change. Good idea!
|
# ? Mar 28, 2017 16:05 |
|
|
# ? Jun 3, 2024 22:30 |
|
Thanks for the suggestions. It's one of those things I don't want to go through to configure and get working right, but it will be so worth it. edit: Using JSPM with VS Code looks like it's only giving people trouble. I actually haven't even found anyone being able to use it. Sort of surprising. LP0 ON FIRE fucked around with this message at 17:07 on Mar 28, 2017 |
# ? Mar 28, 2017 16:57 |
|
ynohtna posted:Have you checked out jspm? Oh boy, maybe I get to skip right over Webpack...
|
# ? Mar 28, 2017 17:40 |
|
Too bad the the instructions point to a totally different folder structure than what is available when you install babel-cli. I have no idea what folder inside node_modules I'm supposed to point to.
|
# ? Mar 28, 2017 19:56 |
|
Thanks ddiddles, Kekekela, ROFLburger, and Maluco Marinero for your recent responses to my posts. All very helpful. Coming along. JS ecosystem anxiety diminishing slightly.
|
# ? Mar 29, 2017 03:42 |
|
-
Dominoes fucked around with this message at 14:37 on Mar 30, 2017 |
# ? Mar 30, 2017 14:16 |
|
Isn't it import React from 'react'? Not super familiar with TS.
|
# ? Mar 30, 2017 14:38 |
|
Turns out you need to add the react script before react-dom. The JS economy feels confusing if you don't use Node, since most guides assume you're using it. Next troubleshooting issue: React seems to block elements I've added in JS that aren't from react; specifically, if I render something to an element, nothing else I put in that element shows up, including things added prrior. I get the impression you're not supposed to mix+match like this, but this makes integrating it into an existing app seem not worthwhile. Is there any way around this? edit: Looks like it's blocking all other elements in the element we're rendering to, including other react ones... So let's say I add things to the DOM with JS or Jquery or W/E. I'd like to try React, since it has nicer syntax and is less awkward when inserting elements. How do I convert this: JavaScript code:
code:
Dominoes fucked around with this message at 18:17 on Mar 30, 2017 |
# ? Mar 30, 2017 15:05 |
|
Dominoes posted:The JS economy feels confusing if you don't use Node, since most guides assume you're using it. Is there a well-written guide on how to get started with Node / Bower? More so on the Bower end as we don't use node.js. Or is there something other than Bower? Or is this a Grunt / webpack thing to combine all of our JS dependencies? There's 50 tools out there and looking at the JS community it's maddening coming from a community that basically has 3 solid, well developed tools for building an application (Gradle, Maven and Ant). The dev who introduced us to all of this a couple of years ago just did a really piss poor job of it because all he really wanted was grunt watch. He basically would install packages via bower then just copy them into our repository instead of actually using its process. We're well behind the times and I've been knee deep in moderizing our Java build process and I want to continue this on the front end side of things. You're correct about every React / Redux just making assumptions and not at least writing, first you need to install X - follow these instructions on this site or something.
|
# ? Mar 30, 2017 22:12 |
|
I think it's more appropriate to use jQuery for your DOM manipulation rather than creating a new React DOM for each table record (or whatever other elements) and rendering them individually. React is more suited housing an "application", its children, and state. You could create a new React DOM for your entire table and handle the pagination, records, and ajax requests from within if you really wanted to. If you do that, you'll need to avoid touching any of it with jQuery though. When you say quote:I'd like to try React, since it has nicer syntax and is less awkward when inserting elements quote:but this makes integrating it into an existing app seem not worthwhile It makes me think perhaps you're using the wrong tool for this job? ROFLburger fucked around with this message at 22:22 on Mar 30, 2017 |
# ? Mar 30, 2017 22:20 |
|
Dominoes posted:Turns out you need to add the react script before react-dom. The JS economy feels confusing if you don't use Node, since most guides assume you're using it. Next troubleshooting issue: React seems to block elements I've added in JS that aren't from react; specifically, if I render something to an element, nothing else I put in that element shows up, including things added prrior. I get the impression you're not supposed to mix+match like this, but this makes integrating it into an existing app seem not worthwhile. Is there any way around this? This...is just not how React works. Have you worked through the official React tutorial? React isn't really something you just drop in to replace jQuery. They're completely different things.
|
# ? Mar 30, 2017 23:12 |
|
Thx dudes. I've been using the Codeacadmy tutorial, which is mostly contextless JSX syntax.
|
# ? Mar 30, 2017 23:21 |
|
Dominoes posted:Thx dudes. I've been using the Codeacadmy tutorial, which is mostly contextless JSX syntax. One of the best things about React is that the documentation is small and easy to understand. However, it's a little difficult to put myself in the shoes of someone who is not real familiar with modern web development so it might not be that way for you...but I'd definitely recommend you giving it a try.
|
# ? Mar 30, 2017 23:39 |
|
We're python bros. I'm making a web site that's hooked into a pretty complicated database. It has a number of simple pages to view and edit the info; mostly Django MVC-style, with some neat little JS/JQuery interactions. One part of the site is very different... it's a complex UI with all sorts of things going on, and all the calcs handled front-end in JS (database models are passed through the template in JSON). Dynamically adding/deleting elements, dragging things around, fancy calculations in the background etc. It's coming along quite well, and I switched to Typescript after realizing how easy PyCharm makes compiling it; learned to ignore the bower/NPM/node chaff the usual tutorials lead you down. The type-safe stuff feels like MyPy, which I love (Although it's awkward when dealing with DOM elements). For-of loops, map/filter, arrow funcs, and lodash fix most of the things I don't like about JS. React sounds like it would be a good fit for the complex part of the site, and I'm mostly looking to it as an excuse to learn and see if I like it, or to get a feel for when it's appropriate. It's come with glowing reviews from a number of people, including yourself. I just have no idea how to use it. Working with the DOM feels hacky, so I figure the JSX could help. Ie I have a lot of cases where I'm serializing data in Element IDs, which I was hoping React/JSX could fix. And of the two create-element code examples I posted above, I think the JSX one looks nicer. Dominoes fucked around with this message at 23:51 on Mar 30, 2017 |
# ? Mar 30, 2017 23:45 |
|
React is great, I'm just not sure you're gaining anything by avoiding NPM...mainly because you're severely constraining your sources of help by doing so. You also just need to really dig into the React docs and tutorial because what you demonstrated above isn't how React works. For example, you just call ReactDOM.render one time for your whole application.
|
# ? Mar 30, 2017 23:59 |
|
Thermopyle posted:You also just need to really dig into the React docs and tutorial because what you demonstrated above isn't how React works. For example, you just call ReactDOM.render one time for your whole application. Why should one use a backend framework for front-end work?
|
# ? Mar 31, 2017 00:04 |
|
When you say backend framework, what are you referring to, exactly? NPM?
|
# ? Mar 31, 2017 00:09 |
|
Node.js
|
# ? Mar 31, 2017 00:26 |
|
Dominoes posted:Why should one use a backend framework for front-end work? I'm going to paper over some differences in the following. So, basically, Node is a javascript engine just like the javascript engine in your browser, only it doesn't have a DOM. This means that stuff developed for Node will also run in the browser. One of the important differences between Node and the browser is that Node supports modules and a package repository (npm), whereas the best you can do in the browser is layer in a bunch of script tags. However, a bunch of script tags suck for a lot of reasons. Someone figured out that you can write your frontend with modules and then use a tool (webpack and others) to give you modules on the frontend. NPM is a package manager for node and for frontend development. This doesn't just mean you can install other people's packages, but more importantly (to me at least) is that you can use modules with your own code. While developing, you develop just like you would in Python...you have multiple files and multiple folders and you can import from them. As far as you know while developing you're not developing in the terrible javascript environment that is the browser, you're developing in a sane environment that lets you have multiple modules. You can even do an equivalent of python packages by putting a bunch of modules in a folder and then creating an index.js file in that folder that imports what you want as the "public" api of that package into the index.js. Dominoes posted:Node.js You don't need Node.js for the frontend other than the fact that NPM requires node.
|
# ? Mar 31, 2017 00:26 |
|
Thanks a lot! Trying to get npm working and running into the issue of require not working. It looks like browserfy/webpack are needed to make this work, via a build step. How does this work with PyCharm's auto-compiling? NPM's import system does seem nicer than global vars/funcs via script tags, but I'm trying not to dive down too deep of a rabbit hole when simple can suffice. If the require syntax were built-in, npm modules appear a clear winner over <script> tags, but it looks like getting it working is going to complicate this more than its worth. Dominoes fucked around with this message at 10:40 on Mar 31, 2017 |
# ? Mar 31, 2017 00:30 |
|
Use create-react-app to get going. It'll setup all the things for you.
|
# ? Apr 1, 2017 16:25 |
|
Dominoes posted:Thanks a lot! necrotic posted:Use create-react-app to get going. It'll setup all the things for you. This is the correct thing to do. As a bonus, you'll also get to use ES6 import statements instead of require.
|
# ? Apr 1, 2017 16:30 |
|
Looks like TS includes import from ES6.JavaScript code:
|
# ? Apr 1, 2017 23:23 |
|
Dominoes posted:Looks like TS includes import from ES6. iirc that means it doesn't have a default export so you have to do this JavaScript code:
|
# ? Apr 2, 2017 13:38 |
|
Still same error. I appreciate all the help you guys have been giving me with my noob questions. I'm not having any issues with the code itself or making my program work, but I'm struggling with the ecosystem. Dominoes fucked around with this message at 14:11 on Apr 2, 2017 |
# ? Apr 2, 2017 14:00 |
Dominoes posted:Still same error. I think you still need to import the types from lodash explicitly. See first answer here: http://stackoverflow.com/questions/34660265/importing-lodash-into-angular2-typescript-application
|
|
# ? Apr 2, 2017 14:14 |
|
AFAIK, that only prevents (non-breaking) Typescript errors.
|
# ? Apr 2, 2017 14:19 |
|
I've been working through this React/Redux course on Udemy, and things were going fine until our power went out and took my desktop with it. When I rebooted, I couldn't get the webpack server to start with npm start. When I tried, I got this message:code:
This is on a Windows 10 machine, if it matters. Commands are in the Git Bash shell. Edit: well poo poo. A second re-clone got me up and running.
|
# ? Apr 3, 2017 02:51 |
|
Thermopyle posted:You also just need to really dig into the React docs and tutorial because what you demonstrated above isn't how React works. For example, you just call ReactDOM.render one time for your whole application.
|
# ? Apr 3, 2017 05:01 |
|
hooah posted:Any idea what happened? I've tried re-cloning the project as well as un- and re-installing node.js, but no dice. Any time you get an error in node_modules, either delete the whole directory or rename it to _node_modules (which is faster on Windows) and have it get all the packages again because it's actually pretty terrible at figuring out when it needs to update a package and that usually fixes the problem, if everything was previously working.
|
# ? Apr 3, 2017 15:07 |
|
hooah posted:
You might want to look into using yarn instead of npm. I know what you're thinking..."another goddamn javascript tool?!?!?!". But, it's really not a problem. You just install yarn per the instructions and use it. It works pretty much exactly the same way as npm, except it is way better at handling the dependencies in node_modules. Moving to yarn is such a seamless transition that you can install a bunch of poo poo with npm, decide to use yarn, use it for awhile, and then switch back to npm with zero hassle. Yarn continues to use your package.json file just like npm does, and npm will use your package.json file as created by yarn, so it's easy. If you forgot you used yarn (or npm) on a project and start using npm (or yarn) it's no problem, it just works.
|
# ? Apr 3, 2017 15:17 |
|
Dominoes posted:Resolved after reading the example tutorial. Root cause: My approach was event (button click or load from DB) → function → Add new element to DOM. With React, the appropriate way is event → add react component or JSX to a state array of its parent component. Yeah with React you never touch the DOM directly. React is your new DOM.
|
# ? Apr 3, 2017 16:21 |
|
Love it. Now I've ran into a module I think I need (a react drag+drop to replace the jquery one I'm using) that appears to be usable by import or require. (Only an NPM package; no .js script) Any tips for getting import working? I looked through the create-react-app folder, but I don't know what I'm looking for re: imports. Same "Uncaught ReferenceError: exports is not defined" error as before.
|
# ? Apr 3, 2017 20:04 |
|
Dominoes posted:Love it. Now I've ran into a module I think I need (a react drag+drop to replace the jquery one I'm using) that appears to be usable by import or require. (Only an NPM package; no .js script) Any tips for getting import working? I looked through the create-react-app folder, but I don't know what I'm looking for re: imports. Same "Uncaught ReferenceError: exports is not defined" error as before. You might have to do code:
|
# ? Apr 3, 2017 20:08 |
|
Same error. Tried running webpack with this config on one of the transpiled files, but it breaks with all sorts of errors when I test it. code:
Dominoes fucked around with this message at 20:21 on Apr 3, 2017 |
# ? Apr 3, 2017 20:12 |
Dominoes posted:Love it. Now I've ran into a module I think I need (a react drag+drop to replace the jquery one I'm using) that appears to be usable by import or require. (Only an NPM package; no .js script) Any tips for getting import working? I looked through the create-react-app folder, but I don't know what I'm looking for re: imports. Same "Uncaught ReferenceError: exports is not defined" error as before. I think it depends a bit on the stack you're using, but if you're on something starting from create-react-app, doing npm install and then importing it should work, see https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency. Is your tryout on github somewhere? Easiest way to nitpick.
|
|
# ? Apr 3, 2017 21:12 |
|
I'll see if I can get the vanilla create-react-app thing working. I can't post the code since it's sort-of-for-work, but I can post a sample of my static folder that has the relevant bits distilled: Github I suspect the root cause of this may be I'm cheating? By using the typescript transpiler (wrapped by PyCharm) instead of babel/webpack/etc. Dominoes fucked around with this message at 23:25 on Apr 3, 2017 |
# ? Apr 3, 2017 22:24 |
|
Yeah the react app thing assumes you are using webpack and babel, it's not setup for typescript at all.
|
# ? Apr 4, 2017 01:41 |
|
This set of scripts may get it going with typescript, but it would still be through webpack/babel. You could still use pycharm, just run npm start to actually compile (it watches for file changes). https://github.com/wmonk/create-react-app-typescript/blob/master/README.md
|
# ? Apr 4, 2017 01:50 |
|
|
# ? Jun 3, 2024 22:30 |
|
Yes, I do all my React work in PyCharm, and I just run npm start in a terminal window. It probably doesn't seem like it, but I think having PyCharm run your transpiler is only making things more complicated if only because everything you read and everything you use is built around running webpack and letting it watch your files.
|
# ? Apr 4, 2017 03:58 |