Let's look at a component we'll call App. We'll write our React components as ES6 classes. The best way to understand React components is to write them. We mentioned at the beginning of this series that at the heart of all React applications are components. Let's begin touching on this power by building our first React component. Rich web applications accept user input, change their shape based on user interaction, and communicate with web servers. Our "app" is a React element which represents an h1 tag. The first argument to ReactDOM.render() is what to render and the second is where: ReactDOM.render(, ) Without the call to ReactDOM.render(), nothing would render in the DOM. The call to ReactDOM.render() actually places our tiny React application on the page. Our application consists of a single element, the Hello world. Inside the Babel script body, we've defined our first React application. We've included the tag here for ease of use. We'll switch to a precompilation step in a few days. When using the babel-standalone package, we'll get a warning in the console. This signals to Babel that we would like it to handle the execution of the JavaScript inside this script body, this way we can write our React app using ES6 JavaScript and be assured that Babel will live-transpile its execution in browsers that only support ES5. Note that the script tag has a type of text/babel: Inside of script, we define our first React application. In order to use ES6, it's best if we transpile our ES6 JavaScript into ES5 JavaScript to support more browsers.īabel is a library for transpiling ES6 to ES5. We mentioned that support for ES6 is still spotty. It's important to place our loading tags before we start writing our React application otherwise the React and ReactDOM variables won't be defined in time for us to use them.Īlso inside head is a script tag that includes a library, babel-core. We've included the source of React as a tag inside the element of our page.
0 Comments
Leave a Reply. |