My Biggest Takeaways from Using React JS

I recently started using ReactJS for projects at work a lot. These are my takeaways.

Not SEO Friendly

React applications are not SEO friendly if they load data using an AJAX request which is pretty much all React applications. None of the data retrieved from the AJAX request (like a blog post) will be indexed by search engines. To fix this issue, I started retrieving all the data for a specific page on first load. This does create some overhead in the application, but it’s worth it (and sometimes necessary). For example, the first time the user (or crawler) loads the application, I get all the data I need (blog posts), turn it into JSON, and echo it into a div. Then, when the HTML loads, I get the JSON string from the div using JavaScript (divEl.innerText), and I parse it with JavaScript (JSON.parse(json_string)). But I only do this if this is the first time the application is loading. It’s not very magical, but I don’t see any way around it if you’re not using Node. If you’re using Node, you can do server side rendering.

Routing Is Fun

Routing makes it really fun to conditionally show parts of your application (components), depending which page the visitor is on. There is nothing magical about Routes. You just wrap the component in a Route and specify the URL of that route. Then, when that route is visited, the component is mounted, and it is destroyed when that route changes. There are also Switch statements which are very useful.

Components Are Extremely Reusable

Components are incredibly reusable. When I first started using React, I thought of all components as pages. I created what I thought was a Login page and directed users to that page. But then, I realized that I could take that whole entire Login “page” (component), and load it wherever I wanted, as long as I supplied the right props.

State and Props

State and props are important. That’s kind of an understatement. State and props are the life blood of your application. If you’re building a blog website, state and props are the blog posts. Components are just used to display the blog posts (the state), and the components update automatically when the state updates. They are very tightly coupled. In fact, they inseparable.

Lifecycle Functions

Lifecycle functions are very important. Right now, the two I use the most are componentDidMount, and componentWillReceiveProps(nextProps). I used this component to solve my back button problems.

For example, I had a complicated component that would let the user filter the data and paginate. The route and URL would update with these changes (when I would get new data), but nothing happened when the user would hit the back button. The route (the URL) would change, but React would not get the data. I had to use componentWillRecieveProps to check to see if the route was changing. Since all of the changes were in the params of the URL, this worked pretty well for me. I would just get the previous page’s params, and get the data, again. I’m not sure if this is how I’m supposed to do it, but it works.

Hide Complex Components

You don’t have to destroy a component when you leave a route. You can load components (not using Routes) when a certain condition exists and hide hide them with CSS when that condition is false. This is completely fine. Vue has something callled keep-alive that works similarly. For example, I had a large component that loaded a lot of data and then performed a lot calculations on that data. Instead of including that component in a route (/oranges), I used plain JavaScript to check if the URL contained the word “oranges.” If it did, I would load the component and make note that the component loaded. If the user left the page, I hid the component using CSS, and I would reveal the component when the user visited that page, again. Simple, but it works.

Summary

So, React JS is not SEO friendly. Routes are fun. Components are incredibly reusable. And state and props are the lifeblood of your application.

Leave a Reply

Your email address will not be published. Required fields are marked *