ReactJS is an impressive library to create things and build a user interface. Team form Facebook made it for us.
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:
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.
This is my first React application 🔥✨
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.
Use Paragraph component
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.
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:
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.
Login component contains its state and manages its state.
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.
<img src="https://unsplash.com/@ay_leon?utm_source=medium&utm_medium=referral" alt="Photo by Leon Rojas" /> on [Unsplash](https://unsplash.com?utmsource=medium&utmmedium=referral) Photo by Leon Rojas on Unsplash
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 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:
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.
You can read more about React life cycle here.
componentDidMountlifecycle is triggered.
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.
Controlled and uncontrolled form inputs in React don't have to be complicated You may have seen many articles saying "you shouldn't use setState," and the docs are claiming "refs are bad" … That…goshakkk.name
Fullstack React 🐬 Book - The Complete Guide to ReactJS and Friends What if you could master the entire framework in less time, with solid foundations, without beating your head against…www.fullstackreact.com