Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kay-is/react-from-zero

A simple (99% ES2015 less) tutorial for React
https://github.com/kay-is/react-from-zero

example learning lesson react tutorial

Last synced: about 21 hours ago
JSON representation

A simple (99% ES2015 less) tutorial for React

Host: GitHub
URL: https://github.com/kay-is/react-from-zero
Owner: kay-is
License: gpl-2.0
Created: 2015-10-23T18:10:39.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2019-01-23T17:51:43.000Z (almost 6 years ago)
Last Synced: 2025-01-03T12:02:43.759Z (8 days ago)
Topics: example, learning, lesson, react, tutorial
Language: HTML
Homepage: https://www.fullstackreact.com/react-from-zero/
Size: 81.1 KB
Stars: 4,599
Watchers: 129
Forks: 404
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome - react-from-zero - A simple (99% ES2015 less) tutorial for React (HTML)
Starred-Repo - React From Zero
awesome-awesome - React from zero
awesome-github-star - react-from-zero - is | 4606 | (HTML)
awesome-list - react-from-zero - is | 4636 | (HTML)

README

        # React From Zero

A simple (99% ES2015 less) tutorial for React. Everything runs in the browser without a manual pre-compilation.

[![Book Banner](https://i.imgur.com/ZbXgQrw.png)](https://www.fullstackreact.com/react-from-zero/)

## Create React App

If you want to run the examples with [create-react-app](https://github.com/facebook/create-react-app), you have to copy the `text/babel` script parts of the examples into the `src/index.js` file of the React app you created and change the `renderTarget`s ID from `app` to `root`.

## Translations

- [![china](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **中文/Chinese**](https://github.com/chinanf-boy/react-from-zero)

- [![brazil](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**](https://github.com/andre-motta/react-from-zero)

- [![Russia](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**](https://github.com/lex111/react-from-zero)

- [![Spain](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Español / Spanish**](https://github.com/sejas/react-desde-cero)

- [![Korean](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**](https://github.com/YongPilMoon/react-from-zero)

## Lessons

[Lesson 0 - Object Elements](https://github.com/kay-is/react-from-zero/blob/master/00-object-elements.html) -

[Preview](http://kay-is.github.io/react-from-zero/00-object-elements.html)

[Lesson 1 - Element Factory](https://github.com/kay-is/react-from-zero/blob/master/01-element-factory.html) -

[Preview](http://kay-is.github.io/react-from-zero/01-element-factory.html)

[Lesson 2 - JSX](https://github.com/kay-is/react-from-zero/blob/master/02-jsx.html) -

[Preview](http://kay-is.github.io/react-from-zero/02-jsx.html)

[Lesson 3 - Nested Elements](https://github.com/kay-is/react-from-zero/blob/master/03-nested-elements.html) -

[Preview](http://kay-is.github.io/react-from-zero/03-nested-elements.html)

[Lesson 4 - Components](https://github.com/kay-is/react-from-zero/blob/master/04-components.html) -

[Preview](http://kay-is.github.io/react-from-zero/04-components.html)

[Lesson 5 - Properties](https://github.com/kay-is/react-from-zero/blob/master/05-properties.html) -

[Preview](http://kay-is.github.io/react-from-zero/05-properties.html)

[Lesson 6 - Property Types](https://github.com/kay-is/react-from-zero/blob/master/06-property-types.html) -

[Preview](http://kay-is.github.io/react-from-zero/06-property-types.html)

[Lesson 7 - Property Example](https://github.com/kay-is/react-from-zero/blob/master/07-property-example.html) -

[Preview](http://kay-is.github.io/react-from-zero/07-property-example.html)

[Lesson 8 - Nested Components](https://github.com/kay-is/react-from-zero/blob/master/08-nested-components.html) -

[Preview](http://kay-is.github.io/react-from-zero/08-nested-components.html)

[Lesson 9 - Component Classes](https://github.com/kay-is/react-from-zero/blob/master/09-component-classes.html) -

[Preview](http://kay-is.github.io/react-from-zero/09-component-classes.html)

[Lesson 10 - Example App](https://github.com/kay-is/react-from-zero/blob/master/10-example-app.html) -

[Preview](http://kay-is.github.io/react-from-zero/10-example-app.html)

[Lesson 11 - Lifecycle Methods](https://github.com/kay-is/react-from-zero/blob/master/11-lifecycle-methods.html) -

[Preview](http://kay-is.github.io/react-from-zero/11-lifecycle-methods.html)

[Lesson 12 - Component refactor](https://github.com/kay-is/react-from-zero/blob/master/12-component-refactor.html) -

[Preview](http://kay-is.github.io/react-from-zero/12-component-refactor.html)

[Lesson 13 - Element Refactor](https://github.com/kay-is/react-from-zero/blob/master/13-element-refactor.html) -

[Preview](http://kay-is.github.io/react-from-zero/13-element-refactor.html)

[Lesson 14 - References](https://github.com/kay-is/react-from-zero/blob/master/14-references.html) -

[Preview](http://kay-is.github.io/react-from-zero/14-references.html)

[Lesson 15 - Simple Integration](https://github.com/kay-is/react-from-zero/blob/master/15-simple-integration.html) -

[Preview](http://kay-is.github.io/react-from-zero/15-simple-integration.html)

[Lesson 16 - Advanced Integration](https://github.com/kay-is/react-from-zero/blob/master/16-advanced-integration.html) -

[Preview](http://kay-is.github.io/react-from-zero/16-advanced-integration.html)

[Lesson 17 - Unit Testing](https://github.com/kay-is/react-from-zero/blob/master/17-unit-testing.html) -

[Preview](http://kay-is.github.io/react-from-zero/17-unit-testing.html)