Although the source code is just as unreadable as Angular's, the core API is amazingly simple - just a handful of lifecycle methods. The trade off is that React is, famously, only the V view in MVC. If you're looking to work with remote data, you're going to have to quickly look into additional frameworks like Flux to support your app. Navigating all of these additional technologies can be challenging for a beginner, especially since many of them are rapidly coming into and falling out of style. This 8-week program will revolutionize the way you develop user interfaces for your own applications, or for your clients. Read on to learn more about this exciting new workshop, and why you should learn React. React lets you express how your app should look at any given point, and can automatically manage all UI updates when your underlying data changes. React was used in-house at Facebook before being released as an open-source project to the public, so you can be certain it knows how to handle an astronomical amount of data. React is a JavaScript library, but is often mistakenly referred to as a framework. Like many popular frameworks Bootstrap, for example , React is all about reusable components. However, unlike frameworks, which are built with the goal of getting whole apps up and running quickly, the only thing you do with React is build components. React was created by Facebook in 2013, and then released as an open-source project. What does that mean to a junior developer? Learn React for lots of job opportunities! One reason developers love React. You can drop in a single widget, or code your entire app. You can use React. This is a marked difference to using the Angular framework, which provides a much more rigid structure for your project you can use to integrate react. It may be a coincidence that React. Developers can squeeze in jQuery if they try, but the original dev team advises against using both. Angular, for example, requires developers to think in sync with the Angular framework. For experienced Angular developers, this will become second nature. Think of one as learning a new language, and as picking up a few words. You can pin chat messages or load photos in a view with the same piece of code. Your apps will be faster and more responsive with less work from you. In a nutshell, React. Redux devtools let you preview changes without refreshing, and you can bounce between versions to check your work. Below I am going to discuss more of React. This makes it fun to use, easy to learn, and simple to understand. However, being simple does not mean it's familiar. There are a few concepts to cover before getting started. Let's look at each in turn. React elements are JavaScript objects which represent HTML elements. They do not exist in the browser. They represent browser elements. Components are developer created React elements. They're usually larger parts of the user interface which contain both the structure and functionality. This lets you write HTML- ish tags in your Javascript. I say HTML- ish because there are a couple gotchas. You are really just writing XML based object representations. For regular html tags, the attribute is and the attribute is in JSX because these are reserved words in Javascript. More differences can be. It's is a technique for creating React elements and components. For example is a React element written in JSX. The same React element can be written as JavaScript with. JSX is less effort to read and write and is transformed into JavaScript before running in the browser. Useful links about JSX: - - The Virtual DOM The Virtual DOM is a JavaScript tree of React elements and components. React renders the virtual DOM to the browser to make the user interface visible. React observes the virtual DOM for changes and automatically mutates browser DOM to match the virtual DOM. How does the Virtual DOM work? Imagine you had an object that you modeled around a person. It had every relevant property a person could possibly have, and mirrored the persons current state. This is basically what React does with the DOM. Now think about if you took that object and made some changes. Added a mustache, some sweet biceps and Steve Buscemi eyes. In React-land, when we apply these changes, two things take place. The second step is reconciliation, where it updates the DOM with the results of diff. The way React works, rather than taking the real person and rebuilding them from the ground up, it would only change the face and the arms. Because React is using a fake DOM and not a real one, it also opens up a fun new possibility. We can render that fake DOM on the server, and boom, server side React views. We'll build a series of user interfaces, each adding a layer of functionality on the previous. We'll build a photo stream similar to instagram - example applications don't get much better than this! Rendering The first order of business is rendering a virtual element a React element or component. Remember, since a virtual element exists only in JavaScript memory, we must explicitly tell React to render it to the browser DOM React. React takes the virtual element and inserts it into the given DOM node. The image is now visible in the browser. Components Components are the heart and soul of React. They are custom React elements. They are usually extended with unique functionality and structure. When using the method above, our first argument is the component we want to render, and the second is the DOM node it should mount to. We can use the method to create custom component classes. They're given as arguments to a component and look exactly like HTML attributes. When we use our defined components, we can add attributes called props. Inside the component's render function the src prop is used as the src for the React image element. The caption prop is also used as plain text within the React span element. It's worth noting that a component should never change its props, they're immutable. If a component has data that's mutable, use the state object. State The state object is internal to a component. It holds data which can change over time. Every component has a object and a object. State is set using the method. If we want to set an initial state before any interaction occurs we can use the method. The component has a new function. React calls this function when the component is initialised. The returned object is set as the component's initial state as the function name implies. The component has another new function. This function calls on the component which toggles the value. Within the component's render function a variable is assigned either 'active' or nothing - depending on the state. The button also has an event handler set to the function. Events React also has a built in cross browser events system. The events are attached as properties of components and can trigger methods. There's a new component which generates 3 components from some fake data passed in as a. The cover everything in detail and must take some time to check out the and read up a bit on. I highly recommend reading it. Also if you are planning to build a mobile app ,you may consider React is fast and scalable, I have went through how React handles the rendering and what the component-driven development is. These are the very basics. I will be writing next about flux and how to integrate react. Please Leave a comment below!
