Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

React Tutorial: Cloning Yelp

fullstackreact.com

Post reply on HN
Print view View original

131–140 of 258 posts

Re: React Tutorial: Cloning Yelp

#131

Post by zxcvcxz »

Cyph0n wrote: post #86
swanson wrote: post #48

I'm no Javascript Boilerplate Fatigue apologist, but there are many comments in here that are treating this as a "Learn how to use React" tutorial. This is not what is advertised nor the stated reason this article was written. From the first sentence: "we get a lot of questions about how to build large applications with React and how to integrate external APIs" Large application strucutre, external integrations...not…

I have no problem with the article or its goals, but my issue is why is so much configuration even necessary for a "large" frontend JS application? Why don't we see this kind of configuration hell in other major languages? Look at Python, or Scala, or Go, or even Rust. Do you see projects requiring 10 dependencies just to setup a testing environment? Or having to manually integrate every piece of the build process in…

What are you doing with python and go that "just works"? Writing scripts? It takes a lot more work to build a yelp clone with python than it does with react.

Re: React Tutorial: Cloning Yelp

#132

Post by firasd »

pacomerh wrote: post #128

Cool tutorial, but first check if React is what you really need for your next thing. Facebook creates React to solve the problem of dealing with large applications with data that changes overtime. React became very popular to the point where the word gets spread saying this is the newest and coolest thing to learn. At this point the core idea and key aspects of why React is cool get misunderstood and we start assumin…

I'm not sure about "large applications", but agreed about "data that changes". It's definitely not like dropping in a library like jQuery to spice up some interactions on a webpage.

I wrote something about the 'Why' of React (with some related links that talk more about it): "Interface from Data... Rendering views as a function of state." https://medium.com/@firasd/interface-from-data-using-react-t...

Re: React Tutorial: Cloning Yelp

#133

Post by Scarbutt »

yes, your problem seems to be learning by banging the keyboard like a monkey which you inherited from clicking like a monkey to get a mere sense of how to use something instead of reading some upfront documentation.

Re: React Tutorial: Cloning Yelp

#134

Post by george_soros »

fbonetti wrote: post #62
swanson wrote: post #48

I'm no Javascript Boilerplate Fatigue apologist, but there are many comments in here that are treating this as a "Learn how to use React" tutorial. This is not what is advertised nor the stated reason this article was written. From the first sentence: "we get a lot of questions about how to build large applications with React and how to integrate external APIs" Large application strucutre, external integrations...not…

The problem with the massive amount of churn is that it just doesn't pay off to learn the new, cool thing when it's going to be obsolete in 3 months or less. I think all programmers, especially ones who read HN, like to learn new things. It's fun to pick up new languages, learn new paradigms, and experiment with different technologies. What's not fun is learning 10 different ways to handle promises, 4 different build…

I hear you. Web Assembly just might save us all from this ridiculous JS drive to re-invent things. Pick a language you like to work with on the server side, learn the current best framework for the client side in that language and be happy ever after with enough free time for gardening and feeding goats.

Re: React Tutorial: Cloning Yelp

#135

Post by zxcvcxz »

eagsalazar2 wrote: post #122

The criticism here is really baffling in how it blames the js ecosystem for the complexity in building large production apps.. I wouldn't find fault with a similar tutorial for "how to set up a production, at scale, rails app with only sever side rendering and zero javascript". Between hosting, cacheing, deployment, worker queues, database provisioning, etc, LOL that tut would be gigantic and that makes sense! If peo…

There are two types of web developers:

1. Those who know javascript and some major framework

2. Those who are unemployed

Yes we can build apps with just HTML and CSS and put it all in one file and serve it with a one line command, but if we want to be employed and have a website that actually scales we need to follow in the foot steps of the people who have done it.

Re: React Tutorial: Cloning Yelp

#136

Post by t1amat »

aidos wrote: post #117
callahad wrote: post #95

Earlier quoted context omitted.

Vertical integration plays a part with blessed libraries for rendering, routing, and requests, but it's not just vertical integration: Elm completely obviates Immutable.js, TypeScript, Reselect, Redux-Thunk, and Lodash/Ramda by virtue of fundamental language design choices. The same goes for Haskell, OCaml, and PureScript. In that context, Redux becomes a design pattern, rather than a library. Ultimately, it feels li…

Can you embed an existing js app (angular) with Elm? Doesn't need to be any real communication between them. Just have the Elm app decide if the angular app is displayed or not. Honest question as I'm embedding angular in react at the moment and there's quite a lot of library fatigue going on.

Yes, this is possible. Angular and Elm could easily communicate through Elm's JavaScript FFI.

Re: React Tutorial: Cloning Yelp

#138

Post by lucideer »

moogleii wrote: post #70
lucideer wrote: post #36

Earlier quoted context omitted.

It's literally 93 page-downs to the "Hello world" On the upside, it all seems clear (if somewhat laborious to go through in totality) and I definitely appreciate that the majority of those 93 page-downs were covering setting up testing and a testing strategy + framework. It seems most things of this type are more likely to either say "set up testing" without detail, OR are guides specifically for doing testing withou…

Huh? The first "hello world" equivalent occurs in the beginning. https://www.fullstackreact.com/articles/react-tutorial-cloni...

That's the first time he prints anything to screen, but the actual first "Hello world" text is at the beginning of the Routing section where he's just finished all initial boilerplate and testing setup and puts in his first route. Which is a little more representative.

I think it's a good guide btw.

Re: React Tutorial: Cloning Yelp

#139

Post by spicyj »

jimmytucson wrote: post #103
swanson wrote: post #48

I'm no Javascript Boilerplate Fatigue apologist, but there are many comments in here that are treating this as a "Learn how to use React" tutorial. This is not what is advertised nor the stated reason this article was written. From the first sentence: "we get a lot of questions about how to build large applications with React and how to integrate external APIs" Large application strucutre, external integrations...not…

Sorry, but even the “Getting Started” guide on React's website requires that you have a "CommonJS module system" installed which, if you don't, means you have to make an intelligent choice between Browserify and webpack, which means you have to do some minimal research into what those are (and probably research "babel-js", while you're at it), install one of them using npm, which may require that you install or upgra…

I'm having trouble understanding your comment.

Neither the homepage, Getting Started, the tutorial, nor the downloads page mentions CommonJS. If you do choose to use browserify or webpack, you'll want Node and npm, but Node's homepage doesn't suggest using Homebrew so I'm not sure why that would be necessary. (Besides, in my experience, most programmers using a Mac have Homebrew already.)

> When you actually get into the tutorial, it starts with "Running a server". Running a server?

We included this as a sample because most people write clients against an app server so we thought it instructive to show how to fetch and post data via AJAX. Nothing about it is inherent to React and people make React apps without any server component all the time. It sounds like this was misleading to you, which is good feedback for us. I was thinking about revamping the tutorial soon anyway and my new example wasn't going to have any server component.

Re: React Tutorial: Cloning Yelp

#140

Post by hokkos »

Cyph0n wrote: post #40

Great work on the tutorial. I'm sure it took a lot of time to setup, and it seems well written. However I simply won't believe that setting up a simple React app requires so much overhead. Granted, I have no experience with React, and only marginal experience with frontend web dev. As I read the tutorial, this is the list of questions I had: 1. Why do we need so many Babel presets? What do they do? 2. Why do we need…

1. you don't need them all, but for using the latest ES future spec and ideas and hot reloading they are needed. es2015 : to use ES6, stage-0: all babel plugins: async/await, 22, trailing comma a(1,2,), spread {1, ...a}, and more : http://babeljs.io/docs/plugins/preset-stage-0/ the react plugin is to transform the JSX syntax , and react-hmre is a preset for hot reloading.

2. we need webpack to bundle the js, jsx, css, images if they are small or use them as asset if they are big. With Gulp you have to re-create painfully what webpack already offer. Webpack is declarative configuration, gulp is complex plumbing.

3. Webpack is powerful, but i am pretty sure the average webpack config file is way less the size of gulps files.

4. PostCSS is more powerful and can strongly link your postcss and component class without having to invent a complex and tedious naming style.

5. PostCSS make terser and safer css.

6. this is exactly the use of plugins for webpack.

7. because you want to have a dev and production mode, in dev mode react test lot of thing like properties type and invariants, you don't want that in production mode because it slow things. Also if you want to make different variants of your project, webpack can at compile time use those env variables to remove some functionalities just put an if (env.CLIENT === "bigcorp") {...} and webpack with the help of uglify will remove or add the code in the then part.

8. each lib has a reason and is orthogonal to one another.

9. to load an asset json file as a parsed JS object with the syntax like you would import a module. very useful.

10.-> 13. webpack is used for all assets and to find the tests and to present them to mocha et al.

lot of them a dev dependencies it means you can deactivate them and still ship your product.

Post reply on HN