Intro to React - JSX and Elements
Let’s look at an Instagram post I’ve made. The moment I “like” a post the status changes. The heart becomes red, the number of likes changes, and we can immediately see this on the web page.
Instagram has to do the changes by updating the DOM tree of the page and re-rendering the page in the browser. The application also has to show other Instagrammers that I’ve liked this post if they’re looking at it too.
As of 2019, it was recorded that Instagram had over 1 billion users (Revista Economică, 57). As of the date of this blog post, that number has probably soared to over 2 billion users. Considering the size of Instagram, it'd be a challenge to ensure efficient and consistent DOM manipulation. Luckily, Facebook had already created a frontend library called React specialized in this.
What is React?
- Virtual DOM: Instead of rebuilding the entire DOM tree for updates, React makes use of the virtual DOM. The virtual DOM is a lightweight copy of the actual DOM. React will update exactly which virtual DOM objects have changed through diffing.
- Unidirectional Data Flow: React has a waterfall like concept of transferring data to other parts of the application. State is passed to the view and child components. Actions are triggered by the view and can update state.
- SEO/Performance: you can even run React on the server for SEO, performance, code sharing and flexibility.
We can use create-react-app to bootstrap a React application. The only prerequisite is that we need Node.js version 10+. We can check the Node version in our system with the command
Off to the races!
npx create-react-app my-app cd my-app npm start
Here’s a quick explanation of the folder structure generated by create-react-app:
|node_modules/||All app dependencies live in this folder|
|public/||This folder contains the public static assets of the application|
|public/index.html||This is the first page that gets loaded when we run the application|
|src/||All application related files/folders are created in this folder|
|src/index.js||The entry point of the application|
|package.json||Contains the dependencies of the React application|
If we observe the
index.js file we can see the following:
ReactDOM.render() renders an element or component to the virtual DOM. The first parameter specifies what needs to be rendered. The second argument specifies where to render. A smaller example without components would look like this:
Babel compiles JSX down to
React.createElement() calls. So these examples are identical:
React.render() would render these React elements since Babel compiles JSX down to
React.createElement() calls. Then,
React.createElement() creates objects aka React elements that generally look like this:
These React elements are representations of what we’d want to see on the screen. Note, elements make up components. React reads these objects and uses them to make the DOM and update it.
In this blog post we learned about what React is and how to start a React application. In future blog posts I’ll dive into the main concepts of React with helpful demos. Stay tuned!