Another React for beginner tutorial
I write this to make other people understand about React. React is simple. It’s just like playing Lego. We build each Lego component to build car or ship. React also similar. I often hear that React have high barrier to learn. When I see through, why they said that, because they learn React with another concept like Redux, Flow, etc together. We don’t need them. Learning React alone will make us understand the concept behind React and make us learn fast.
Let’s build simple blog. It’s just list of article on the left side and when we click the title, the article showed. First copy this index.html file and save to your local computer. It’s just simple HTML file with Bootstrap, React, and browser library from Babel. We need Babel to transform our JSX on our browser. What is JSX? It’s JavaScript syntax extension that looks similar to XML. We don’t have to use JSX with React, but it’ll make our code more readable. For production, I don’t recommend to do this, it’s just for learning purpose.
JSX is JavaScript syntax extension that looks similar to XML
Copy app.js below and save on your local computer.
Open index.html from your browser and viola! You made React application for the first time! Congratulations! Let me explain what behind this code.
The first thing we need to understand is React Component. What is React Component? React Component is the simple things we need to build React application. We create React Component with instantiate class from React.createClass. Each component have render method that return what thing to render the component. Render method are lifecycle methods that React component have by default. You can see from this link to know what else lifecycle methods beside render method.
We create 3 component on the app.js. Container, Title, and Article. To make easier, take a look picture below.
Container component will act as home for our Title component and Article component. Title component will render our list of title. Article component will render article from. on JSX, the element that start with capital letter, it’s React component and if the element start with lower letter, it’s just HTML element.
The element that start with capital letter, it’s React component and if the element start with lower letter, it’s just HTML element.
Each React component can have state and properties. State is a thing inside component. Properties is a thing outside component. State is mutable. Properties is immutable. If we can change a thing inside component, that will be state. if can’t, that will be properties. To access state, we can call this.state. to access properties, we can call this.props. To change state, we call this.setState. We can’t change properties because immutable.
State is mutable. Properties is immutable.
Our component that have state is Container component. Take a look getInitialState function. getInitialState is one of lifecycle method. getInitialState will called every time we called React component. It’ll return JSON object. On our app.js file, we have articles object and articleSelected object. That is Container component’s state. Container component also have setArticle method. It’s just simple function to set our articleSelected state.
The main thing is render method in our Container component. As you can see, it’s just return HTML div element. But inside that div, we can see our Title and Article component called! Yes, it’s very simple to call our React component. Just create HTML element but with capital letter. simple right?! :)
When I call Title component from our Container component, I write: articles={this.state.articles} setArticle={this.setArticle} beside its component name. Or if you see when I call Article component, I write: articleSelected={this.state.articleSelected} beside its component. That’s how we pass our state to other React component! We can pass state, properties, or method to other React component. What we pass to other React component, it’ll became properties to it’s component. Confused right? Let see more clearly.
See Title component. Take a look code for this.props.articles.map. Map is just function to loop object. Our main focus is this.props.articles. It came from when we call Title component. this.props.setArticle also came from when we first called Title component. Articles are state in Container component. we called that state with this.state.articles. But it became properties inside Title component because we pass Articles state from Container component to Title component.
It’s same as articleSelected state that we pass from Container component to Article component. It’ll become properties inside Article, but it’s state inside Container. State and properties are depend on what they came or initiate from.
State and properties are depend on where they came or initiate from.
And the last is ReactDOM.render. It will render React component to DOM based on id that we set. For this example, I render Container component to div with id container. That’s it! Every time you click title from Title component, it will call setArticle function and set articleSelected state. After that, Article component render what article based on articleSelected state. It’s the simplest explanation that I can explain about React. Now, your turn ;)
