React
Certificates
-
Get started with ReactGet started with ReactAchievements - khanhlvh _ Microsoft Learn.pdf
-
Working with data and properties in React components Working with data and properties in React componentsAchievements - KhanhLVH _ Microsoft Learn.pdf
-
React state and events React state and eventsAchievements - KhanhLVH _ Microsoft Learn.pdf
-
Creating your first web apps with React Creating your first web apps with ReactAchievements - KhanhLVH _ Microsoft Learn.pdf
-
Certified React Developer https://interstate21.com/certificate/?code=4C21RAY KhanhLVH_React.pdf
-
Redux Saga with React: Fast-track Redux Saga intro course https://www.codecademy.com/profiles/Khanh.Le Learn React Testing Create a front-end app with React Learn React Router Learn React Learn React.js: Part II
Cheatsheets
Prerequisite
What is HTML https://www.w3schools.com/whatis/whatis_html.asp 5m
What is CSS https://www.w3schools.com/whatis/whatis_css.asp 5m
What is DOM https://www.w3schools.com/whatis/whatis_htmldom.asp 5m
What is ES6 https://www.w3schools.com/js/js_es6.asp
What is Node.js https://www.w3schools.com/nodejs/default.asp
What is npm https://www.w3schools.com/whatis/whatis_npm.asp
JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript 30m-1h
Modern JavaScript in React Documentation https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c 5m
https://www.udacity.com/course/intro-to-javascript--ud803 Approx. 2 Weeks
https://www.udacity.com/course/shell-workshop--ud206 Approx. 1 Days
https://www.udacity.com/course/intro-to-html-and-css--ud001 Approx. 3 Weeks
https://www.udacity.com/course/javascript-design-patterns--ud989 Approx. 6 Weeks
https://www.udacity.com/course/asynchronous-javascript-requests--ud109 Approx. 3 Weeks
https://www.udacity.com/course/es6-javascript-improved--ud356 Approx. 4 Weeks
https://www.udacity.com/course/front-end-frameworks--ud894 Approx. 8 Weeks
https://www.udacity.com/course/version-control-with-git--ud123 Approx. 4 Weeks
https://www.udacity.com/course/front-end-web-developer-nanodegree--nd0011 160h 4 Months At 5-10 hrs/week
Official
https://github.com/facebook/react
https://reactjs.org/
https://reactjs.org/docs/hello-world.html Learn by concept 5m/page
https://reactjs.org/tutorial/tutorial.html Learn by doing
https://reactjs.org/docs/create-a-new-react-app.html
https://reactjs.org/docs/getting-started.html
https://reactjs.org/docs/react-api.html
https://reactjs.org/docs/thinking-in-react.html
https://reactjs.org/community/support.html Ask for help
Frameworks
https://ionicframework.com/react
Paths
https://www.codecademy.com/paths/build-web-apps-with-react/tracks/intro-to-building-web-apps-with-React/modules/overview-of-react/lessons/overview-js-react/exercises/intro
https://www.udacity.com/course/react-nanodegree--nd019 160h 4 Months at 10 hours / week
Courses
sudo npm i -g create-react-app
sudo npm i -g npm
npx create-react-app myfirstreact
cd myfirstreact
npm start
npm i node-sass functional component: function AComponent(props){return <div>{this.props.name}</div>;}const [name, setName] = useState("initial name");
useEffect(()=>{
// mount, update
return () => {
// will unmount
}
},
[name]);
class component: class AComponent extends React.Component setState({name: value});
lifecycle:
componentDidMount
componentDidUpdate
componentWillUnmount
React 101
https://www.codecademy.com/learn/react-102
https://app.pluralsight.com/library/courses/react-components-designing
https://app.pluralsight.com/library/courses/react-native-applications-using-expo/table-of-contents
React Tutorial 30m
npm install -g expo npm install -g expo-cli
propName={this.eventHandler} vs propName={eventHandler}
this.methodName = this.methodName.bind(this);
Guides
https://app.pluralsight.com/guides/get-json-of-mongo-collection-with-and-xhr-request
Ebooks
ASP.NET Core 3 and React
React Projects
Full-Stack React Projects
https://www.syncfusion.com/ebooks/react-succinctly
https://www.syncfusion.com/ebooks/reactjs_succinctly
Hands-On Full Stack Development with Spring Boot 2 and React - Second Edition May 2019
Tools
Chrome
React Developer Tool
Test
https://www.syncfusion.com/kb/10369/selenium-test-automation-for-react
Notes
Routing
State Management
Flux
JSX
npm instal react react-dom next
blitz
nextjs
Higher order component
npm install recompose
Render Prop
useContext
useState => useReducer()
useEffect
npm install axios
page loading status : loading, success, error
npm install json-server
useRef cancel request
set state, call api, back to previous state when error
toast
npm install react-notifications-component
ErrorBoundary