gem-hunter
Language: JavaScript
Learning React topic by topic: elements, components, props, local state, controlled components, lifecycle, conditional rendering, Redux, unit tests, Webpack and a full client app.
Original MOTTO: An easy way to learn React through examples.
Updated MOTTO: Learning React topic by topic.
Seven runnable projects, each with its own README. Four of them were not linked from anywhere before, which is why they are listed here.
| project | what it shows |
|---|---|
| basic-react-example-state | the same UI as a class component with state and as a functional component with props |
| basic-react-example-map-with-key | the key prop, and why a stable one matters |
| basic-react-example-lifecycle | every lifecycle method logging as it fires |
| basic-webpack-default | webpack with no configuration at all |
| react-redux-webpack-client | React and Redux built with webpack directly, no create-react-app |
| react-redux-webpack-client-server | the same, plus server-side rendering with express |
| react-redux-webpack-client-server-scripts | the same again, with client and server builds split apart |
One flag for the webpack projects. webpack 4 hashes with md4, which OpenSSL 3 removed from its default
provider, so on Node 17 and later a build fails with ERR_OSSL_EVP_UNSUPPORTED before it starts. Prefix the
build with NODE_OPTIONS=--openssl-legacy-provider. Each README says so where it is needed.
The code in these lessons is checked rather than trusted:
npm install
npm testThat parses every JavaScript and JSON snippet in the lesson files, and resolves every relative link, image and
anchor. npm run test:links:external also checks the outbound URLs, which CI does monthly rather than on
every push, because a link to somebody else's site rots on a clock rather than on commits.
2/21/19 UPDATE:
Many things happened in React and its ecosystem. I will try to update the sections to React 16.8.\* (Hooks and some interesting new APIs) and go deeper in the “Life cycle” paragraph for class-based Components. Also, I will be splitting sections in sub-sections for better understanding and proper grouping.
After several years of contributing, mentoring and working with JS and React, I decided to “put together” some notes linked to recurrent doubts and obstacles that friends and co-workers have to face daily.
This is a pure practical guide (ps, it was at the beginning): please, keep the practical intention present throughout these "shared notes"; I don't have the intent of challenging the great and plentiful coaching classes, nor the books/"white papers" that today, you can easily find anywhere (starting with Facebook's own proprietary documentation).
My aim, as I stated before (even with the latest add-ons and updates), is -still- clearly pragmatic. You will see some concepts and technicalities (as general and well-needed context), but you should (perhaps must) complement this "joint exercise" with other materials. I try to avoid quoting or referencing, given that an important part of your training is discovering good sources and picking those that satisfy your own and extremely personal "way to learn". However, taking a look at the mother source will not hurt you: react.
You should have an intermediate knowledge of JavaScript, including some exposure to ES2015 / ES6. The lessons introduce more advanced topics (closures, currying, the event loop) as needed, but a missing JS foundation will make the React parts much harder than they need to be.
Concretely, before starting you should be comfortable with:
let/const, arrow functions, template literals, default parameters, rest/spread.import/export (default and named)..map(), .filter(), .reduce().async/await.this keyword and how its value is determined.If any of these are unfamiliar, work through the Intro chapters first and come back when they feel comfortable.
Before proceeding with the tutorial, be sure that you have installed or, install...
Required
npm which comes with Node or yarn)Note: packages, dependencies, libraries... are going to be referenced on-demand. Those whose scope is bigger will be addressed in 09_packages
Recommended
Git bash https://git-scm.com/downloads as a CMD replace, or, PowerShellAlternatives
yarn https://yarnpkg.com/lang/en/docs/install/
Alternative to npm. I will be using yarn
(At the moment of writing this doc there are no major differences between the two.)
Learn more about the npm registry consumed by both, yarn and npm