Read on and play with code to test.

1. You can’t use React with a <script> tag only — Myth

Well…Yes — you can! And that’s a Fact

To use React, you just need to add the two script tags in start and your react code at bottom and you are ready to go.

<!-- Add these two script tag on top of your page -->

<script src="https://unpkg.com/

<script src="https://unpkg.com/ [email protected]</a> /umd/react.development.js" crossorigin> [email protected]</a> /umd/react-dom.development.js" crossorigin> <!-- Add this in bottom --> <!-- Your React component -->

<script src="./path/to/my_react_code.js"></script>

If you want use JSX then you have to add another script tag that will load Babel in browser and compile JSX into the javascript which will then be used. It’s a HUGE NO-NO for production and only good for development. See section “Production ready ” of Point 3 below.

<!-- Add these three script tag on top of your page --> [email protected]</a> /umd/react.development.js" crossorigin> [email protected]</a> /umd/react-dom.development.js" crossorigin> <script src="https://unpkg.com/[email protected]/babel.min.js" crossorigin></script> <!-- Add this in bottom --> <!-- Your React component NOTE: type attribute-->

<script type="text/babel" src="./path/to/my_react_code.js"></script>

2. You HAVE to use JSX — Myth

Well…No You don’t need to use JSX. And that’s a Fact

You can use pure javascript representation to replace JSX syntax. It will be a little more verbose but pure JS.

In the example code you have both type of buttons, Non JSX and JSX.

Non JSX Version

class LikeButton extends React.Component {

render() {

return React.createElement(

"button",

{

className: "blueButton",

onClick: () => alert("Do your stuff here!")

},

"Like no JSX"

);

}

}

Vs JSX version

class LikeButtonJsx extends React.Component {

render() {

return (

<button

className="blueButton"

onClick={() => alert("Do your stuff here!")}

>

Like JSX

</button>

);

}

}

3. You need Webpack for JSX — Myth

Well... No — Works very well without Webpack. And that’s a Fact

Babel is your friend!!

Babel will allow you to use the latest stuff in Javascript land. It will also convert JSX (which is not Javascript) into plain Javascript.

Development only : works with <script> tag

As mentioned section above, you can add a script tag that loads Babel in browser which converts JSX to Javascript in runtime.

Production ready : works with nodejs

For this you just need nodeJS on your machine.

Open a terminal window. Change directory to the project directory and run -

Make a sub directory in the project folder say src (you can name it any name). Then run the command below

npx babel --watch src --out-dir . --presets react-app/prod

This will start a log running process that will keep a watch over all the javascript files for change and whenever any file changes it will compile it and copy the compiled file to the src directory. NOTE: Don’t close the terminal! The above command will work till terminal is open.

Now you have to point the script tag in browser to the file that gets compiled and copied in src folder. So the code in browser will now look like:

<!-- Add these two script tag on top of your page -->

<script src="https://unpkg.com/

<script src="https://unpkg.com/ [email protected]</a> /umd/react.development.js" crossorigin> [email protected]</a> /umd/react-dom.development.js" crossorigin> <!-- Add this in bottom --> <!-- ***** Your React component now Points to SRC directory -->

<script src="./src/my_react_code.js"></script>

4. You need CSS-in-JS with React — Myth

Well...No — You really don’t. And that’s a Fact

As finally, React renders to DOM, you can add normal css classes of your own or from bootstrap etc. for styling. Actually adding css as object is a totally different concern that somehow got involved in React.

Css

.blueButton {

background-color:blue;

}

Non JSX Version

class LikeButton extends React.Component {

render() {

return React.createElement(

"button",

{

className: "blueButton",

onClick: () => alert("Do your stuff here!")

},

"Like no JSX"

);

}

}

Vs JSX version

class LikeButtonJsx extends React.Component {

render() {

return (

<button

className="blueButton"

onClick={() => alert("Do your stuff here!")}

>

Like JSX

</button>

);

}

}

5. You can’t add React in existing Project — Myth

Well…Yes you can! And that’s a Fact

The basic concept of react is that it makes changes to a node in DOM. For example you can add react component to any node on the page and it will work fine.

In the example file, there are only two <div> tags that are used by React, rest whole page can be used by any other library like jQuery etc.

6. You can’t add React in multiple nodes — Myth

Well…Yes you can! And that’s a Fact

In the example file, there are two <div> tags in which react is rendering two different components — one NON-JSX other JSX. You could render same component at multiple places also.