React Hooks info

How To Fetch Data From an API With React Hooks: https://medium.com/better-programming/how-to-fetch-data-from-an-api-with-react-hooks-9e7202b8afcd

They let you use state and other React features without writing a class.

https://reactjs.org/docs/hooks-overview.html

React: Class Component VS Function Component with Hooks:
https://dev.to/danielleye/react-class-component-vs-function-component-with-hooks-13dg

Hooks are a new addition in React 16.8. The most useful feature of Hooks is that it allows using state without using class.

Effect hook will get invoked with the first DOM updating. We can pass in a function in useEffect, and every time the DOM gets updated, the function in useEffect will get invoked too. Also, the effect hook allows you to pass in an array as the second argument, which contains all the dependencies that will trigger the effect hook. if any of the dependencies changed, the effect hook will run again. This feature provides us a more efficient way to make an Ajax request. Instead of making the request every time with DOM updates, you can pass in dependencies that only make the request while these values change.

Comparing with these two ways to create a component, we can clearly see that hooks need less code and it is more clear to read and understand. Hooks give us a more efficient way to replace lifecycle methods.

React Js

React JS for Beginners — The Basics: https://codeburst.io/react-js-for-beginners-the-basics-87ef6e54dae7

React Function Components info

https://www.robinwieruch.de/react-function-component

Cloud Firestore — Add, Set, Update, Delete, Get data – https://saveyourtime.medium.com/firebase-cloud-firestore-add-set-update-delete-get-data-6da566513b1b

Working with Bootstrap’s Modals in React: https://www.pluralsight.com/guides/working-with-bootstraps-modals-react

React Js info, link

React Tutorial: An Overview and Walkthrough:

https://www.taniarascia.com/getting-started-with-react

JSX:
https://www.taniarascia.com/getting-started-with-react/#jsx-javascript–xml

Create a New React App:
https://reactjs.org/docs/create-a-new-react-app.html

Rendering Elements:
https://reactjs.org/docs/rendering-elements.html

Components:
https://reactjs.org/docs/components-and-props.html

Start With A Mock:
https://reactjs.org/docs/thinking-in-react.html#start-with-a-mock

Step 1: Break The UI Into A Component Hierarchy
https://reactjs.org/docs/thinking-in-react.html#step-1-break-the-ui-into-a-component-hierarchy

React Props:
https://www.w3schools.com/react/react_props.asp

Rendering a Component:

https://reactjs.org/docs/components-and-props.html#rendering-a-component

The constructor() method:

https://reactjs.org/docs/react-component.html#constructor

If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

Avoid copying props into state! This is a common mistake.

You Probably Don’t Need Derived State:
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

React Event, Binds:

https://www.w3schools.com/react/react_events.asp

Passing Arguments to Event Handlers:

https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

Event binding: https://www.debuggr.io/react-setstate-is-not-a-function/

Building Your First React App: https://codeburst.io/building-your-first-react-app-c1f6eb814205

Calculator app: https://medium.com/@nitinpatel_20236/how-to-build-a-simple-calculator-application-with-react-js-bc10a4568bbd

Body Mass Index Calculator: https://www.proglogic.com/code/javascript/calculator/bmi.php

~~~~~~~~~~
Publish, Build:

Creating a Production Build: https://create-react-app.dev/docs/production-build/

Deployment: https://create-react-app.dev/docs/deployment/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ReactJs + WordPress: https://snipcart.com/blog/reactjs-wordpress-rest-api-example

Free Bird WP oldalon

Use WordPress with React to Create Headless CMS for Your Web Application:

https://www.cloudways.com/blog/use-react-with-wordpress-to-create-headless-cms/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Simple examples:

https://vegibit.com/a-simple-react-js-form-example/

https://reactjs.org/community/examples.html

https://react.rocks/tag/Beginner

Guitar chords: https://reactjsexample.com/simple-react-component-for-guitar-chord-charts-with-audio/

Kódbázis: https://www.youtube.com/channel/UCRNRqohbalZqwuQCb_zawcg

How to pass props to React components in Laravel

,

One of the challenges I faced is to pass props from Laravel to React using Blade, and I’ve found a very quick workaround. Let’s suppose your react component gets an entity ID as a prop so you can load data when your component will mount, the idea here is to create a div in your Blade view which will contain the props you will be passing to your components

https://medium.com/@aminebenkeroum/how-to-pass-props-to-react-components-in-laravel-f9d32a0c5426

React Js and Firebase , Firestore info

Integrating Firestore to React app: https://sebhastian.com/react-firestore/

React Firebase CRUD with Realtime Database: https://bezkoder.com/react-firebase-crud/

Building a Real-Time Chat App with React and Firebase:

https://css-tricks.com/building-a-real-time-chat-app-with-react-and-firebase/

How to Build a TodoApp using ReactJS and Firebase: https://www.freecodecamp.org/news/how-to-build-a-todo-application-using-reactjs-and-firebase/

React Ionic Firebase – Build Ionic 5 React Firebase Coronavirus Dashboard Mobile App