Reacting to Change - abukhalil-LTUC-ASAC/amman-401d4 GitHub Wiki

Here starts the real Presentation.

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.

How many _vue's _are there?

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

Hello World

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')
);

Vocabulary to explore

  • 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.

⚠️ **GitHub.com Fallback** ⚠️