React is an open-source front-end Javascript library used for building user interfaces. It is maintained by a community of developers and Facebook. React uses Babel, a Javascript compiler, used to convert edge JavaScript(ES6) into plain old ES5 JavaScript that can run in any browser, even the old ones.
JSX is a syntax extension to Javascript. JSX allows us to shorten code used in vanilla Javascript.
PROP VS STATE
What is a Prop?
Props are short for properties. It is a special keyword in React, that is used for passing data from one component to another. Essentially, props are arguments passed into React components. Props are passed via JSX attributes. They are set by the parent component and cannot be changed. The only way to change React elements is to render a new element when you want to change something.
What is state?
State is a Javascript object that that stores component’s dynamic data and it enables a component to keep track of changes between renders. State is dynamic, you use it for interactivity so you would not use it for static projects.
State can only be used within a class and usually, the only place you would assign this.state is the constructor. State is managed within the component. It describes the status of the entire program or an individual object. It could be text, a number, a boolean, or another data type.
State should not be modified directly, but it can be modified with a special method called setState().
In Conclusion:
Components receive outside data with props, they can manage their own data with state.
We use props to pass data, we use state to manage data.
Props should be passed from parent component.
Props cant be modified by a component receiving it from outside.
State can be modified in its component but can’t be accessed outside of it.
State should be modified with setState() method.
I hope this helped with differentiating prop vs state. For more information, check out the React documentation, https://reactjs.org/docs/hello-world.html. Happy Coding! :)