In May of 2020, I began my journey as a software developer. I was extremely overwhelmed with the mountain of information in front of me. Not knowing where to start, I just dove right in. As my one year anniversary nears closer, I felt compelled to create a guide to one of my favorite Javascript libraries around: React.
This is part one in my series of React. I will begin by going over the Core Concepts, and then work my way up to more advanced things like React Hooks.
Elements and JSX
React Component is a JavaScript class or function that accepts props.
React Element is what gets returned from a component’s props. It’s an object that virtually describes the DOM nodes that a component represents.
There are two types of components: Functional and Class
For the duration of this series, I will be using Functional components as Functional components are much easier to read and test since they’re plain JavaScript functions without state or lifecycle-hooks.
JSX elements are expressions. It allows you to write HTML in our JavaScript. Because it’s an expression, JSX can be assigned to variables or even be displayed conditionally.
In addition to the above, JSX also allows to nest expressions and elements.
To get your React App started, you need at minimum, the following:
- ReactDOM.render() — this is to render our app
2. A JSX element — called a root node in this context
3. A DOM element within which to mount the app — usually a div with an id of root in an index.html file
Conclusion
Thank you so much for stopping by! If you enjoyed this blog, please be sure to keep an eye out for React: Core Concepts (Pt.2).Please checkout my online portfolio and feel free to connect with me on Linkedin!
Sources:
https://medium.com/code-artistry/the-core-react-concepts-you-should-know-in-2020-15dc7b745f97, https://medium.com/wesionary-team/react-functional-components-vs-class-components-86a2d2821a22