React.js
by Facebook
React key features
- what is react.js?
- state vs props
- jsx vs js
- jQuery vs React click event
- extras (Express.js, react router and more)
What is react.js?
React is a view library ( not a full MVC but just the "V") and not a framework (like Angular or Backbone) . It uses a declarative syntax to build user interfaces made of react components.
Advantages
- easy to understand the layout by looking at the render function
- all your css and js can be inside one component avoiding global conflicts
- easier to test, you can integrate jest
Disadvantages
- it doesn't have lots of functionalities as it only deals with the view
State vs props
The state of a react component (components with state are called stateful components) is strictly related to the component itself. It is mutable because of user input or ajax calls.
Props is data that can be transferred to components in one way data flow (top level down). It's not strictly related to the component itself and it's immutable.
JS vs JSX components
React components can be written in vanilla JS or in JSX (needs babel to be compiled to JS, same applies when using ES6)
JSX advantage
Very similar to HTML
JS disadvantage
- more code and difficult to read if you have a big component
Example
jQuery vs React click event
Moving from jQuery to React has been a little bit challenging because you don't deal with the DOM, instead React uses a virtual DOM or shadow DOM. (abstraction of the real DOM)
React.js Introduction For People Who Know Just Enough jQuery To Get By
What's next?
- react router and express.js for server side rendering
- setting up a React enviroment with ES6, Babel, Webpack and JSX
- Accenture t-shirt designer with React? (personally I think that using a framework for this is an overkill but we could start having a go at React since the project is not a big one in terms of coding)
Questions????
React.js
By Alessandro Santese
