React js for beginners

React js for beginners

• 1.
  ReactJS For Beginners A.Valenti Inspired by:AndrewRay blog
• 2.
  What is React? Reactis ONLY THE VIEW LAYER. React is often mentioned in the same breath as other Javascript frameworks, but React is not a complete framework. This is why React is so confusing to understand, it's emerging in an ecosystem of complete frameworks, but it's just the view.
• 3.
  React is atemplate language React gives you a template language and some function hooks to essentially render HTML. That's all React outputs, HTML. Your bundles of HTML / Javascript, called "components", are allowed things like storing their own internal state in memory (such as which tab is selected in a tab view), but in the end you just barf out HTML.
• 4.
  React application You absolutelycannot build a fully functional dynamic application with React alone.
• 5.
  The good You canalways tell how your component will render by looking at one source file. // HTML <header> <div class="name"> Not Logged In </div> </header> // JS $.post('/login', credentials, function( user ) { // Modify the DOM here $('header .name').text( user.name ); }); How do you debug the output? Who updated the header? Who else has access to the header HTML? Who holds the source of truth for the name being visible? HTML + JS render: function() { return <header> { this.state.name ? this.state.name : <span>Not Logged In</span> } </header>; } We can tell instantly how this component will render. If you know the state, you know the rendered output. You don't have to trace program flow. When working on complex applications, especially in teams, this is critically important. React
• 6.
  working with JSXcomponents is really nice. Bundling Javascript and HTML into JSX makes components easily understandable. The weird mix of HTML / Javascript soup might make you feel lost. Traditionally you separate views (HTML) from functionality (Javascript). This leads to monolithic Javascript files containing all functionality for one "page", and you have to trace complex flow from JS > HTML > JS > bad-news-sad-time. In React your Javascript has intimate knowledge of your HTML, so mashing them together makes sense.
• 7.
  You can renderReact on the server. If you're building a public facing site or app and you're following the render-it- all-on-the-client path, you've already done it wrong. You can render React on the server, using node modules, example : browserify = require('browserify'), literalify = require('literalify'), React = require('react'), ReactDOMServer = require('react-dom/server'), DOM = React.DOM, body = DOM.body, div = DOM.div, script = DOM.script, // This is our React component, shared by server and browser thanks to browserify App = React.createFactory(require('./App'))
• 8.
  The BAD! Don't forgetthat React is only the view. You DO NOT GET any of the following: An event system (other than DOM events) Any AJAX capabilities Any form of a data layer Promises Any application framework at all React on its own is useless for the real world. Worse yet, as we'll see, this leads to everyone reinventing the wheel.
• 9.
  The BAD 2! Reactis a comparable size with Angular, even though Angular is a complete application framework. React is bloated for how little functionality you get. Hopefully this will improve in the future. Stop Saying Flux! Perhaps the most annoying part of React development is "Flux." It's far more confusing than React. The name "Flux" is a pretentious barrier to understanding. There is no such thing as Flux. Flux is a concept, not a library. "Flux is more of a pattern than a framework"
• 10.
  Should I UseReact? Short answer: yes. Long answer: unfortunately, yes, for most things. Here's why you should use React: Works great for teams, strongly enforcing UI and workflow patterns UI code is readable and maintainable Componentized UI is the future of web development, and you need to start doing it now.
• 11.
  Should I UseReact really? React will slow you down tremendously at the start. Understanding how props, state, and component communication works is not straightforward, and the docs are a maze of information. This will be countered, in theory, by a grand speed up when your whole team is on board. React does not support any browser below IE8, and never will If your application / website doesn't have very much dynamic page updating, you will be implementing a lot of code for a very small benefit. You will reinvent a lot of wheels. React is young, and because there's no canonical way to do events / component communication, you'll have to build large component libraries from scratch. Does your application have dropdowns, resizable windows, or lightboxes? You'll probably have to write those all from scratch.