React.js and why I love it!

Two months ago I decided it was time to expand my JavaScript knowledge a little and learn one of its powerful frameworks and/or libraries, but which one to choose from? Angular vs Vue vs React.

After reading many articles online on where to start first, I finally decided on React.js – and here are a few reasons why I don’t regret my choice!

Being a fan of the Atomic Design, it’s no doubt that React’s component based structure is by far my favourite thing about it. What you would normally have as multiple HTML pages, are now JavaScript components rendered into the one single ‘index.html’.

Take this App component for example, containing many other components:

Screen Shot 2017-06-13 at 21.09.20
Notice the use of ‘className’ as opposed to just ‘class’. This is JSX syntax – JSX adds XML into JavaScript so it’s possible to still have divs, h1s etc inside your JS file.

App is seen as your main component container, rendering out each of your website’s components. App itself is then rendered onto the element in your single index.html as so:

Screen Shot 2017-06-13 at 21.27.08

 

Screen Shot 2017-06-13 at 21.12.53

Not only does this make the transition between sections of your website a lot smoother giving it won’t refresh the page, it forces you to write cleaner code and removes the element of duplication, which is at times inevitable with static HTML pages. A component can be anything from a whole entire ‘About’ section to the tiniest of icons or buttons – if it’s going to be reused, it should be a component.

Another cool thing about React is that despite all of your code being in JavaScript files, you can see your components with the React Dev Tools extension and how they differ to what you normally see when you inspect a static HTML page:

Screen Shot 2017-06-13 at 21.32.06
React Dev Tools inspector tab

 

Screen Shot 2017-06-13 at 21.32.25
My compiled components as elements in the elements inspector tab

 

There are certain properties that you can pass down to these components referred to as props, and since these components are JavaScript files, they can be variables:

Screen Shot 2017-06-13 at 21.38.40
In your App component
Screen Shot 2017-06-13 at 21.40.36
In your Welcome component. ‘this.props.message’ referring to the message property found on THIS component when referred to elsewhere.

 

There are a lot of packages supporting React including the use of routing, css transitions and google maps. What’s more, Facebook released a Create React apps, a brilliant scaffolding with all the necessary compilers needed to run it right out of the box.

React is a great way to get you into developing chunks of reusable code that make up the bigger picture of your website, and can easily be swapped around, removed or re-added in future.

If this post got you into trying this awesome library out then:

A. Excellent! My job here is done,
B. Your best bet is installing Create React apps then heading over to Code Academy who will get you started on the basics, for free,
C. Have a look at a React application I completed here as taught by Wes Bos in his React for Beginners course.

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s