For others who are probably going to skip this because it sounds like a getting started tutorial - it’s not.
I’ve only skimmed it but it starts by building up the components React works with from scratch without any JSX / React helpers at all. Much better way to get an intuition of what’s going on under the hood.
I started going through this but got stuck on Lesson 4. I copied this file [0] as is and tried running it locally using live-server but I get an error.
Uncaught SyntaxError: /Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (36:4)
Somebody, please, publish a tutorial something like "Create simple web applications with Vanilla JS", or "How to build frontend-only apps using only native HTML5 APIs".
I can't believe people are still interested about this horrible, overhyped framework.
AKA: how to end up with your very own framework, that’s not as good as this other “horrible, overhyped” framework and you have to do absolutely everything yourself because nothing works with it.
React fills a need and it’s features are bourne of real world necessity. Even if you don’t care for it, it’s interesting because the lion’s share of libraries are built to work with it these days and it’s backed by a company that will keep it going. It might not be the best way to fill a specific need, but it’s a good general tool.
I don’t know how HN readers would know that “Dan star[r]ed the repo” without spending way more time on it than any reader does.
My guess is that the different results are a mix of chance and the fact that the repo, and thus the HN submission, now contains “a simple tutorial for React.” The longer title is much more informative: https://hn.algolia.com/?query=https:%2F%2Fgithub.com%2Fkay-i...
If there’s a lesson here, it’s to use informative page titles, even for repos :-)
You are partially right. I discovered the repo on 'trending on github' and that probably happened because 'Dan starred the repo'.
However, getting on HN front page is a mix of luck and opportunity. Before posting, I checked on Algolia (because most repos get trendy AFTER being on HN): few votes. Too relevant for that so I reposted it. Then got lucky.
Appreciate the tutorials, thanks. I understand that the core concern of them is to demonstrate React, but it wouldn't hurt to use valid HTML. None of your pages have a html, head or body tag. Speaking as someone involved with accessibility I'd hate to think we were assuming that devs just know this stuff - how can we expect people to learn web accessibility guidelines or how to use ARIA when tutorials don't even come with the most basic valid HTML structures?
This is actually valid since HTML5, and doesn't have any impact on accessibility. html, head and body tags are all 'implied' by the document structure. Times have changed...
Yep, this is valid HTML according to the spec, and should have no affect on accessibility. It might not be “valid” according to the W3C validators, but neither are many perfectly normal practices like proper custom elements (hyphen in tag name) and wrapping links around container elements. The era where validators were worth following has passed — we're now in the era where you need to learn to look at the spec for the laws of the land.
For a beginner React tutorial, I’m happy to see the React parts given emphasis, and the other parts don’t matter simplified. Omitting those tags reduces noise, and is a good subtle way for people to discover that they are in fact optional.
Readit News
I’ve only skimmed it but it starts by building up the components React works with from scratch without any JSX / React helpers at all. Much better way to get an intuition of what’s going on under the hood.
Deleted Comment
Uncaught SyntaxError: /Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (36:4)
[0] https://raw.githubusercontent.com/kay-is/react-from-zero/mas...
Guess the array needs a comma and the fragment has to be React.Fragment
Nice find!
I can't believe people are still interested about this horrible, overhyped framework.
React fills a need and it’s features are bourne of real world necessity. Even if you don’t care for it, it’s interesting because the lion’s share of libraries are built to work with it these days and it’s backed by a company that will keep it going. It might not be the best way to fill a specific need, but it’s a good general tool.
Anyway.
I started this a few years ago to show people how simple React really is and that you can use it in directly in the browser :)
Hope this helps many people.
Btw. I am a remote software consultant for hire.
http://kay.is
and I have a Patreon.
https://www.patreon.com/kayis
Didn't know what goals I should put there, but maybe more tutorials in that style, for Angular, Vue etc.?
My guess is that the different results are a mix of chance and the fact that the repo, and thus the HN submission, now contains “a simple tutorial for React.” The longer title is much more informative: https://hn.algolia.com/?query=https:%2F%2Fgithub.com%2Fkay-i...
If there’s a lesson here, it’s to use informative page titles, even for repos :-)
I think dad that there's no commitment to create some beginners' guide using jQuery and only just React, as the "go-to" solution for projects.
Dead Comment
You are partially right. I discovered the repo on 'trending on github' and that probably happened because 'Dan starred the repo'.
However, getting on HN front page is a mix of luck and opportunity. Before posting, I checked on Algolia (because most repos get trendy AFTER being on HN): few votes. Too relevant for that so I reposted it. Then got lucky.
lol, you just stole my heart
Webpack, babel and create-react-app should be demonstrated as a conclusion, not as an introduction.
Had the impression most people who didn't want to use React hated the tooling.
I was impressed that even Babel itself wouls run via script-tag :D
This a million times over. I know webpack isn’t hard but it can be daunting to a newcomer.
It feels like the community it still struggling with this framework , while it has existed for many many years... Very interesting.
I'm blogging for over a year now, and the most views get the articles about basic JS stuff.
There are simply more people starting coding world wide than senior devs.
Then we might not speak of the same React. Angular and Vue have very rich documentation which makes tutorial unnecessary.
React doesn't have that, so it's very likely "has to do" with React.
For a beginner React tutorial, I’m happy to see the React parts given emphasis, and the other parts don’t matter simplified. Omitting those tags reduces noise, and is a good subtle way for people to discover that they are in fact optional.