Learning React

Learning React is hard. On one hand the code looks like HTML.  But it’s not straight HTML, it’s got other code decorators injected into it. As a result the browswer can’t read the files as it can read straight (vanilla) javascript. An intermediate compiler/transpiler is needed to convert JSX (the HTML looking javascript) into JS that the browser can render.  This is what Babel is used for. The first few times I tried to teach myself React, I got really hung up on JSX. I had a hard time keeping straight what it was used for, and it’s appearance being so similar to HTML kept confusing me. In reality it’s not HTML with some javascript thrown in, it’s JavaScript with HTML tags thrown right in. In normal JavaScript you would have to encapsulate any HTML you wanted to send to the Document/Browser Window in string tags, which starts to look pretty messy. JSX allows you to not only write straight HTML markup in your JavaScript, but also create your own HTML tags, called Components via the React library. Now that I understand it’s purpose, it makes a whole lot more sense. If it’s confusing to you, stick with it. Basic Starting Code To start working with React, simply include two javascript libraries, one for React itself and one for ReactDOM to render what we are creating onto the browser window (the DOM). You’ll need to include either a 3rd javascript library, or work with your tooling scripts to allow Babel to transpile your Re...
Source: Mr. Hassle's Long Underpants - Category: Emergency Medicine Authors: Tags: Computing Node React Source Type: blogs