There is too many questions come to your mind before you learn React. However, I decided to start learning React. After I learn React, I understand why we write the template in that way. It shows to me that React is the future for the web development, it changes how I think about developing web applications.
You can learn to React by yourself. I recommend every front-end engineer to learn it. React extends your knowledge, especially how you think about your design, your components, your user interface, your application architecture.
In this article, I give an overview what I know about ReactJS and what I learn about it. I hope you enjoy reading this.
Before I start to discuss the building items for any React project, I recommend people to watch these courses:
- The Beginner’s Guide to React — Kent C. Dodds.
- React For Beginners — Wes Bos.
- Complete Intro to React — Brian Holt.
I discuss the elements of any React application and where is the starting point for any application with React. Also, I give an overview steps to build any React application.
- We need to import React writing React application.
- We need to import the render function from react-dom.
- We need to define where to render our application using render method.
Any React application need a root container to start from it.
render function give us the ability to render any React component to
HTML DOM. The most thing I like about this
render function is that you can test your application easy and render your application to fake DOM element with your testing library.
The component is a View in MVC. You divide your application as you see the application design. For example
Also, a component could be a page or a container like
React application divided into multiple React components, and every component contains a render method which is the entry point for your component.
React library use the render method to know what to render when you use the
Paragraph component. And this is how we use our components inside our project.
I recommend you try to build component by yourself or try to divide any design you got in your job to component and think why you divide it like that.
Make sure to understand this quote before you divide your application into components.
Components contain two primary weapons
You can use these two weapons to make your component more reusable and more flexible.
Props are the inputs for your component, owned by the component parent and passed from there. Any component use props more reusable than other components hide its values inside it.
Props are the primary weapon for reusability because if we define the blogs array inside the
Blogs component, can’t use in other places in the app or with other blogs values other places in our application needs.
These type of component that works only with props called stateless components. Every time you give the same component same input, it renders the same output or the same DOM.
Things to check when start working with props:
- Type checking With PropTypes
- Components and Props
- Presentational and Container Components — Dan Abramov
The component itself owns a state, a state can be modified using the component itself, or can be initialized using the props from outside.
The one place the state initialized is inside the constructor, after that you need to use a
setState method from
React.Component object to modify the state for your component.
These two weapons could be your enemy if you don’t use them wisely, mainly when you use the
setState method in wrong places and trigger re-render without any need. So, please think twice before you design your components and what to use. If the component doesn’t take a state and get the values from outside, it is more reusable this called stateless components if the component manages its state this called stateful components.
React team modify things for us it doesn’t allow us to work with the browser DOM is built for us something called the virtual dom. React team take care of the changes with the DOM in an optimized way.
The problem with manual change for DOM:
- Hard to keep track for every change.
- React team said that your component has to return the HTML you wish to see and react team take the responsibility from you to update the view for you.
The main reason that React team doesn’t take the state from the DOM because the DOM is too slow, so they decide to make the state change from their side.
Why would we want to do that our component’s state from its DOM representation? There are two good reasons:
Steps to build react project
First thing for React application is to divide your UI into components and make sure that every component do one thing and responsible for one thing.
When you build the application components, try to build the components with static values and make sure it works fine without any server or any BE.
Think which component of your application contains a state. Add static state for your component and try to change it. Add events trigger to move data around the component. After this add the server to your components.
Timeline for React component
You can read more about React life cycle here.
- The constructor for the component is run, and the initial state now did.
- Then render method is called then call render for children to make sure to render the component.
- The initial render now run.
componentDidMountlifecycle is triggered.
Routing with React
The user request the index.html page and then the server doesn’t care what the user does.
When you build the user router at the browser, this called a single page application.
React router: The app wrap with router provider when the route changed all component listen for the change and check if the path for is it renders else return null.
Finally, I recommend every frontend engineer to give ReactJS a try; it is a fantastic library to build amazing applications. Don’t be afraid of these new things you can do it. Try to build things by yourself. Here is an article for ideas to learn to React using open source media APIS.
I am writing at blog.yaabed.com. If you enjoyed this article please make sure to share it with other people. And don’t forget to hit the follow button for more articles like this, also follow me on twitter.