
React from zero: a simple tutorial for React - galfarragem
https://github.com/kay-is/react-from-zero
======
aidos
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.

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

~~~
redleggedfrog
Ah, and your _true_ React lesson has begun...

------
m3tr0s
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
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.

------
k__
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.?

~~~
IloveHN84
Who's Dan?

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.

~~~
k__
Dan Abramov is a React core developer from Facebook.

------
sametmax
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__
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
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
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
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
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.

------
navs
“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__
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.

------
wnsire
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__
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
> 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
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.

------
jscholes
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__
As far as I know, html head and body are optional per spec.

~~~
spiralganglion
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.

------
buraksarica
Should we expect a written summary for the lessons?

~~~
k__
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?

------
sureaboutthis
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.

~~~
untog
If you've been in the industry for 14 years, know JS and CSS inside out, and
still don't understand why anyone wants to use React... I think you're the one
missing some understanding, not the people who choose to actually learn the
framework in question.

~~~
olavgg
I disagree, everything is much simpler without React. I'm actually working on
writing a tutorial for creating structured code for dynamic content with
vanilla JS. With Ecmascript 6, a lot of advanced concepts has become much
simpler and easier to read.

~~~
ng12
> everything is much simpler without React

What's "everything"? Writing a mostly static webpage with a few moving bits?
Yeah, sure. Building and maintaining a complex SPA on a team of 4+ developers?
I'll take React any day.

------
rhapsodic
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
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
_> 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.

~~~
abiox
> So maybe it's not the language, but the person using it

oh. it would seem this is more about you feeling impressed with yourself,
rather than making substantive arguments.

~~~
rhapsodic
_> oh. it would seem this is more about you feeling impressed with yourself,
rather than making substantive arguments._

That is my argument. It's simple logic. If I can get good results without
React, I've proven that React is not necessary to get good results.

~~~
abiox
that seems like a trivially true statement, if not an outright tautology.

