8 ms·

React from zero: a simple tutorial for React

222 points by galfarragem 8y ago

wnsire 8y ago
I'm fascinated by how much React Tutorials exist over the internet, and how one can replace another five minutes after it get published. It feels like the community it still struggling with this framework , while it has existed for many many years... Very interesting.
- k__ 8y ago
  Has nothing to do with React. 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.
  - wnsire 8y ago
    > Has nothing to do with React. 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.
    - abiox 8y ago
      vue and angular have plenty of tutorials. react is much more popular (at the moment), which is why one would notice material for it more often.
rhapsodic 8y ago
For the life of me, I can't understand why React is as popular as it is. A web application is simply HTML, CSS and Javascript. Why do people want to make it so damn complicated? I was around when browser based apps started to take over the enterprise software world. One of the big selling points was its simplicity compared to native desktop development languages like (horrors!) Visual Basic. Anyone could open up Notepad and create a simple HTML page with some form elements and a submit button. Now, I realize that browsers' capabilities have advanced enormously in the intervening years, but it's still just HTML, CSS and Javascript, once the transpilers and the zillion other build tools get done with it. And I would argue that someone who really knows HTML, CSS and Javascript at a deep level can write it directly and maintain it a lot more efficiently than with a bunch of third-party frameworks and an overly-complex build process.
- vbezhenar 8y ago
  When people tried to write big enough applications with JavaScript, they found out, that it was a mess. JavaScript is a terrible language, so another languages were born (including modern JavaScript which isn't that bad). DOM is a very low level and very verbose API, so various approaches were taken to simplify development, e.g. jQuery, Angular, React. Hello world apps might be easy to do without frameworks, but once you're making complex pages with dozens of inputs, asynchronous loading, etc, lack of frameworks is likely to turn your code to a mess. Or, if you're brilliant developer, you might invent your own little incomplete buggy framework. It's similar to WinAPI. Sure, you can write C with WinAPI and it's enough for simple applications. But in practice people use better languages and frameworks. Simple JavaScript has its place, of course. If I'm making text-only website and I want to introduce just a little bit of interactivity, like image gallery, using anything but a few lines of JavaScript is overkill.
  - rhapsodic 8y ago
    >When people tried to write big enough applications with JavaScript, they found out, that it was a mess. I have written huge, complex, graphics-intensive applications with Javascript, and that was not my experience at all. So maybe it's not the language, but the person using it that is responsible for the mess. > It's similar to WinAPI. Sure, you can write C with WinAPI and it's enough for simple applications. That is a very far-fetched comparison, in my view.
    - ricardobeat 8y ago
      Do you use any framework, library or specific patterns in your apps?
      - rhapsodic 8y ago
        >Do you use any framework, library or specific patterns in your apps? Yes, but my team takes the same approach that Facebook or Google takes. We don't try to shoehorn in some general framework made for some other application by someone else. We make our own, that serves our own particular needs. We are the architects and the builders of our software.
jscholes 8y ago
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?
- k__ 8y ago
  As far as I know, html head and body are optional per spec.
  - spiralganglion 8y ago
    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.
- ricardobeat 8y ago
  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...
deleted 8y ago
[deleted]
m3tr0s 8y ago
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.
- aidos 8y ago
  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.
buraksarica 8y ago
Should we expect a written summary for the lessons?
- k__ 8y ago
  I don't know, do you expect a written summary of them? I thought about turning the whole thing into an ebook once. Maybe a few extra lessons with stuff like HoCs/RPs, more lifecycle methods and some principles?
sametmax 8y ago
That should be the default approach for tutorials on react, including the official web site. Webpack, babel and create-react-app should be demonstrated as a conclusion, not as an introduction.
- k__ 8y ago
  Yes, this was the idea. 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
  - syspec 8y ago
    That is exactly correct, the tooling seemed like such a huge thing to sign onto just to find out if i liked a thing.
    - acemarke 8y ago
      Which is why the React "getting started" docs pages were just revamped to emphasis that you can absolutely use it without any tooling: https://reactjs.org/docs/getting-started.html https://reactjs.org/docs/getting-started.html
      - sametmax 8y ago
        It just mentions you can. The doc should do only that: without tooling. It's a react tutorial, not a webpack/babel tutorial. I'd even say you should start with a toto list exercice with only react.createElement, and only move to JSX later. Using CodePen do show you full-gear examples is dishonest IMO.
        acemarke 8y ago
        Honestly, there's lots of different ways you can teach and approach learning React, in the same way there's lots of ways to teach and approach programming. Is it better to teach with something resembling a "real app" setup, so the user can start doing something "meaningful" right away? Or is it better to strip away all abstractions and start from the bare bottom, so that the user understands exactly what's going on under the hood? Both are valid approaches, and a lot of times it depends on both the individual's learning style and what their background is.
k__ 8y ago
It's interesting how I posted this multiple times over, no one cared and just when Dan stared the repo, it gets on HN front-page. 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 http://kay.is and I have a Patreon. https://www.patreon.com/kayis 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.?
- matchbok 8y ago
  Looks really good, props. I have a few friends looking to learn React and this looks to be a good place to start.
  - thinkpad20 8y ago
    Hahaha, “props”. Badamp-tssssh
- troydavis 8y ago
  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-is%2Freact-from-zero&sort=byDate&prefix&page=0&dateRange=all&type=story 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 :-)
  - k__ 8y ago
    I think it has to do with thousand stars. It got it after Dan starred it.
- galfarragem 8y ago
  > Dan starred the repo, it gets on HN front-page 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.
aidos 8y ago
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.
- deleted 8y ago
  [deleted]
navs 8y ago
“Everything runs in the browser without a manual pre-compilation.“ This a million times over. I know webpack isn’t hard but it can be daunting to a newcomer.
- k__ 8y ago
  Often devs new to a project don't need to setup the tooling anyway. They just need to build components and not to configure Webpack and Babel.
sureaboutthis 8y ago
Jeez. Why does anyone do this to themselves? All the work by the javascript guy and then all the work by the server to produce simple HTML/CSS output. I am positive someone will come here and make a claim of large, dynamic sites and reddit's favorite nonsense phrase about DRY but I am also positive more people learn React because online articles tell them to than a real need for them. If one would spend all this time learning HTML/CSS/Javascript fundamentals, and how to properly use them, they would have the same questions I have after 14 years of doing this, for companies large and small, as to why anyone bothers with this, Angular, and all the others. It just makes no sense at all.
- k__ 8y ago
  "more people learn React because online articles tell them to than a real need for them" Yes, like with most software. But I guess the average dev is better off with learning React/Vue/Angular than cobbling together its own thing
- gear54rus 8y ago
  This isn't react only, it's component approach in general, do you, after 14 years, really denounce component approach?
  - sureaboutthis 8y ago
    Are you saying one cannot use a "component approach" without React? That's like saying I'm denouncing cars cause I don't like Chevys.
    - realusername 8y ago
      Yeah you can totally reinvent your component system yourself, or you can just use React which is used in production on thousands of websites and big products with top-level support of hundreds of engineers.
      - sureaboutthis 8y ago
woldemariam 8y ago
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) [0] https://raw.githubusercontent.com/kay-is/react-from-zero/master/04-components.html https://raw.githubusercontent.com/kay-is/react-from-zero/mas...
- k__ 8y ago
  Haha, this is what you get if you don't review PRs :D Guess the array needs a comma and the fragment has to be React.Fragment Nice find!
- redleggedfrog 8y ago
  Ah, and your true React lesson has begun...

222 points by galfarragem 8y ago

I'm fascinated by how much React Tutorials exist over the internet, and how one can replace another five minutes after it get published. It feels like the community it still struggling with this framework , while it has existed for many many years... Very interesting.

k__ 8y ago
Has nothing to do with React. 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.
- wnsire 8y ago
  > Has nothing to do with React. 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.
  - abiox 8y ago
    vue and angular have plenty of tutorials. react is much more popular (at the moment), which is why one would notice material for it more often.

rhapsodic 8y ago

For the life of me, I can't understand why React is as popular as it is. A web application is simply HTML, CSS and Javascript. Why do people want to make it so damn complicated? I was around when browser based apps started to take over the enterprise software world. One of the big selling points was its simplicity compared to native desktop development languages like (horrors!) Visual Basic. Anyone could open up Notepad and create a simple HTML page with some form elements and a submit button. Now, I realize that browsers' capabilities have advanced enormously in the intervening years, but it's still just HTML, CSS and Javascript, once the transpilers and the zillion other build tools get done with it. And I would argue that someone who really knows HTML, CSS and Javascript at a deep level can write it directly and maintain it a lot more efficiently than with a bunch of third-party frameworks and an overly-complex build process.

vbezhenar 8y ago
When people tried to write big enough applications with JavaScript, they found out, that it was a mess. JavaScript is a terrible language, so another languages were born (including modern JavaScript which isn't that bad). DOM is a very low level and very verbose API, so various approaches were taken to simplify development, e.g. jQuery, Angular, React. Hello world apps might be easy to do without frameworks, but once you're making complex pages with dozens of inputs, asynchronous loading, etc, lack of frameworks is likely to turn your code to a mess. Or, if you're brilliant developer, you might invent your own little incomplete buggy framework. It's similar to WinAPI. Sure, you can write C with WinAPI and it's enough for simple applications. But in practice people use better languages and frameworks. Simple JavaScript has its place, of course. If I'm making text-only website and I want to introduce just a little bit of interactivity, like image gallery, using anything but a few lines of JavaScript is overkill.
- rhapsodic 8y ago
  >When people tried to write big enough applications with JavaScript, they found out, that it was a mess. I have written huge, complex, graphics-intensive applications with Javascript, and that was not my experience at all. So maybe it's not the language, but the person using it that is responsible for the mess. > It's similar to WinAPI. Sure, you can write C with WinAPI and it's enough for simple applications. That is a very far-fetched comparison, in my view.
  - ricardobeat 8y ago
    Do you use any framework, library or specific patterns in your apps?
    - rhapsodic 8y ago
      >Do you use any framework, library or specific patterns in your apps? Yes, but my team takes the same approach that Facebook or Google takes. We don't try to shoehorn in some general framework made for some other application by someone else. We make our own, that serves our own particular needs. We are the architects and the builders of our software.

jscholes 8y ago

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?

k__ 8y ago
As far as I know, html head and body are optional per spec.
- spiralganglion 8y ago
  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.
ricardobeat 8y ago
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...

deleted 8y ago

[deleted]

m3tr0s 8y ago

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.

aidos 8y ago
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.

buraksarica 8y ago

Should we expect a written summary for the lessons?

k__ 8y ago
I don't know, do you expect a written summary of them? I thought about turning the whole thing into an ebook once. Maybe a few extra lessons with stuff like HoCs/RPs, more lifecycle methods and some principles?

sametmax 8y ago

That should be the default approach for tutorials on react, including the official web site. Webpack, babel and create-react-app should be demonstrated as a conclusion, not as an introduction.

k__ 8y ago
Yes, this was the idea. 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
- syspec 8y ago
  That is exactly correct, the tooling seemed like such a huge thing to sign onto just to find out if i liked a thing.
  - acemarke 8y ago
    Which is why the React "getting started" docs pages were just revamped to emphasis that you can absolutely use it without any tooling: https://reactjs.org/docs/getting-started.html https://reactjs.org/docs/getting-started.html
    - sametmax 8y ago
      It just mentions you can. The doc should do only that: without tooling. It's a react tutorial, not a webpack/babel tutorial. I'd even say you should start with a toto list exercice with only react.createElement, and only move to JSX later. Using CodePen do show you full-gear examples is dishonest IMO.
      - acemarke 8y ago
        Honestly, there's lots of different ways you can teach and approach learning React, in the same way there's lots of ways to teach and approach programming. Is it better to teach with something resembling a "real app" setup, so the user can start doing something "meaningful" right away? Or is it better to strip away all abstractions and start from the bare bottom, so that the user understands exactly what's going on under the hood? Both are valid approaches, and a lot of times it depends on both the individual's learning style and what their background is.

k__ 8y ago

It's interesting how I posted this multiple times over, no one cared and just when Dan stared the repo, it gets on HN front-page. 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 http://kay.is and I have a Patreon. https://www.patreon.com/kayis 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.?

matchbok 8y ago
Looks really good, props. I have a few friends looking to learn React and this looks to be a good place to start.
- thinkpad20 8y ago
  Hahaha, “props”. Badamp-tssssh
troydavis 8y ago
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-is%2Freact-from-zero&sort=byDate&prefix&page=0&dateRange=all&type=story 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 :-)
- k__ 8y ago
  I think it has to do with thousand stars. It got it after Dan starred it.
galfarragem 8y ago
> Dan starred the repo, it gets on HN front-page 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.

aidos 8y ago

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.

deleted 8y ago
[deleted]

navs 8y ago

“Everything runs in the browser without a manual pre-compilation.“ This a million times over. I know webpack isn’t hard but it can be daunting to a newcomer.

k__ 8y ago
Often devs new to a project don't need to setup the tooling anyway. They just need to build components and not to configure Webpack and Babel.

sureaboutthis 8y ago

Jeez. Why does anyone do this to themselves? All the work by the javascript guy and then all the work by the server to produce simple HTML/CSS output. I am positive someone will come here and make a claim of large, dynamic sites and reddit's favorite nonsense phrase about DRY but I am also positive more people learn React because online articles tell them to than a real need for them. If one would spend all this time learning HTML/CSS/Javascript fundamentals, and how to properly use them, they would have the same questions I have after 14 years of doing this, for companies large and small, as to why anyone bothers with this, Angular, and all the others. It just makes no sense at all.

k__ 8y ago
"more people learn React because online articles tell them to than a real need for them" Yes, like with most software. But I guess the average dev is better off with learning React/Vue/Angular than cobbling together its own thing
gear54rus 8y ago
This isn't react only, it's component approach in general, do you, after 14 years, really denounce component approach?
- sureaboutthis 8y ago
  Are you saying one cannot use a "component approach" without React? That's like saying I'm denouncing cars cause I don't like Chevys.
  - realusername 8y ago
    Yeah you can totally reinvent your component system yourself, or you can just use React which is used in production on thousands of websites and big products with top-level support of hundreds of engineers.
    - sureaboutthis 8y ago

woldemariam 8y ago

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) [0] https://raw.githubusercontent.com/kay-is/react-from-zero/master/04-components.html https://raw.githubusercontent.com/kay-is/react-from-zero/mas...

k__ 8y ago
Haha, this is what you get if you don't review PRs :D Guess the array needs a comma and the fragment has to be React.Fragment Nice find!
redleggedfrog 8y ago
Ah, and your true React lesson has begun...