My goal for this article is to help any beginner or someone who is interested in learning React, get a solid understanding of the main points of react and what it means for their development. React is an open-source, front end, JavaScript library for building user interfaces or UI components. Now what in the world does that mean for you? I will try to break this down into simple functional components ; ). After reading this article please check out the documentation or other articles that go much more in depth on this subject.
Components
Basically, Reach is just a fancy collection of Javascript. We all know that javascript is the catalyst that runs the internet and web pages. The larger and more complex your programs get, the harder it is to keep you javascript organized and scaleable. React addresses this issues with components. A React component is either a javascript class or function that renders JSX. (Remember this sentence. This is React in a nutshell. We will be breaking this sentence down throughout the article.) Components allow us to easily organize and scale our code. With each major section of your front-end application you can have a component. You can organize these components in folders. This way whenever you want to change a part of your application you know exactly where to look. One great thing about components is you can render a component as many times as you want. You can even have each render of the same component show greatly different things.(More on this later) React components is what allows you to make your application dynamic and be able to use the same code over and over.
Javascript is the engine that powers React, components is the transmission that makes React go. Let's go a little deeper into components. There are some main characteristics that help take React Components to the next level. We will talk about State, Props, JSX, and Lifecycle methods. Reminder, I am going to be as brief as I can. Look up more detail later on when you want to fully uncover these topics.
JSX
I thought javascript used html to render things to the DOM, what is JSX? JSX is a syntax extension to javascript. The easiest way to think of it is like a hybrid HTML. They look and behave very similar. In my experience I was able to pick up JSX just by working on my React projects. It is easy to grasp and you won’t have to set dedicated time aside just to learn a new syntax. JSX is what each React component renders. React will take this JSX and work some magic behind the scenes to display what you need.
State and Props
Going along with the car analogy we have the engine and transmission, now it's time for the driver. This is where State and Props come into the picture. State and Props gives components life. Props allows us to be able to pass information into components. We can use the same component multiple times and just pass in different Props and each component render will be different. State are attributes that the component keeps track of its self. State gives each component their own life. These attributes can later be used to change what the component renders or even passed out to other components as props. The state of a component can update and change depending on the user interaction. Whenever state is updated the component will refresh and reflect the updated state. State and Props is what makes React components so dynamic and powerful to work with.
An example of how it looks:
Lifecycle methods
Lifecycle methods for React components is a very dense topic. I am going to simplify this as much as I can. Lifecycle methods are design to have the component preform a set action at a specific stage of its life. Let's quickly break down a components life. When you render a component it is created and added to your applications view. This is called mounting. Once the component is mounted it will get updated and change based on what the user does and how state is affected. At the end of its time on the application it will be removed from view. This is called unmounting. There are many stages from mounting to unmoutning that you can use lifecycle methods. The two main situations is componentDidMount() and componentWillUnmount(). ComponentDidMount() is used if you want your component to do anything before it renders for the first time. After the first render this lifecycle method will no longer work. The most common use for this method is starting AJAX calls to load data into your component. This can be with fetch() or other AJAX features of javascript. ComponentWillUnMount() is when the component is removed or deleted. You can think of this as clean up. In this method you would include anything that is running in the background that will need to be stopped when this component unmounts.
That is React in a nutshell. I tried to go over the topics with enough depth for you to understand what react is and how it works without going into too much detail. I hope you find this helpful. Share this article with any beginner React developer or developers who are considering learning React. This can be a great resource to help them get a grasp of the beauty and power of React without having to get too much in the weeds.
Top comments (0)