From Zero To React

Some or most of us, maybe have already use React. A library to build user interface, React is very helpful and as my daily front end tool for six months already, I find that I love using it.

When I decide to start using React, I found so many tutorials about it out there. But for me, this course in udemy is awesome. It have good explanations on the best practices and also give you great examples.

Here, I will share a few things that I learned over the past 6 months using React.

1. React is just another library

React is a great tool to build an user interface. Unlike Angular or Ember, it's almost impossible to build your web application only with it. You will need another library to complement React at the core. We can choose any library we want to compose our web application. If you don't like Redux, just use Mobx or even just context API. You don't want webpack to bundle your app? Try parcel. Or you can just use React with plain old tag scripts.

2. Everything in React is a component

When you build a web app using React, imagine you are building something with lego blocks. You can build anything you want by separating the full building into a few components.

Let me show you how I create our "lego blocks"

Copycopy code to clipboard
1class MyComponent extends React.Component {
2  render() {
3    return (
4      <div>Hello from component</div>
5    );
6}}

And this is how I use the component.

Copycopy code to clipboard
1<MyComponent />

Component is like HTML tag. We can use this component inside another component, like this:

Copycopy code to clipboard
1class OtherComponent extends React.Component {
2  render() {
3    return (
4      <div>
5        <p>This is another component</p>
6        <MyComponent />
7      </div>
8    );
9}}

Component is very flexible, you can reuse it again and again. You even can recompose it to create smaller components and increase your app readability.

3. Props and state

PROPS

This is the most difficult things I find to understand in React. There are so many different articles which explain what props and states are, which confuse me. Props is the way components "talk" to each other. It is the data that we send from parent to child component.

So is it just parent to child? How do we send data from child to parent? You can use callback. We can can talk about this later. For now just remember that we can send our data from parent to child using props.

This is an example of how you can use props.

Copycopy code to clipboard
1<MyComponent someProps="This is props"/>

And you can access our props before, like this:

Copycopy code to clipboard
1class MyComponent extends React.Component {
2  render() {
3    return (
4      <div>
5        <div>Hello from component</div>
6        <p>{this.props.someProps}</p>
7      </div>
8    );
9}}

Props are immutable. You must not change its value. So what if we need to change the data? We can use state.

STATE

State is the data within a component that is used to track information of the component itself. Unlike props, state may change over time. You should not change state using this.state. Always using setState to change values in your component. With setState, all of your components will get re-rendered and you don't have to handle your state manually to update your UI.

This is an example of how you can use state.

Copycopy code to clipboard
1class MyComponent extends React.Component {
2  constructor(props){
3    super(props)
4      this.state = {
5        someState: 'This is our state'
6      }
7  }
8render() {
9  return (
10    <div>
11      <div>Hello from component</div>
12      <p>{this.state.someState}</p>
13      </div>
14  );
15}}

4. Redux

Redux is good. It is a tool to manage your Javascript application state.

While it is frequently used with React. It has no relation with React. You can use it as well with another framework like Angular, Ember, or even vanilla Javascript.

The idea behind Redux is to store application in one single object so that each component will be able to access the application state directly.

It is tempting to try it as soon as possible. It's like the "next thing to do" after you jump into React. But, here's the thing. You might not need Redux, as its creator said it. Sometimes, you just need local state management that already included in React. You will need Redux when the time comes. Here is an article to show you when you should use Redux.

Thanks for reading this. All of the points above are just my personal experiences. Maybe some of them are different with your point of view.

If you have any advices or critics, you can find me on linkedin. See you!

This article is also published on medium.