Long description

Line 1: open angle bracket exclamation mark DOCTYPE h t m l close angle bracket. Line 2: open angle bracket h t m l close angle bracket. Line 3: open angle bracket head close angle bracket. Line 4: open angle bracket meta charset equals open double quotes u t f hyphen 8 close double quotes close angle bracket. Line 5: open angle bracket title close angle bracket Chapter 11 open angle bracket forward slash title close angle bracket. Line 6: open angle bracket script s r c equals open double quotes h t t p s colon forward slash forward slash unpkg dot com forward slash react@16 forward slash umd forward slash react dot development dot j s close double quotes close angle bracket open angle bracket forward slash script close angle bracket. Line 7: open angle bracket script s r c equals open double quotes h t t p s colon forward slash forward slash unpkg dot com forward slash react hyphen dom@16 forward slash umd forward slash react hyphen dom dot development dot j s close double quotes close angle bracket. Line 6 and Line 7 are labeled The React J S libraries. Line 8: open angle bracket forward slash script close angle bracket. Line 9: open angle bracket script s r c equals open double quotes https colon forward slash forward slash unpkg dot com forward slash babel hyphen standalone@6 forward slash babel dot min dot j s close double quotes close angle bracket open angle bracket forward slash script close angle bracket. Line 9 is labeled Use the babel run hyphen time library to convert JSX in the browser at run hyphen time. Line 10: open angle bracket script type equals open double quotes text forward slash babel close double quotes close angle bracket. This line is labeled Note: language for this block is babel. Line 11: const link equals React dot createElement open parenthesis open double quotes close double quotes a open double quotes close double quotes comma h ref colon open double quotes http colon forward slash forward slash w w w dot react j s dot org close double quotes close curly brace comma open double quotes Visit React close double quotes close parenthesis semicolon. Line 11 is labeled The three parameters are: element name, attribute collection, and element single quote s content. Line 12: ReactDOM dot render open parenthesis link, document dot querySelector open parenthesis open double quotes hash react hyphen container close double quotes close parenthesis close parenthesis semicolon. Line 13: open angle bracket forward slash script close angle bracket. Line 14: open angle bracket forward slash head close angle bracket. Line 15: open angle bracket body close angle bracket. Line 16: open angle bracket div i d equals open double quotes react hyphen container close double quotes close angle bracket open angle bracket forward slash div close angle bracket. An arrow starting from line 12 to line 16 is labeled Inserts the React content into an existing element. Line 17: open angle bracket forward slash body close angle bracket. Line 18: open angle bracket forward slash h t m l close angle bracket. Note: This React example is functionally equivalent to the following regular DOM code: Line 1: const link equals document dot createElement open parenthesis open double quotes a close double quotes close parenthesis semicolon Line 2: link dot setAttribute open parenthesis open double quotes h ref close double quotes comma open double quotes http colon forward slash forward slash w w w dot react j s dot org close double quotes close parenthesis semicolon. Line 3: link dot textContent equals open double quotes Visit React close double quotes semicolon. Line 4: document dot querySelector open parenthesis open double quotes hash react hyphen container close double quotes close parenthesis dot appendChild open parenthesis link close parenthesis semicolon.