Various projects related to React, ReactJS and React Native

Here are some projects related to ReactJS, some of them are from the Udemy's 2021 versions.

• ReactCG2021 for the React - The Complete Guide (incl Hooks, React Router, Redux) (Ed. 2021) by Maximilian Schwarzmüller. Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!. We can use the following tools:

  • CodePen It's a social development environment for front-end designers and developers.
  • JSBin It's another web editor and makes easy for Us to enter some JS code and see some console output.

• ReactCG2023 for the React - The Complete Guide (incl Hooks, React Router, Redux) (Ed. 2023) by Maximilian Schwarzmüller. Dive in and learn React.js from scratch! Learn React, Hooks, Redux, React Router, Next.js, Best Practices and way more!. We can use the following tools:

  • CodeSandbox CodeSandbox keeps you in flow by giving you cloud development environments that resume in 1 second..

JS Array Functions

Not really next-gen JavaScript, but also important: JavaScript array functions like map() , filter() , reduce() etc. You'll see me use them quite a bit since a lot of React concepts rely on working with arrays (in immutable ways).

The following page gives a good overview over the various methods you can use on the array prototype - feel free to click through them and refresh your knowledge as required: JS Reference: Array. Particularly important in this course are:

• map() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• find() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
• findIndex() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
• filter() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• reduce() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b
• concat() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat?v=b
• slice() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
• splice() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Useful Resources & Links

• create-react-app: https://github.com/facebookincubator/create-react-app
• Introducing JSX: https://reactjs.org/docs/introducing-jsx.html
• Rendering Elements: https://reactjs.org/docs/rendering-elements.html
• Components & Props: https://reactjs.org/docs/components-and-props.html
• Listenable Events: https://reactjs.org/docs/events.html
• Conditional Rendering: https://reactjs.org/docs/conditional-rendering.html
• Lists & Keys: https://reactjs.org/docs/lists-and-keys.html
• Using CSS Modules in create-react-app Projects: https://medium.com/nulogy/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2
• More information about CSS Modules: https://github.com/css-modules/css-modules
• Error Boundaries: https://reactjs.org/docs/error-boundaries.html
• Chrome Devtool Debugging: https://developers.google.com/web/tools/chrome-devtools/javascript/
• Reference vs Primitive types: https://academind.com/tutorials/reference-vs-primitive-values/
• More on useEffect(): https://reactjs.org/docs/hooks-effect.html
• State & Lifecycle: https://reactjs.org/docs/state-and-lifecycle.html
• PropTypes: https://reactjs.org/docs/typechecking-with-proptypes.html
• Higher Order Components: https://reactjs.org/docs/higher-order-components.html
• Refs: https://reactjs.org/docs/refs-and-the-dom.html
• Enabling CSS Modules: https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
• Styled Components: https://styled-components.com/

Reaching out to the Web from React (Http/Ajax)

• Axios Docs: https://github.com/axios/axios
• JSON Placeholder: https://jsonplaceholder.typicode.com/ is a free online REST API that you can use whenever you need some fake data. It can be in a README on GitHub, for a demo on CodeSandbox, in code examples on Stack Overflow,...or simply to test things locally.

Backend Service

• Firebase: https://firebase.google.com This is a free service offered by google, it is an out-to-the-box working backend which includes a data base.