Reacting to Change - abukhalil-LTUC-ASAC/amman-401d4 GitHub Wiki
What was the backend, is shifted towards the front-end. Now I don't know about you, but having either or was quite depressing without the other. It does look like however, its a necessary practice and the way to flatten the learning curve which could have been overwhelming.
React will be the main framework to learn front-end development, you might remember using jQuery library which also acts on the front end. But what’s the difference between a framework and a library? The real difference is basically who is in charge of the work-flow, jQuery allowed you to do whatever you wanted using prescribed functions and methods, React however steers you into its own flow, restricting how you can work its own libraries, for your own benefit of course.
Other libraries include Angular.js, Vue.js, Ember.js, Meteor and don't forget ejs with node.js
Things are a bit different in React, its very common to see variables that are neither strings, nor proper DOM elements. The way this framework operates is to embrace both worlds to do proper reactions. This allows flexibility in assigning value and variables, then directly apply ReactDOM.render to display it, this variable is known as the JSX
const val = 'Hello World';
const element = <h1>{val}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
-
Rendering: Not exactly like HTML document rendering on the browser, but similar in a way that HTML is a function component in React, and render is the act of passing values into the component. It's the way to move data between components, and is finally made into React elements, and passed into the React DOM
ReactDOM.render(element, document.getElementById('root'));
. -
Templates: means React libraries and ready code bases that could easily be integrated into projects, they represent parts of UI elements that have special functionalities to help speed up prototyping and development.
-
State: is how React, reacts to change. By implementing methods inside a class, and pass prop into
this.state = changingVariable
we could ensure that this self contained class, whenever invoked has all functionalities it needs to act properly.