A list of tutorials for beginner practice projects in React and Redux for those who like to learn by coding.

React-Redux-Resources.md

Hands-On Tutorials for React and Redux

Beginner practice projects in React and Redux for those who like to learn by coding.

There's so much out there and many ways to start out. This is a start, from here your path can branch out how you prefer.

All resources and references are free and/or open source.

React

First projects using Facebook's Create-React-App, a barebones React app. (Best for learning only). Avoid having to research, install, and configure a setup. Jump to being able to try it to get a better sense of it.

1. Facebook's Github for React is the best step-by-step quick start guide. It has a quick start, starter practice project etc. Just follow the ReadMe. https://github.com/facebook/react

2. This gives a more in-depth intro into React works. The above link uses Create-React-App just to do some quick exercises. This delves into more React philosophies. Get this up and running by following the ReadMe. It's partially a tutorial, partially an installation guide. Use this to bootstrap all you practice projects. https://github.com/facebook/create-react-app

3. Find some mini apps to build.

Redux

4. Everyone's First Redux Practice Exercise, To-Do List! https://redux.js.org/basics/example-todo-list

5. More Practice Exercises https://redux.js.org/introduction/examples

6. Browse a list of many learning resources for Redux, specifically React-Redux. https://redux.js.org/introduction/learning-resources

Javascript ES6

Much of JSX incorporates ES6 which includes things like Arrow Functions, Spread and Rest Operators, Array Methods, and much more. So it's good to know.

If you know JS already and want to see what's new!

• A handy rundown of the features in ES6 http://es6-features.org/

If you don't (or do) and want a good read. It includes exercises and solutions you can code online!

• A (really well written) quintessential book on JS http://eloquentjavascript.net/

More practice with ES6. Includes solutions as well.

• ES6 Practice Exercises by the author of Eloquent JS https://marijnhaverbeke.nl/talks/es6_falsyvalues2015/exercises/

References and Docs

Official React API Reference https://reactjs.org/docs/react-api.html

Official React-Redux API Reference https://github.com/reduxjs/react-redux/blob/master/docs/api.md#api

MDN Javascript Reference includes ES6 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

My Goal in Learning

• Get coding by doing mini apps to start in order to learn React.
• While doing so incorporate new tools to explore.
• Final project was to create my own, configurable barebones React App with my chosen configuration. One that I could use to bootstrap my production apps.

Some of my React Practice Apps

Uses live prototypes to explore and learn different tools.

• Basket App - https://github.com/AliceWonderland/Basket-App Practice React/Redux using Create-React-App (Grocery List)
• Giphy App - https://github.com/AliceWonderland/Giphy-App Explore Build Tools like Babel and Webpack by creating my own custom build (Giphy and Reddit Aggregator)
• Wizard App - https://github.com/AliceWonderland/Wizard-App Practicing Form Validation in React (Signup Form)
• Boilerplate - https://github.com/AliceWonderland/React-App Practicing configs for bootstrapping, still a WIP (Barebones React App)