React Basics: Beginning To Learn React
Disclaimer: If you are just starting out with React, yet do not know Javascript very well, consider increasing your Javascript skills first. Doing that will save time, hassle, and pain!
I've been learning and working with React for almost a year now. It is only recently that I have started to get comfortable working with it and really understanding it.
My biggest issue was when I started learning (January/February 2016), I was not only new to React but somewhat new to Javascript. I have been doing Javascript for years, but I was getting to the point at that time where I was truly starting to understand it. Seeing implementations of ES5 and ES6 within React itself made it seem like I was looking at two different languages and different frameworks as well. I decided to keep going though, and doing it at work and for personal projects over time I started to pick things up a bit easier.
Here I want to explain the key points that got me over the hump and finally got me down the path to a better understanding of React.
A few of the key pieces of react that you should be aware of include
To see some quick benefits of JSX, one of the best things to do is use babeljs.io and click on the link "Try It Out". Once there you can paste some JSX on the left and see what it gets transpiled to in order to get a sense of the amount of code you are saving having to write.
For more details on JSX - Facebook Official JSX Docs
Babel - Just a quick mention of Babel and what it is. Babel is a JavaScript transpiler that once included in your application allows you to write ES6/7 and beyond so that you can leverage new JS syntax without waiting for browsers to catch up (i.e. JSX).
This diagram represents a rudimentary search form with search results underneath it. When looking at this, we have 3 separate components. The first one is the red square that is the main component. Within that we have a component for the search form represented with a yellow rectangle. Once the user clicks on search, we then have search results which is one component represented by the green rectangles.
The advantage to this library is that you can reuse these components if designed properly (in a generic way). For example, if you needed to reuse the search form (the text input and the button), you could break that out into another file and use it there. More directly, on this page, you notice the search results are each an individual component that is simply duplicated for each result.
Types Of Components
There are three types of components that you should know as a react developer. These three are functional, class based, and containers.
Stateless Functional: This type of component is defined simply as something comes in and something comes out. That something is data. A typical use case is, data is passed to this type of component from another component, and it is simply rendered here.
Class Based Component: Used whenever you want a component to have some kind of ability to be aware of itself and what has happened to it since it has been rendered (be aware of state). Every Class Based Component needs to extend Component and have a render() method and return JSX.
Container: A class based component that can connect to a redux store via the connect() method. The main purpose of this container, is to connect directly to the global store so you can avoid having to manually manage state and props.
Which one should you use? And when?
Start off with a functional component and if you decide you need added functionality, then change it to a class based component. If you need to connect to a redux store, then promote it to a container.
You will not always need to add these to your components, but you should know there are there in the event that you need certain events or functionality to be called at certain times.
the particular condition that someone or something is in at a specific time
Therefore, state in react simply means the condition that the component is in at a given time. Rather than try to explain that deeper here, I suggest reading this article about state, as I think this is one of the best descriptions I have read of the topic.
Props, short for properties, are creation parameters used to customize components when created. You can take the state from a parent component and pass it as a prop to a child component.
To put the same thing in a different way, props are a way of passing data(state) from a parent to a child component.
At first, Redux is a complex idea to grasp. When you try and implement it for the first time you will probably go through a phase where you question its usefulness. However, once you do 'get it', it becomes very clear why you should use it and how it makes developing your application easier.
Redux is beyond the scope of this post, but to give a bit of a teaser as to what it helps with think of it this way. If you have a large SPA (single page app), you could imagine all of the different states that you could have on an individual page and page to page. When you don't have Redux managing these states, you have to do it yourself. That will lead to a maintenance nightmare and a probably rise in bugs.
With Redux, instead of managing state on your own, Redux does it for you with the concept of the Store. And what is the store? It is simply an object that contains the complete state of your application. It is the "single source of truth" for the application.
Again, this is a topic that will be explored in more depth in its own post, but this is a simple definition of what Redux is and how it can help if you learn how to use it.
React Slingshot Starter Repo - With Explanation
I've been learning and working with React for almost a year now. It is only recently that I have started to get comfortable working with it and really understanding it.
My biggest issue was when I started learning (January/February 2016), I was not only new to React but somewhat new to Javascript. I have been doing Javascript for years, but I was getting to the point at that time where I was truly starting to understand it. Seeing implementations of ES5 and ES6 within React itself made it seem like I was looking at two different languages and different frameworks as well. I decided to keep going though, and doing it at work and for personal projects over time I started to pick things up a bit easier.
Here I want to explain the key points that got me over the hump and finally got me down the path to a better understanding of React.
What is React?
React is a JavaScript library for building user interfaces. It is commonly known as being just the view layer of a Single Page Application (SPA), but since Components can also hold state and lifecycle methods, it also has abilities as a controller as well. So while initially light, it can be built up by installing modules to be a fully comprehensive framework.A few of the key pieces of react that you should be aware of include
- VirtualDOM
- JSX
- Components
- Lifecycle Methods
- State and Props
- Redux
Virtual DOM
A technique and set of libraries that allows the ability to improve front end performance by avoiding direct work with the DOM and work only with lightweight JavaScript objects that mimic the DOM tree. In order to work with the Virtual DOM in React we use a library called react-dom. The biggest benefit of this is that it allows a developer to write code as if the entire page is rendered on each change while React libraries only render subcomponents that change. ** React is the library and react-dom is what actually renders the react app to the browser. What does that really mean (Virtual DOM)? The Virtual DOM allows react to manage the application and not worry about browser specific operations. This makes react quite fast and allows you as a developer to focus on building an application and, for the most part, not worry about browser specific tasks.JSX
JSX is a JavaScript extension syntax allowing quoting of HTML and using HTML tag syntax to render components. JSX is syntactic sugar over JavaScript. You write .jsx and transpile it to .js using a transpiler. The transpile can be done using a library like babel.To see some quick benefits of JSX, one of the best things to do is use babeljs.io and click on the link "Try It Out". Once there you can paste some JSX on the left and see what it gets transpiled to in order to get a sense of the amount of code you are saving having to write.
For more details on JSX - Facebook Official JSX Docs
Babel - Just a quick mention of Babel and what it is. Babel is a JavaScript transpiler that once included in your application allows you to write ES6/7 and beyond so that you can leverage new JS syntax without waiting for browsers to catch up (i.e. JSX).
Components
From the official documentation, components let you split the UI into independent, reusable pieces, and think about each piece in isolation. To illustrate this, look at this diagram.
The advantage to this library is that you can reuse these components if designed properly (in a generic way). For example, if you needed to reuse the search form (the text input and the button), you could break that out into another file and use it there. More directly, on this page, you notice the search results are each an individual component that is simply duplicated for each result.
Types Of Components
There are three types of components that you should know as a react developer. These three are functional, class based, and containers.
Stateless Functional: This type of component is defined simply as something comes in and something comes out. That something is data. A typical use case is, data is passed to this type of component from another component, and it is simply rendered here.
Class Based Component: Used whenever you want a component to have some kind of ability to be aware of itself and what has happened to it since it has been rendered (be aware of state). Every Class Based Component needs to extend Component and have a render() method and return JSX.
Container: A class based component that can connect to a redux store via the connect() method. The main purpose of this container, is to connect directly to the global store so you can avoid having to manually manage state and props.
Which one should you use? And when?
Start off with a functional component and if you decide you need added functionality, then change it to a class based component. If you need to connect to a redux store, then promote it to a container.
Lifecycle Methods
As part of the react library, every component that you create has built in lifecycle methods that you get as part of that component. You do not have to do anything to get them. They are just there. Their main purpose is to run code at particular times in the rendering process. There are three main categories of lifecycle methods. Mounting Lifecycle Methods are fired when an instance of the current component is being created and about to be inserted into the DOM. Mounting methods include and are called in the following order:- constructor()
- componentWillMount()
- render()
- componentDidMount()
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
- componentWillUnmount()
You will not always need to add these to your components, but you should know there are there in the event that you need certain events or functionality to be called at certain times.
State and Props
State is generally is defined asthe particular condition that someone or something is in at a specific time
Therefore, state in react simply means the condition that the component is in at a given time. Rather than try to explain that deeper here, I suggest reading this article about state, as I think this is one of the best descriptions I have read of the topic.
Props, short for properties, are creation parameters used to customize components when created. You can take the state from a parent component and pass it as a prop to a child component.
To put the same thing in a different way, props are a way of passing data(state) from a parent to a child component.
Redux
Redux contains the application state which is generated by a series of reducers we write. That state is then modified by calling action creators. Action creators return actions which flow through middleware and then the reducers. Whenever a new set of state is produced it flows into containers and those containers rerender themselves and the entire process repeats all over again.At first, Redux is a complex idea to grasp. When you try and implement it for the first time you will probably go through a phase where you question its usefulness. However, once you do 'get it', it becomes very clear why you should use it and how it makes developing your application easier.
Redux is beyond the scope of this post, but to give a bit of a teaser as to what it helps with think of it this way. If you have a large SPA (single page app), you could imagine all of the different states that you could have on an individual page and page to page. When you don't have Redux managing these states, you have to do it yourself. That will lead to a maintenance nightmare and a probably rise in bugs.
With Redux, instead of managing state on your own, Redux does it for you with the concept of the Store. And what is the store? It is simply an object that contains the complete state of your application. It is the "single source of truth" for the application.
Again, this is a topic that will be explored in more depth in its own post, but this is a simple definition of what Redux is and how it can help if you learn how to use it.
Helpful Links
Facebook Official DocsReact Slingshot Starter Repo - With Explanation
No comments: