From 3dba1d4de631a229e1b3998810d8897529cdddfb Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Thu, 19 Apr 2018 11:36:51 -0400 Subject: [PATCH] Update ReactBasics.md --- ReactBasics.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/ReactBasics.md b/ReactBasics.md index b175d85..459866f 100755 --- a/ReactBasics.md +++ b/ReactBasics.md @@ -40,23 +40,6 @@ React is a front-end framework which is designed to make building a Single Page ## Create a basic component -- Let's create a component which is just an H1 tag -- We'll insert it into the `main` tag of our html - -```JavaScript -ReactDOM.render( -

Hello, world!

, - document.querySelector('main') -); -``` - -- This code will find the main tag and render an `h1` tag inside of it - - **NOTE** we can't set class with the `class` attribute anymore - - We have to use className so it doesn't get confused - - All other attributes should work normally -- React mixes HTML with JavaScript (JSX) - - Notice that the HTML does not have quotes or backticks around it - Let's set up the HTML ```HTML @@ -88,6 +71,23 @@ Let's talk about all those script tags - Babel is a transpiler that will translate ES6 code to ES5 - it also handles turning JSX into regular JS +- Let's create a component which is just an H1 tag +- We'll insert it into the `main` tag of our html + +```JavaScript +ReactDOM.render( +

Hello, world!

, + document.querySelector('main') +); +``` + +- This code will find the main tag and render an `h1` tag inside of it + - **NOTE** we can't set class with the `class` attribute anymore + - We have to use className so it doesn't get confused + - All other attributes should work normally +- React mixes HTML with JavaScript (JSX) + - Notice that the HTML does not have quotes or backticks around it + ## Assign JSX to a variable JSX just renders into regular JavaScript, so we can assign it to variable: