All we want to save in the state is the data that gets updated by the component’s event handler, and that is simply the number of favorites. Save the addition of the string for the render function. The following statement is created without JSX: var element = React.createElement('div', ) JSX is not required, but consider the difference between two very simple statements. JSX simplifies the code that would normally have to be written in JavaScript, which makes your code much more readable and simplified. Since React displays output as it’s main function, we will be using HTML in just about every component. Most React implementations make use of JSX, which allows you to put XML-like syntax right within JavaScript.
Our main JavaScript code goes in main.js, and that’s where it all starts. The babel-core file allows us to use JSX, and the script type must be “text/babel” in order for it to work properly. You wouldn’t want to do this in production. In order to get around using a server while testing, I’m calling the React.js, react-dom.js, and the babel-core files from the CDN. I’ve also included a css file for basic styling: It’s a good idea to have the React API open while you work for reference.įrom there, we create an index.html file, and a main.js file. There are many options for downloading and installing React and its various add-ons, but the fastest way to get started and begin playing around with React is to simply serve the JavaScript files directly from the CDN (as described on the React GitHub page… the most common CDN options are listed there): īoth the download pages go into detail on the various ways to download, install, and serve React in various formats, but we’re going to stick with this most basic option so we can focus on learning how to code with the React library itself. The React library download page (above) also includes a server and other options. Many people use React with Node.js, so you can also use a Node.js server. You can also use a lightweight Mongoose web server, or Python’s HTTP server. MAMP is popular on Mac, and WAMP is most common on Windows machines. If you want to test the basic code with external data files at the end of the tutorial, you will need to use a local or remote web server to get the page to work. Normally, you would incorporate React into a larger application.Editors that highlight code are preferable. Notepad++ is popular for those on Windows machines, and TextMate is popular on a Mac. You will need a text editor of some sort.We show you how to get around this during testing. You will need to download the React library if you want to go beyond the testing phase.This tutorial assumes that you have at least a beginner’s grasp of HTML and JavaScript.If you are keen to learn React from the ground-up feel free to check Learn and Understand React JS on Zenva Academy which covers all the basics + lots of bonus topics like React Router and Flux.
0 kommentar(er)
