I recently started using ReactJS for projects at work a lot. These are my takeaways.
Not SEO Friendly
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 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
So, React JS is not SEO friendly. Routes are fun. Components are incredibly reusable. And state and props are the lifeblood of your application.