Note: This blog was written to discuss React's LEGACY version, and was done using React on its own, so the info may be out of date or inefficient compared to what some of you coding pros are used to!
An Introduction to React...
React.js is a popular Javascript library designed to make front-end development and user interfaces (UIs) easy. It utilizes JSX syntax (which essentially combines HTML and Javascript) to combine functions, classes, and HTML elements into components which create the visual part of your website. These components are oftentimes linked together and reference each other to make the entire interface much more interactive, with itself and with those who use it. React leans heavily into ES6 syntax, with the way it utilizes classes, arrow functions, template literals, and more. The entirety of React is built in these components which make the process of creating a website much easier.
// an example of using JSX syntax to create a header element,
// stored as a variable!
const myHeader = <h1> wooo headers :D </h1>;
What are components? What do I do with them???
Essentially, a component is a function or class which serves as a split off piece of the UI, which we can reuse as much as we'd like later on! Components made using functions are "functional components," and components made using classes are "class components." There are a fair few differences between each of them, and which one you use depends mostly on your own preference and what you want to do with them. In some projects, you may even use both!
// a simple functional component
// outputs an h1 element with the text "Hello, World!"
function HelloWorld() {
return <h1>Hello, World!</h1>;
}
// a basic class component which does the same thing!
class HelloWorld extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
To use these components, we can insert them as an element into another part of our UI to have the whole component rendered for us. We do this by calling a self-closing tag with the name of our component, like this: <HelloWorld />. This one tag will render our entire component, which wasn't very big in this case, but in the future may be a lot bigger depending on what our project is. We could render several dozen lines of code with just our component tag! And we can even call that component tag as many times as we want. Not to mention that we can even use Javascript in our code to make these components much more dynamic and interactive... By using our curly brackets ({}) we can write regular code wherever we want in our component, even inside our HTML elements!
// our simple functional HelloWorld component,
// modified to use our myName variable!
function HelloWorld() {
let myName = 'Action Movie Hero Boy';
// this time, since our myName variable evaluates to itself,
// we output a header 1 "Hello, Action Movie Hero Boy!"
// by rendering this component!
return <h1>Hello, {myName}!</h1>;
}
What's the difference between functional and class components?
Well, I'm not quite sure of ALL the differences myself, but let's go over some important ones together!
- Functional components are a lot simpler, and for the most part seem easier to use!
- Class components are a lot more interconnected! Makes it easier to have big interactive UIs if at least one (very likely the topmost one) of your components are a class component.
- Class components have some built in functions to help them along, like
componentDidMount, which lets us tell the UI what to do when the item first gets rendered, orcomponentWillUnmount, which allows us to define what'll happen when the component gets UNrendered! These are called lifecycle methods. - Class components, being classes, can have functions as methods for easier access and additional interconnected-ness.
- Class components can use something called state which is writeable...
- Whereas both components can use something called props which is read-only! A component, regardless of its type, should never directly modify its own props! (We'll go over both state and props in the next section)
Now, while it may seem like class components are just objectively better (in some cases, they are), there ARE still reasons to use functional components; like when dealing with simpler code or stateless components, or maybe you're just angry at class components because of the suffering they've put you through. For the most part, both component types can do the same jobs, but React is very pro-ES6, which is where our classes come from! So now let's go over state and props...
State and Props, what do they do and when do I use them?
Both state and props are ways to store data in our component that is passed in or can be passed to another component. Props are passed into the component when it is called, and state is declared inside of a class component's constructor. We don't really modify props, but we can replace it each time the UI is rendered and our component is rendered again, allowing for some fun user-interaction. State is declared in our class component, like mentioned before, and is often passed down to other components in the form of props to pass data around from component to component. We can even pass down a method that'll allow us to modify our state from a different component, if we want!
So here's a mini-example of how we could use both:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Link',
title: 'the Hero of Hyrule',
};
}
render() {
return <Greet name={this.state.name} title={this.state.title} />;
}
}
function Greet(props) {
return <h1>Hello, {props.name}, {props.title}!</h1>;
}
So what just happened here?
- We declared our class component which is the hypothetical topmost component of our UI app.
- We declared a state with the keys name and title, just like a normal object!
- We rendered another component, Greet, which is functional, passing down our state's name and title as props!
- In Greet, we return a simple h1 tag which renders "Hello, Link, the Hero of Hyrule!" utilizing the name and title passed down into our props!
You can use these both for a whole lot more than something basic like this, it's just a matter of your creativity (And sometimes, your ability to read the documentation...)! Keep in mind that when using props, in a class component we refer to it using this.props, whereas in a functional one we can just use props. One more thing to note before we move on is that we shouldn't modify our state directly. We should instead modify it by using the setState function which comes with our this keyword. It overwrites any state properties we refer to, leaving the others alone. So if we wanted to change our title, we could have done something like this: this.setState({title: 'Zelda's Knight'}). In this case we passed in an object, but you could also pass in a function which RETURNS an object if you wanted to do more with this.
My opinion of React?
I think React is a great tool for UI developers and front-end development in general. I had a lot of fun learning to use it, even if it was a bit of a learning curve for me. There are also a lot of other things to be used WITH React to make the whole thing a lot easier. If you're interested, I'd recommend checking out the documentation. I used React's legacy version for this, but there's also the modern version to use as well.
The conclusion?
React is a very interactive JS library for UI development which uses JSX syntax to do what I'd probably call witchcraft. We break our UI up into components, which can be functional or class components and have various differences based on which one you use. Both component types can use props, only class components use state. Props are read-only and passed into our component, whereas state is writeable and typically passed down into other components, like a waterfall! There was a lot we didn't cover in this blog, like actually rendering to a website or some of the more complex things you can do, so I'd definitely recommend checking out the documentation if you wanna try this out yourself. Have fun!
Top comments (0)