All of this is possible with ReactJS.
You might be wondering, do I need to learn a new programming language – JSX – to start building views with ReactJS?
ReactJS functions are called components. A React component lets you split the UI into independent reusable pieces so you can think about each piece in isolation. A component is responsible for returning React elements describing what should appear on the screen.
Components can be defined the way you want so you can get them to do exactly what you want. You can even make a component act like a Container or to act as a View.
A component as a Container can:
- Describe how things work
- Provide no DOM markup or styles
- Provide application data, do data fetching
A component as a View can:
- Describe how things look
- Have no app dependencies
- Receive only props, providing data and callbacks
- Rarely have it’s own state, when they do, it’s just a UI state
Props and Stats
ReactJS gives us power to pass data between components and we do it using props and states.
Props is an abbreviation for properties.You can think of props as a function’s argument that is passed to a function to perform a certain operation. Similarly props act as an argument to a component.
Props are passed from a parent component to child component.
A State keeps the record of the information between the rendering of components. Unlike props, a State’s values are changeable. A State is created in a component by declaring a constructor.
I will end this blog by summarizing this post and mentioning the prerequisite to get started with ReactJS.
We have learned:
- A react component let you split the UI into independent, reusable pieces, and think about each piece in isolation.
- We can define Component as Container and View.
- We use Props and State to pass the data between components.
Click here to participate in the Hello World challenge on Topcoder now!