https://github.com/tejasbubane/reactjs-training
My material for conducting ReactJS training
https://github.com/tejasbubane/reactjs-training
es6 reactjs training
Last synced: about 1 month ago
JSON representation
My material for conducting ReactJS training
- Host: GitHub
- URL: https://github.com/tejasbubane/reactjs-training
- Owner: tejasbubane
- Created: 2019-01-21T10:31:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-23T07:57:27.000Z (over 7 years ago)
- Last Synced: 2025-03-25T09:51:26.456Z (about 1 year ago)
- Topics: es6, reactjs, training
- Language: JavaScript
- Size: 65.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactJS Training Material
I conducted [ReactJS](https://reactjs.org/) training at my company [Cybrilla](http://cybrilla.com/).
This is my training material.
Please feel free to reach out to me if you find any errors/inconsistencies.
## MERN Training Demo App
Products portal where users can login, create products and filter them on price-range.
1. Starts with very basic use of react without any build tools
1. Uses [Webpack](https://webpack.js.org/) with basic handmade easy-to-explain config.
1. The portal interacts with APIs of nodejs app built in the [node training](https://github.com/tejasbubane/nodejs-training).
### Requirements:
1. Newer version of NodeJS installed. `v8+` should work.
1. MongoDB installed and running on port `27017`.
## Session Outline
### Basics
Duration: 2hrs
* Build basic react hello world app using plain HTML and no build system
* Live-demo and walkthrough of `counter` and `todoapp` examples in codesandbox - [ref](/basics)
* Explain [the philosophy of react](react-philosophy.md)
* Create main app with webpack custom build config and start integration with the node app
* Toggle between users and products list
### Advanced
Duration: 2hrs
* Introduce React Router
* Implement login-logout functionality
* Add price-range filters as slightly advanced example of handling props and routes
_Git commits are tagged at sessions_
## Resources
#### Video Courses (All free)
* [Javscript basics](https://javascript30.com/)
* [The beginner's guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-reactjs)
* [Getting started with Redux](https://egghead.io/courses/getting-started-with-redux)
* [Redux advanced](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)
#### Documentation
* [Learn ES6](https://babeljs.io/learn-es2015/)
* [ReactJS getting started](https://reactjs.org/docs/hello-world.html)
* [Webpack](https://webpack.js.org/concepts/)
* [React Router v4 docs](https://reacttraining.com/react-router/web/)
* [Redux docs](https://redux.js.org/)
#### Few articles worth reading
* [Thinking in React](https://reactjs.org/docs/thinking-in-react.html)
* [WTF is JSX](https://jasonformat.com/wtf-is-jsx/)
### [Project Ideas](/project_ideas.md)
## Contact
* Email: [my-github-username] [at] gmail [dot] com
* Twitter: [@tejasbubane](https://twitter.com/tejasbubane/)