Learning software engineering has been extremely fun and rewarding. One of the most rewarding and exciting moments along the way was the first time I was able to get a webpage to render dynamically and change based off of buttons on the screen. It was the first time I really felt like I could create something interesting!

I first learned how to do this using JQuery. Which is a Javascript library that makes manipulating the DOM far easier than using vanilla JS. Although it doesn’t do anything that you couldn’t do without it. JQuery is great, but what was REALLY exciting was when I learned React.

React is a Javascript framework used to build single page component-based web applications. I quickly found that basically anything I could do with JQuery, I could also do with react, and much easier. There are many things in JQuery where I would get stuck for an hour or more, sure that what I’m doing should work, but to no avail. But React is magical. It just makes sense, and it works very well.

React uses state in its class components to keep track of important information, and automatically re-renders a component when state that it relies on is changed. The state can be updated using a class components setState() method. setState() takes in an object and merges the state with the object you passed in. For example, if the current state in your class component is { name: 'Matt' } and you call this.setState({ age: 15 }) your state would now have name and the age, as it only updates properties that you specify. This makes it incredibly easy to render components dynamically!

State and methods and other things can be passed down to child components as props. Assuming we have a child component built that will display the information we pass it, we could deliver that information like so <DisplayComponent info={this.state} /> . We could then access the sate object we created in our child component using props.info .

Perhaps another reason React is so comfortable to me, is that the React official documentation is quite phenomenal. Whenever I have a question on how to do something, I can find my answer in the docs quite swiftly.

Learning a few simple react methods and how to use props (basically, hardly more than I’ve taught you in this blog) will open you up to being able to create almost anything, and some of the nicest looking UI’s people make today.