Copy

View this email in your browser


 

My newsletter sign up form says I talk about React, Node and personal growth but I've never actually talked about React or Node here 😅


Let's change that.
 

If you have been hearing about React but didn't find time to get into it, that's perfect. Let me teach React to you.


If you already use React, this is still going to be useful for you.


Myth: You need to understand the terminal, webpack, babel, etc. to be able to use React.

 

You don't need any of that to get started. Just a html file with a <script> tag.

This is the first exercise we do in my Getting started with React workshop

Let's create an element in vanilla javascript first and then I'll convert that to React. Feel free try this out on your computer as you read. It's going to take 5 minutes.


 

Good old vanilla javascript.
 

Alright, to use React, you need to add React. Let's add a script tag taking the library from a CDN.


Does this feel familiar? (I've added the links at the end of the post)

This will expose 2 global variables in our page: React and ReactDOM
 

Now let's convert contents of the script tag one line at a time:


Next, we need to pass properties to this element. React accepts properties in an object.



Now let's talk about adding content inside the element


 

React wants us to create an element by passing all the 3 properties (type of element, properties and content) at the same time.
 

It accepts any type of content in the 3rd parameter: string, number, array of strings, array of elements. It's pretty flexible.


Final step, let's add this element to root

Okay, who's this ReactDOM person? Why do we need a second library to add our element?


The element we created with React by using React.createElement can be rendered in multiple environments: HTML (ReactDOM), Mobile apps (React Native), virtual reality (ReactVR)


React, the library let's us create elements that are multipurpose. Then, we need to pick our environment (HTML in this case) and use the related library for that (ReactDOM)


Here are the 3 statements put together:



 

That wasn't so hard, was it?


And we didn't even touch the terminal, install tools like webpack or babel, just a <script> tag.


Too easy for your taste? Let's complicate it a little 🙂
 

Let's say we need to create nested elements, something like this:




Looks easy, let's create these with React



The content in this case is more elements,

Remember I said you can pass any type of content as the 3rd parameter. Here I'm passing an array of elements.


As you can see, there's a lot of work involved in nesting elements. And it's no where as nice as writing HTML:


That's why the React team came up with an alternative way: JSX


Here's what it looks like:

That looks familiar! It's just like writing HTML


It feels weird though. We're assigning a HTML looking thing to a javascript variable.

That's because it is weird. The React team made this syntax up, it's not something the browser understands.


This is where Babel comes in.


Babel is a tool that converts non-standard syntax to syntax that the browser understands.

This is also how you can new javascript syntax but still support old browsers (I'm looking at you Internet Explorer)


To use Babel, you need to include it as a script and specify which script blocks it should at by replacing type="text/javascript" with type="text/babel"


 

Let's look at what Babel does to JSX:




Perfect!


This way, you can write JSX which is easier to read and write and let Babel convert it to something that the browser understands.


Let's go back to our nested parent-child example:

Some people look at JSX and get mad. You shouldn't merge HTML with javascript, what about separation of concerns!


It's true, we are kind of mixing different parts here. We're used to divide our code by how it looks: HTML layout goes into a .html file, interaction and logic goes into .js file, separation of concerns by syntax/technology


But, this is just one way to divide our code. Another way is to divide them by feature/what they do. Have a look at this folder structure:

We're keeping similar parts of the code near each other. That makes it easier to read and change.

React (with the help of Babel) goes a step further and let's you merge the .html and .js into one file by writing JSX in .js


It's separation of concerns by feature instead of technology. I love this approach!


Some people really like this, some people don't. And that's okay. I'd like you to give it a try and form your own opinions.


You can always use React.createElement instead of JSX


That was the 5 minute introduction to React. There's a lot more to learn but hopefully this makes you feel slightly more comfortable. We all have to start somewhere (usually at "hello world" 😉)


Question of the week:

Did you like this technical issue instead of the usual personal/career growth stuff. Reply to this email and let me know!


Hope this was helpful for you on your journey!

👋
Sid
You should follow me on twitter 🐦


Links:
https://unpkg.com/react@16.4.1/umd/react.development.js
https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js
https://unpkg.com/babel-standalone@6.26.0/babel.js







This email was sent to <<Email Address>>
why did I get this?    unsubscribe from this list    update subscription preferences
Siddharth · Bangalore · Bangalore 1 · India

Email Marketing Powered by Mailchimp